Jak dodać wraper obrazków produktów w woocommerce

Poniższy kawałek kodu umożliwia zamknięcie obrazka w dodatkowym kontenerze który możemy ostylować tak aby zdjęcia w nim zawarte nigdy nie przekraczały jego maksymalnych wymiarów. Wraz z kodem css umożliwia nam on stworzenie jednolitych kart produktów wyświetlanych w pętli sklepu (na stronach archiwów czy wyników wyszukiwania.

add_action( 'woocommerce_before_subcategory_title', function(){
    echo '<div class="img-wrap">';
}, 9 );
add_action( 'woocommerce_before_subcategory_title', function(){
    echo '</div>';
}, 11 );

W skrócie dodajemy w odpowiednich miejscach pętli produktowej dwie akcje: jedną otwierającą kontener i drugą zamykającą go.

Wraper obrazków podkategorii na stronach archiwum produktów

Podobnej pomocy potrzebujemy gdy w ustawieniach wyświetlania kategorii mamy ustawiony wybór oba lub subkategorie. Aby ujednolicić wyświetlane zdjęcia możemy użyć następującego kodu otwierającego kontener i zamykającego go.

function openWrap() {
  echo "<div class=\"img-wrap\">";  
}
add_action( 'woocommerce_before_shop_loop_item_title', 'openWrap', 5, 2 );

function closeWrap(){
  echo "</div>";
}
add_action( 'woocommerce_before_shop_loop_item_title', 'closeWrap', 12, 2 );

Kod należy wkleić do pliku functions.php. Pamiętaj żeby zawsze najpierw zrobić kopię zapasową a zmian w tym pliku dokonujesz na własną odpowiedzialność.