CODEWITHSUNDEEP
javascriptjqueryhtmlwordpresswoocommerce
colapsnux
colapsnux

Reputation: 942

Replace large img src with thumbnail img woocommerce products loop

I'm using woocommerce, and by default it use the large image in the product loop. The goal is that I want to replace each large product image (1000x1000px) with the thumbnail image (300x300px) which is contained in the same folder as the large image.

Here is the html code:

<div class="products_container">
 <ul>
  <li>
    <div>
       <a>
         <img class="attachment-entry wp-post-image" width="1000" height="1000" alt="IMG_2606" src="//wp-content/uploads/2015/08/IMG_2606.jpg" />
       </a>
    </div>
  </li>
  <li>
     <div>
       <a>
         <img class="attachment-entry wp-post-image" width="1000" height="1000" alt="IMG_2607" src="//wp-content/uploads/2015/08/IMG_2607.jpg" />
       </a>
    </div>
  </li>
  <li>
     <div>
       <a>
         <img class="attachment-entry wp-post-image" width="1000" height="1000" alt="IMG_2608" src="//wp-content/uploads/2015/08/IMG_2608.jpg" />
       </a>
    </div>
  </li>
  ...
  ...
  ...
 </ul>
</div>

With a total of 24 products per page.

And the jQuery :

I tried to put the jQuery code under the <script></script> tag in the child-theme/woocommerce/loop/loop-start.php file before the <ul>, and in my custom.js file, both doesn't work.

jQuery(document).ready(function($) {

 $('.products_container img.wp-post-image').each(function() {
   var $this = $(this);

   $this.attr('src').replace('.jpg', '-300x300.jpg');
 });
});

If I put this code in the browser console, it replace the large image with the thumbnail as I want $('.products_container').find('img.wp-post-image').attr('src').replace('.jpg', '-300x300.jpg');

Any help would be appreciated

Upvotes: 0

Views: 998

Answers (1)

Andreas
Andreas

Reputation: 21881

You can pass a function as the second parameter of .attr( attributeName, function )

The function is called for each element in the set and should return the new value of the attribute you've defined with the first parameter

jQuery(document).ready(function ($) {
    $('.products_container img.wp-post-image')
        .attr('src', function(idx, src) {
            return src.replace('.jpg', '-300x300.jpg');
        });
});

Upvotes: 1

Related Questions