Jak dodać wybór liczby produktów przy dodawaniu do koszyka w WooCommerce

Dość często podczas robienia zakupów na stronie sklepu wynika potrzeba zamówienia kilka sztuk jednego produktu. W takim razie należy kilka razy dodać ten sam produkt do koszyka, jeśli nie ma opcji, która ułatwia ten proces. A co jeśli należy dodać np. 50 sztuk? W takim razie pojedyncze dodanie produktów może zająć dużo czasu i zniechęcić użytkownika do robienia zakupu.

Dlatego dziś przedstawię Wam proste rozwiązanie powyższego problemu. Realizujemy w WooCommerce opcję, która pozwoli użytkownikowi wybrać dowolną liczbę produktu przed go dodaniem do koszyka. W rezultacie pojawi się możliwość robienia hurtowych zakupów na stronie sklepu.

Do realizacji naszej opcji należy zmodyfikować plik functions.php, który znajduje się w folderze z używanym motywem domyślnym. Dostać się do niego można za pomocą FTP oraz otworzyć za pomocą Edytora wbudowanego w WordPress. Tak jak w poprzednich artykułach, otworzymy plik functions.php za pomocą standardowego Edytora WordPress. Dlatego przejdź do sekcji Wygląd → Edytor w kokpicie WP i spośród plików motywu znajdź interesujący nas plik functions.php.

Przejdź na koniec pliku i wstaw do niego następujący kod:

W tym kodzie uwzględnione są następujące rzeczy:

• Opcja będzie poprawnie pracować przy dodaniu produktów w koszyk za pomocą AJAX oraz bez użycia AJAX.
• Pole dla wyboru liczby produktów będzie widoczne tylko dla tych produktów, które nie mają wariantów. Nie obchodzi to produktów, które mają np. różne kolory, rozmiary itd.
• Te pole będzie ograniczone liczbą produktów dostępnych w magazynie. A więc nie da się kupić więcej egzemplarzy jednego produktu, niż posiada sklep.
• Pole dla wyboru liczby produktów będzie widoczne, jeśli taki produkt jest dostępny w magazynie. Na przykład, brak ceny nie pozwala to zrobić.

Zapisz zmiany w pliku functions.php i przejdź na stronę sklepu (rys.2).

Jak widać z obrazku do każdego produktu zostało dodane pole dla wyboru liczby produktów. Możesz zmienić liczbę można za pomocą przycisków „w górę” i „w dół” oraz wpisać niezbędną liczbę bezpośrednio za pomocą klawiatury, klikając w te pole. Przetestujemy jak działa dodana opcja na przykładzie.

Kupimy w naszym sklepie elektronicznym kilka sztuk telefonu Huawei P9 Lite białego koloru. Zmieniamy liczbę 1 na 2 i klikamy przycisk Dodaj do koszyka. Przechodzimy dalej do naszego koszyka.

W koszyku można zobaczyć, że wybrane przez nas produkty zostały dodane poprawnie. A więc nasza funkcja działa również poprawnie.

W naszym przypadku pole dla wyboru liczby produktów znajduje się powyżej przycisku Dodaj do koszyka. Można zmienić jego położenie i wstawić po lewej oraz po prawej stronie tego przycisku.

Dlatego w dodawanym przez nas kodzie należy znaleźć linijkę add_action( 'woocommerce_after_shop_loop_item’, 'custom_quantity_field_archive’, 0, 9); i „0” zamienić na:

• 9 – pole dla wyboru liczby produktów będzie po lewej stronie:

  

• 10 – pole dla wyboru liczby produktów będzie po prawej stronie:

  

Jeśli w twoim motywie zmiana powyższych liczb nie przyniosła żadnego rezultatu, należy modyfikować plik arkuszu stylów. W takim razie do niego należy dodać linijkę .archive .quantity { display: inline-block; }, która może rozwiązać ten problem.

No to właśnie i tyle :)

Podsumowanie

Kluczowa zasada dla realizacji udanego projektu strony polega na jego projektowaniu z uwzględnieniem potrzeb użytkowników. Jeśli chcecie, aby wasi klienci na pewno byli zadowoleni i robili zakupy w waszym sklepie, musicie dbać o nich, ułatwiając im korzystanie ze sklepu. Przedstawiona dziś opcja jest właśnie przykładem takiego drobiazgu, który jednak pozwala zaoszczędzić czas i realizuje hurtowy zakup produktów. Dlatego ona na pewno przyda się podczas tworzenia sklepu internetowego.

Przypominamy, że jest to wpis przykładowy, dlatego wszystkie zmiany są robione w pliku functions.php motywu domyślnego. Dlatego, aby nie stracić ich przy kolejnych aktualizacjach motywu należy robić wszystkie modyfikacji w folderze motywu potomnego.