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ć…
- Home Assistant 2024.11, czyli „sekcje” domyślnym widokiem z opcją migracji, WebRTC oraz wirtualna kamera - 1970-01-01
- Black Friday w ZUS, czyli jest jeszcze kilka dni, by złożyć wniosek RWS i skorzystać z wakacji składkowych płacąc ZUS za grudzień 2024 - 1970-01-01
- Wakacje składkowe ZUS a zawieszenie działalności gospodarczej, czyli uważaj, bo być może nie będziesz mógł skorzystać (w 2024) - 1970-01-01