Codigos Web / Sin categoría / Wordpress

WordPress change image with click woocommerce

Im going to share here a jQuery method to change Woocommerce image with a mouse click.

A reason to need this implementation could be if you have an ecommerce inside wordpress and you want to show differents images of a single product. This was my reason, so im going to explain the diferents parts of the code to achieve our goal: Change the small woocommerce image with a click, into the big one. In WordPress.

Maybe you have to change red parts of the. This red text are the CSS SELECTORS, and maybe these could change in your wordpress template.

2

1
We use jQuery code between an script tag.

First part of the code – Click in small image and change big one

  1. jQuery(document).on("click","<span style="color: #ff0000;">.thumbnails a</span>",function(e){e.preventDefault();var t=jQuery("<span style="color: #ff0000;">.images a.woocommerce-main-image img</span>").attr("src"),a=jQuery("<span style="color: #ff0000;">.images a.woocommerce-main-image</span>").attr("href"),i="<a style="opacity: 0.6;" title="" href="+a+;" target="_blank" data-rel="prettyPhoto&#91;product-gallery&#93;"><img class="attachment-shop_thumbnail size-shop_thumbnail" src="+t+" alt="" width="200" height="150" /></a>";jQuery(this).replaceWith(i);

Clicking on the small image as a link(.thumbnails a), first using e.preventDefault(); to deactivate the standard link, and after changing the big image link (.images a.woocommerce-main-image) with the small image that we clicked.

Second part of the code – Change the small image with the image that was big, and changing opacity.

  1. var r=jQuery(this).find("img").attr("src"),m=jQuery(this).attr("href"),o="<a class="woocommerce-main-image zoom" title="" href="&quot;+m+&quot;" target="_blank" data-rel="prettyPhoto&#91;product-gallery&#93;"><img class="attachment-shop_single size-shop_single wp-post-image" title="Ampliar" src="&quot;+t+&quot;" alt="" width="450" height="450" /></a>";jQuery("<span style="color: #ff0000;">.woocommerce-main-image</span>").html(o)});

In this second part we are doing almost the same than before but the opposite image: Changing the place of the big one in to the small one.

Coded minify, ready to copy&paste on your site

  1. jQuery(document).ready(function(){jQuery("h3:nth-child(8)").click(function(){jQuery("pre:nth-child(9)").slideToggle(1e3)})}),jQuery(document).on("click",".thumbnails a",function(e){e.preventDefault();var w=jQuery(".images a.woocommerce-main-image").attr("href"), t=jQuery(".images a.woocommerce-main-image img").attr("src"),a=jQuery(".images a.woocommerce-main-image").attr("href"),i="<a style="opacity: 0.6;" title="" href="&quot;+w+&quot;" target="_blank" data-rel="prettyPhoto&#91;product-gallery&#93;"><img class="attachment-shop_thumbnail size-shop_thumbnail" src="&quot;+t+&quot;" width="200" height="150" /></a>"; jQuery(this).replaceWith(i);var r=jQuery(this).find("img").attr("src"),m=jQuery(this).attr("href"),o="<a class="woocommerce-main-image zoom" title="" href="&quot;+m+&quot;" target="_blank" data-rel="prettyPhoto&#91;product-gallery&#93;"><img class="attachment-shop_single size-shop_single wp-post-image" title="Ampliar" src="&quot;+r+&quot;" alt="" width="450" height="450" /></a>"; jQuery(".woocommerce-main-image").html(o)});

I hope this solve your problem in WordPress of how to change the image with a click in woocommerce.

No comments