Krótsza ścieżka konwersji – wybór wariantu na liście produktów

WooCoomerce pozwala użytkownikom tworzyć różne typy produktów w zależności od ich specyfikacji. To mogą być zarówno produkty proste, jak i produkty z wariantami. W przypadku tych drugich pojawia się możliwość dodawania różnych atrybutów do wybranego artykułu. Wybór wariantu jest wtedy konieczny przed dodaniem do koszyka. W tym artykule dowiesz się, jak skrócić ścieżkę konwersji w tym przypadku.

Produkt z wariantami w sklepie

Dajmy na przykład, że prowadzisz sklep odzieżowy i sprzedajesz koszulki z jednej kolekcji, które różną się tylko kolorami i rozmiarami. Nie musisz wtedy dodawać na stronę wszystkich wariantów tych koszulek (w zależności od ich koloru i rozmiaru) jako osobne artykuły, gdyż wystarczy wybrać typ „Produkt z wariantami”. Dzięki temu możesz wyświetlić wszystkie możliwe warianty produktu i przedstawić go w formie jednego artykułu na stronie sklepu www.

Więcej informacji o tym typie produktu możesz znaleźć w artykule Dodawanie produktu z wariantami w WooCommerce. Problemem jest jednak to, że z poziomu listy produktów klient sklepu musi przejść do produktu, aby wybrać wariant.

Jak skrócić ścieżkę konwersji? – gotowe rozwiązanie

W dzisiejszym wpisie pokażemy jeden trik, który pozwoli dodać rozwijaną listę wariantów produktu na stronę listy produktów. Dzięki niemu użytkownicy mogą szybko wybrać interesujący produkt i dodać go do koszyka bez bezpośredniego przejścia na stronę z opisem produktu. Dla realizacji tego pomysłu musimy zmodyfikować plik functions.php motywu używanego domyślnie, dodając odpowiedni kawałek kodu, który rozwiąże nasz dylemat pt. „jak skrócić ścieżkę konwersji dla produktu z wariantami”.

Dla wprowadzenia odpowiednich zmian do pliku functions.php skorzystamy się z edytora wbudowanego w WordPress. Dlatego przejdziemy do panelu administracyjnego i wybierzemy sekcję Wygład – Edytor:

Wśród dostępnych plików motywu wybierzemy functions.php, do którego wstawimy poniższy kod:

Działanie w praktyce

Dalej możemy zapisać zmiany i przejść na stronę przeglądu produktów, gdzie sprawdzimy działanie dodanego kodu:

Jak widać na powyższym zrzucie ekranu, pod produktem z wariantami pojawiło się rozwijane menu. Za jego pomocą można wybrać interesujący kolor i dodać telefon do koszyka. Otrzymamy następujący rezultat:

W koszyku znajduje się wybrany przez nas telefon. A wariantem koloru jest złoty – ten, który zaznaczyliśmy w poprzednim kroku. Oznacza to, że wprowadzony kod działa poprawnie i pozwala rozwiązać zadanie opisane wcześniej.

Podsumowanie

W dzisiejszym artykule przedstawiliśmy Ci krótkie rozwiązanie dotyczące produktów z wariantami. Dowiedziałeś się z niego, jak skrócić ścieżkę konwersji w przypadku produktu z wariantami. Kod zamieszczony we wpisie umożliwił dodanie wyboru odpowiedniego wariantu towaru bezpośrednio na stronie z listą produktów, bez przejścia do detalicznego opisu.

PS. Jeśli masz pytania lub uwagi, proszę zostaw komentarz pod wpisem. Z chęcią na nie odpowiem.