Galeria produktu – problem po aktualizacji do WooCommerce 3.x?
Jeśli używacie WooCommerce i zaktualizowaliście tę wtyczkę do wersji 3.x, prawdopodobnie zauważyliście problem ze zdjęciami w galerii produktów. Galeria, która korzystała wcześniej ze skryptu Lightbox nie działa, a zdjęcia wyświetlają się jedno pod drugim a po kliknięciu – bezpośrednio w przeglądarce. Postaram się opisać problem w tym artykule.
Czemu galeria lightbox przestała działać?
Przed aktualizacją WooCommerce do wersji 3, w zapleczu w widoku WooCommerce -> Ustawienia -> Produkty -> Wyświetlanie mogliśmy zobaczyć takie opcje:
i wszystko było ok – galeria w widoku produktu wyświetlała się wykorzystując skrypt Lightbox. Niestety po aktualizacji, zaznaczona czerwoną ramką opcja „Galeria obrazków produktu” zniknęła, a galeria nie działa.
Tutaj warto wspomnieć, że aktualizacje wtyczek takich jak WooCommerce, powinny być zawsze najpierw przeprowadzane na testowej stronie i dopiero po sprawdzeniu funkcjonalności wszystkich elementów – na stronie produkcyjnej.
Nowe funkcje galerii w WooCommerce 3.x
Twórcy WooCommerce postanowili w wersji 3.0 dodać kilka ciekawych funkcji dotyczących zdjęć oraz galerii produktów:
- nowa ulepszona wersja lightbox
- powiększanie zdjęć
- slider
Są to dość duże zmiany, które dotychczas były realizowane za pomocą dodatkowych wtyczek i głównie dlatego twórcy zdecydowali się nie włączać tych opcji domyślnie w nowej wersji WooCommerce.
Jeśli galeria przestała działać – rozsądnym wyjściem będzie poczekać na aktualizacje motywu, którego używacie w sklepie, ponieważ to od twórców motywu zależeć będzie czy i jakie nowe funkcje galerii będą wspierane. (niektóre motywy mogą np. korzystać z dedykowanych rozwiązań jeśli chodzi o galerie produktów).
Jeśli jednak Wasza galeria przestała działać, a nie chcecie czekać na aktualizację motywu, postaram się pomóc w rozwiązaniu tego problemu.
Jak dodać nowe funkcje galerii do naszego motywu?
Nie jest to trudne, wystarczy odnaleźć w plikach Waszego motywu (powinien to być plik functions.php) taką linijkę oznaczającą wsparcie dla wtyczki WooCommerce:
add_theme_support( 'woocommerce' );
i poniżej dodać następujący fragment:
add_theme_support( 'wc-product-gallery-zoom' ); add_theme_support( 'wc-product-gallery-lightbox' ); add_theme_support( 'wc-product-gallery-slider' );
Jeśli nie wyłączyliście bazowych styli WooCommerce, galeria powinna już działać prawidłowo. Często jednak twórcy motywów wyłączają style – w tym wypadku będziecie musieli dodać także następujący kod – np. do pliku style.css:
/* WooCommerce 3.X Gallery */ .woocommerce-product-gallery { position: relative; margin-bottom: 3em } .woocommerce-product-gallery figure { margin: 0 } .woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) { width: 25%; display: inline-block } .woocommerce-product-gallery .flex-control-thumbs li { list-style: none; float: left; cursor: pointer } .woocommerce-product-gallery .flex-control-thumbs img { opacity: .5 } .woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1 } .woocommerce-product-gallery img { display: block } .woocommerce-product-gallery--columns-3 .flex-control-thumbs li { width: 33.3333% } .woocommerce-product-gallery--columns-4 .flex-control-thumbs li { width: 25% } .woocommerce-product-gallery--columns-5 .flex-control-thumbs li { width: 20% } .woocommerce-product-gallery__trigger { position: absolute; top: 1em; right: 1em; z-index: 99; } a.woocommerce-product-gallery__trigger { text-decoration: none; } .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger { position: absolute; top: .875em; right: .875em; display: block; height: 2em; width: 2em; border-radius: 3px; z-index: 99; text-align: center; text-indent: -999px; overflow: hidden; } .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger { background-color: #169fda; color: #ffffff; } .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover { background-color: #1781ae; border-color: #1781ae; color: #ffffff; } .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before { font: normal normal normal 1em/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; content: "\f00e"; line-height: 2; text-indent: 0; }
I to wszystko, teraz galeria powinna już działać poprawnie. W zależności od wykorzystywanego motywu, być może będzie jeszcze trzeba dodać niewielkie poprawki wizualne. Moim zdaniem zmiany są świetne i poprawiają funkcjonalność (zwłaszcza na urządzeniach mobilnych).
Stwórz mega szybką i bezpieczną statyczną stronę internetową z Publii! WooCommerce – Darmowa wysyłka, a klasy wysyłkowe