To jest wprowadzenie dla początkujących programistów do wtyczki WordPress WooCommerce. W tym poście przyjrzymy się podstawom działania WooCommerce i możliwości dostosowania go w naszym motywie lub wtyczce za pomocą haków i szablonów.
Po pierwsze, WooCommerce oferuje dużą elastyczność dla twórców motywów i wtyczek, aby dostosować ich funkcjonalność. W przypadku prostych modyfikacji zwykle masz co najmniej dwie alternatywy. Wybór sposobu modyfikacji zależy od tego, jak wolisz pracować, jak elastyczny i czytelny powinien być Twój kod oraz od tego, jak wolisz kontynuować konserwację witryny w przyszłości, jeśli chodzi o aktualizacje wtyczek (i WordPress).
Zanim zaczniesz zajmować się modyfikacją funkcjonalności WooCommerce za pomocą kodu, powinieneś sprawdzić, czy to, co chcesz osiągnąć, jest możliwe poprzez zmianę ustawień. WooCommerce zawiera ogromną stronę ustawień, która pozwala na wiele zmian. W nowszych wersjach WooCommerce dodał również i przeniósł dodatkowe ustawienia do WordPress Customizer. Tutaj będziesz mógł na przykład dostosować liczbę kolumn i dostosować niektóre pola kasy.
Szablony WooCommerce
WooCommerce oferuje szeroką gamę plików szablonów, które jako programista motywów możesz zastąpić. Sposób, w jaki to robisz, polega na utworzeniu kopii oryginalnego szablonu WooCommerce do folderu motywu. Następnie wprowadzasz zmiany w pliku w swoim motywie.
Przejdź do folderu wtyczki WooCommerce w /wp-content/plugins/woocommerce/. Tutaj znajdziesz podfolder templates. Cała zawartość plików (jest ich dużo!) /wp-content/plugins/woocommerce/templates/zawierająca podfoldery to wszystkie pliki szablonów, które możesz nadpisać w swoim motywie.
Aby WooCommerce mógł znaleźć zmodyfikowane szablony, potrzebujesz podfolderu w katalogu głównym motywu o nazwie woocommerce. Jeśli slug Twojego motywu to „awhitepixel", Twój folder powinien znajdować się pod adresem /wp-content/themes/awhitepixel/woocommerce/. Wewnątrz tego folderu możesz umieścić swoje zmodyfikowane kopie plików szablonów WooCommerce. Pamiętaj, że pliki szablonów znajdujące się w podfolderach należy umieścić w odpowiednich podfolderach w folderze woocommerce. Na przykład; nadpisanie WooCommerce /templates/single-product/add-to-cart/simple.phpwymaga umieszczenia kopii simple.phpw /woocommerce/single-product/add-to-cart/folderze w swoim motywie.
Być może zauważyłeś również, że w szablonach jest wiele akcji i filtrów. Większość z nich jest wypełniona do_action()s. Aby optymalnie wykorzystać WooCommerce, nie należy usuwać żadnych haczyków z szablonów. W większości przypadków możesz rozważyć zmianę funkcjonalności za pomocą akcji i filtrów zamiast zastępowania szablonów. Wyjaśnię dlaczego!
Ważna uwaga na temat nadpisywania szablonów i aktualizacji wtyczek
Dla początkującego nadpisanie szablonu może wydawać się najłatwiejszą i najbardziej intuicyjną poprawką. Po co zadzierać z haczykami, jeśli możesz od razu zmienić szablon, który wyświetla to, co chcesz zmienić? Odpowiedź: Ponieważ ta strategia generuje więcej pracy na utrzymanie Twojego sklepu internetowego.
WooCommerce często się aktualizuje, a czasami aktualizuje plik szablonu. Aby Twój sklep internetowy był aktualny, musisz również zaktualizować nadpisane pliki szablonów w swoim motywie. Zazwyczaj będziesz musiał zastąpić cały plik szablonu najnowszym zaktualizowanym plikiem, a następnie ponownie dodać zmiany. To szybko staje się dużo trudniejsze, jeśli nie pamiętasz wszystkich wprowadzonych zmian. Weź to ode mnie, który ma wieloletnie doświadczenie w naprawianiu plików szablonów WooCommerce innych programistów podczas aktualizacji wtyczek. Zaufaj mi, to nie jest fajna praca!
Teraz, gdy wiemy, że haki są lepszą strategią, spójrzmy, jak się do tego zabrać.
Haki WooCommerce
WooCommerce oferuje ogromną ilość hooków, zarówno akcji, jak i filtrów. Korzystanie z haków jest naprawdę proste!
Za pomocą haków możesz również zmienić znacznie więcej niż tylko wyjście szablonów. Możesz dostosować ceny produktów, pola kasy lub sprawić, by Twój sklep internetowy zrobił coś, gdy produkt zostanie dodany do koszyka.
Jeśli tworzysz wtyczkę, haki są również jedyną drogą. Możesz zastąpić szablony tylko w motywie, a nie wtyczce. (Ok, są sposoby na pokonanie tego, ale jest to bardzo rzadkie i nie zalecane).
Jeśli zajrzałeś do niektórych plików szablonów WooCommerce, powinieneś zobaczyć wiele do_action(). To są haki; punkty kontrolne, do których możesz się podłączyć i dodać swój kod lub zmodyfikować zmienną. Jeśli nie jesteś pewien, jak działają hooki, mam post, który szczegółowo to wyjaśnia.
Jeśli chcesz coś wypisać, na przykład tekst lub coś podobnego, poszukaj akcji (do_action()). Na przykład wyprowadzając coś w szablonie koszyka, możesz podpiąć się pod woocommerce_before_cart, woocommerce_before_cart_table, woocommerce_before_cart_contents, woocommerce_cart_contents, woocommerce_cart_actions, woocommerce_after_cart_contents, woocommerce_after_cart_table, woocommerce_cart_collaterals, lub woocommerce_after_cart. Po prostu wybierz ten, który znajduje się w miejscu, w którym chcesz uzyskać wydruk. Oto przykład wyświetlania tekstu przed tabelą i formularzem na stronie koszyka:
add_action('woocommerce_before_cart', function() {
_e('Here are the products you have added in the cart so far', 'textdomain');
});Filtry (szukaj apply_filters()) służą do modyfikowania wyjścia lub zmiennej. Częstym zastosowaniem filtrów w WooCommerce jest modyfikacja tekstu „Dodaj do koszyka” na przyciskach kupowania. WooCommerce oferuje w tym celu wiele filtrów, co pozwala kontrolować tekst na różnych stronach. Na przykład możesz dostosować tekst w pętli sklepu lub w widoku pojedynczego produktu. Filtry często dostarczają wielu argumentów do dalszej kontroli, na przykład obiekt produktu. Oto prosty przykład, jak zmienić tekst „Dodaj do koszyka” w widoku pojedynczego produktu:
add_filter('woocommerce_product_single_add_to_cart_text', function($original_text, $product) {
return __('Buy this', 'textdomain');
}, 10, 2);Mając pewną wiedzę na temat działania hooków i po prostu zaglądając do plików szablonów, można znaleźć całkiem sporo łatwo zmieniających się funkcji. Oczywiście WooCommerce oferuje znacznie bardziej zaawansowaną modyfikację, zmianę cen, metod płatności, modyfikacje produktów czy importy, a wszystko to możliwe za pomocą hooków.
Wniosek
Celem tego postu jest przekazanie początkującym podstaw, jak wprowadzać modyfikacje w WooCommerce i konsekwencje tego, jak wprowadzasz zmiany. Zawsze zalecam używanie hooków nad nadpisywaniem plików szablonów, chyba że jest to absolutnie konieczne.
Następnym krokiem jest zagłębienie się w zaawansowane modyfikacje poprzez poznanie hooków, procesów i obiektów w WooCommerce. Ponieważ WooCommerce jest najpopularniejszą platformą eCommerce, w Internecie dostępnych jest wiele zasobów i przykładów kodu. Zajrzyj również do kategorii Woocommerce na tej stronie, aby uzyskać więcej informacji.