Dziś na tapet bierzemy zdjęcie produktu w WooCommerce. Ale nie będziemy go wyrównywać w widoku archiwum. Zajmiemy się zdjęciem produktu na karcie produktu. Jednak nie będziemy go modyfikować np. dla produktów niedostępnych na stanie, a zajmiemy się jego powiększaniem. Od sterowania jego “intensywnością”, po całkowite wyłączenie. A na deser pozbędziemy się linku, który pod zdjęciem się w standardzie kryje.

Modyfikacje działania zdjęcia produktu na stronie produktu w WooCommerce

W standardowej konfiguracji WooCommerce na stronie produktu ma włączoną opcję powiększania tego, co na zdjęciu po najechaniu kursorem. Taki efekt zooma/lupki.

By lepiej pokazać, o czym mowa, to poniżej przykładowa karta produktu w trynie neutralnym, czyli kursor myszki nie znajduje się na zdjęciu:

A teraz ten sam widok, ale po najechaniu kursorem na zdjęciu produktu, w standardowej konfiguracji WooCommerce:

I choć są tacy, którym to się podoba, to z doświadczenia wiem, że prośba o wyłączenie tego efektu jest jedną z częstszych. Ale zanim do całkowitego wyłączenia powiększenia przejdziemy, dobrze wiedzieć, że intensywnością tego efektu można dość łatwo sterować, za pomocą jednej linijki kodu PHP (dodajmy np. do pliku functions.php w motywie potomnym):

add_filter( 'woocommerce_gallery_full_size', function( $size ) { return 'X'; } );

W miejsce “X” możemy wstawić “medium” dla średniego rozmiaru:

Lub “large” dla największego:

A teraz to, co tygryski lubią najbardziej w większości przypadków sprawdza się najlepiej, czyli całkowite wyłączenie opcji zoom dla zdjęcia produktu:

function webinsider_wp_wc_remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'after_setup_theme', 'webinsider_wp_wc_remove_image_zoom_support', 100 );

Czego efektem jest nie tylko brak powiększenia, ale i ikony lupy:

I już jako bonus, by nie tworzyć dla takiego drobiazgu oddzielnego artykułu, bo “publicystyczna otoczka” zajmie więcej niż kwestie merytoryczne, sposób na pozbycie się linku ze zdjęcia:

function webinsider_wp_wc_remove_link_on_thumbnails( $html ) {
     return strip_tags( $html,'<div><img>' );
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'webinsider_wp_wc_remove_link_on_thumbnails' );

Opcja wprawdzie bardziej przydatna niż powiększanie, ale czasem też sensu nie ma, i dobrze wtedy wiedzieć, jak łatwo się takiego linkowania pozbyć…