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:

WooCommerce – usunięta w wersji 3.0 opcja włączenia galerii Lightbox

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

Tagi artykułu:

×

Interesujesz się WordPressem?

Polub nas na Facebooku, będziesz na bieżąco!

facebook