Заменить большой img src с миниатюрой img woocommerce loop продуктов

Question

Я использую woocommerce, и по умолчанию он использует большое изображение в контуре продукта. Целью является то, что я хочу заменить каждое изображение большого продукта (1000x1000px) с миниатюрным изображением (300x300px), который содержится в той же папке, что и большое изображение.

Вот HTML код:

<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> 

В общей сложности 24 товаров на странице.

И JQuery:

Я пытался поставить код JQuery под <script></script> тега в файле child-theme/woocommerce/loop/loop-start.php перед <ul>, и в моих custom.js файл, как не работает.

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

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

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

Если я ставлю этот код в консоли браузера, он заменяет большое изображение с миниатюрой, как я хочу $('.products_container').find('img.wp-post-image').attr('src').replace('.jpg', '-300x300.jpg');

Любая помощь будет оценена

Answer 1

Вы можете передать функцию в качестве второго параметр .attr(attributeName, function)

Функция вызывается для каждого элемента в наборе и должна возвращать новое значение атрибута, который вы определили, с первым параметром

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