Jak korzystać z haków WooCommerce – przewodnik z przykładami

Chcesz nauczyć się korzystać z hooków WooCommerce? Jesteś we właściwym miejscu! W tym przewodniku pokażemy, jak używać haków akcji i filtrów. Poza tym przedstawimy Ci wiele przykładów, które możesz zastosować w swoim sklepie WooCommerce!

Kiedy zainstalujesz WooCommerce na swojej stronie, masz dostęp do długiej listy nowych haczyków, które rozszerzają Twoje możliwości opracowania spersonalizowanego rozwiązania. Haki WooCommerce działają tak samo, jak natywne haki WordPress i umożliwiają wykonywanie niestandardowych skryptów na dowolnej stronie WooCommerce.

Podobnie jak w przypadku haczyków WordPress, istnieją dwa rodzaje haczyków WooCommerce: akcja lub filtr. Podpięcie akcji pozwala wstawić jakiś skrypt, podczas gdy podpięcia filtra otrzymują oryginalne dane i zwracają je z pewną modyfikacją.

Składnia haczyków WooCommerce

Haki WooCommerce działają zgodnie z tą samą składnią, co haki WordPress.

Akcja hak

add_action('name_of_the_action_hook','your_action_hook_funcion');

Hak filtra

add_filter('name_of_the_filter_hook','your_filter_hook_funcion');

Po zadeklarowaniu podpięcia musisz dodać swoje skrypty w funkcji:

 funkcja your_action_hook_funcion(){
# Twój kod tutaj
}

Hooki filtra muszą zwracać pewne dane w parametrze funkcji:

 funkcja your_filter_hook_function($data){
# Twój kod, który modyfikuje $data
zwróć $dane;
}

Aby zobaczyć hak WooCommerce w akcji, wklej następujący kod w pliku functions.php motywu potomnego:

 add_action( 'woocommerce_product_meta_start', 'quadlayers_woocommerce_hooks');
function quadlayers_woocommerce_hooks() {
echo '<img src="https://kokohai.com/wp-content/uploads/2020/02/logo-kokohai-tienda-de-merchandising-de-anime-y-maga-e1584570981420.png">'; // Zmień na żądany adres URL obrazu
}

To jest najbardziej podstawowy przykład, w którym dodajesz zdjęcie do wszystkich stron produktów. Obraz zostanie wyświetlony pod przyciskiem Dodaj do koszyka , przed metadanymi produktu.

Jak widać, nazwa haka, woocommerce_product_meta_start , nie wymaga wyjaśnień i mówi dokładnie, gdzie ten hak umożliwia wstawienie kodu.

Lista haków WooCommerce

Istnieje ponad tysiąc haczyków WooCommerce. Tutaj wymienimy najpopularniejsze z nich, abyś mógł zapoznać się z najpopularniejszymi i najbardziej znanymi haczykami.

Listę podzieliliśmy na sekcje według stron, z którymi są powiązane. Nazwy haków są oczywiste, więc nie będziesz miał problemów ze zrozumieniem, co robią.

• Wózek

  • woocommerce_before_cart
  • woocommerce_before_cart_table
  • woocommerce_before_cart_contents
  • woocommerce_cart_contents
  • woocommerce_after_cart_contents
  • woocommerce_cart_is_empty
  • woocommerce_cart_totals_before_shipping
  • woocommerce_cart_totals_after_shipping
  • woocommerce_cart_totals_before_order_total
  • woocommerce_cart_totals_after_order_total
  • woocommerce_after_shipping_rate
  • woocommerce_before_shipping_calculator
  • woocommerce_proceed_to_checkout
  • woocommerce_after_cart_totals
  • woocommerce_after_cart

• Sprawdzić

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_before_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_checkout_after_order_review
  • woocommerce_checkout_after_customer_details
  • woocommerce_checkout_before_order_review
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_after_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_shipping
  • woocommerce_review_order_after_order_total
  • woocommerce_checkout_order_review
  • woocommerce_review_order_after_submit
  • woocommerce_review_order_after_payment
  • woocommerce_after_checkout_form
  • woocommerce_thankyou
• Aby uzyskać więcej informacji na temat haków kasowych, zapoznaj się z naszym pełnym przewodnikiem na temat haków kasowych WooCommerce.

• Produkty

  • woocommerce_before_main_content
  • woocommerce_after_main_content
  • woocommerce_before_single_product_summary
  • woocommerce_after_single_product_summary
  • woocommerce_before_single_product
  • woocommerce_after_single_product
  • woocommerce_single_product_summary
  • woocommerce_product_meta_start
  • woocommerce_product_meta_end
  • woocommerce_review_before
  • woocommerce_review_before_comment_meta
  • woocommerce_review_before_comment_text
  • woocommerce_review_comment_text
  • woocommerce_review_after_comment_text

• Taksonomie

  • woocommerce_archive_opis
  • woocommerce_shop_loop
  • woocommerce_before_shop_loop
  • woocommerce_after_shop_loop
  • woocommerce_after_shop_loop_item
  • woocommerce_after_shop_loop_item_title
  • woocommerce_shop_loop_item_title

• Rachunek

  • woocommerce_before_account_navigation
  • woocommerce_after_account_navigation
  • woocommerce_before_edit_account_address_form
  • woocommerce_account_content
  • woocommerce_before_my_account
  • woocommerce_after_my_account

• Mini wózek

  • woocommerce_before_mini_cart
  • woocommerce_before_mini_cart_contents
  • woocommerce_mini_cart_contents
  • woocommerce_widget_shopping_cart_before_buttons
  • woocommerce_widget_shopping_cart_buttons
  • woocommerce_after_mini_cart

• E-mail

  • woocommerce_email_after_order_table
  • woocommerce_email_before_order_table
  • woocommerce_email_customer_details
  • woocommerce_email_footer
  • woocommerce_email_header
  • woocommerce_email_order_details

• Światowy

  • pre_get_product_search_form
  • woocommerce_bułka tarta
  • woocommerce_no_products_found

Aby znaleźć pełną listę haczyków WooCommerce, możesz zajrzeć do oficjalnej dokumentacji WC.

Przydatne przykłady haków WooCommerce

Teraz spójrzmy na kilka przykładów przydatnych rzeczy, które możesz zrobić z hakami WooCommerce.

UWAGA : Przed rozpoczęciem zalecamy utworzenie motywu potomnego. Jeśli ich nie znasz, możesz zapoznać się z naszym przewodnikiem, jak utworzyć motyw potomny i listą najlepszych wtyczek motywów potomnych.

Jeśli dopiero zaczynasz od hooków, możesz po prostu skopiować te skrypty i wkleić je do pliku functions.php motywu potomnego. Następnie, gdy poczujesz się bardziej komfortowo, możesz edytować skrypty i tworzyć inną logikę.

Dodaj opis do strony sklepu

Domyślnie strona sklepu nie pokazuje opisu. Możesz go jednak włączyć za pomocą haka woocommerce_archive_description w następujący sposób:

 funkcja quadlayers_shop_description() {
$description = '<p>Witam w moim sklepie, proszę bądź hojny i kupuj wiele rzeczy, dziękuję.</p>';
echo $opis;
}

add_action('woocommerce_archive_description', 'quadlayers_shop_description');

Dodaj notatkę informacyjną po przycisku Dodaj do koszyka

Haki do koszyka WooCommerce umożliwiają wstawianie niestandardowych skryptów w wielu sekcjach strony koszyka. Tutaj pokażemy, jak dodać tekst po przycisku Dodaj do koszyka .

Ten skrypt wydrukuje niestandardowy tekst po przycisku Dodaj do koszyka.

 add_action( 'woocommerce_after_add_to_cart_form', 'quadlayers_after_addtocart_button' );
function quadlayers_after_addtocart_button() {
	// UWAGA: zamień informacje o kategorii na „muzyka” i zastąp /kosztów-dostawy/ prawidłowym adresem URL
	if ( is_product() && has_term( array( 'muzyka' ), 'product_cat' ) ) {
		echo '<div></div><div>;<a href="/delivery-costs/" target="_blank" rel="noopener"><i class="fa fa-truck" aria-hidden=" true"></i> Wydaj 100 USD i otrzymaj bezpłatną dostawę;</a></div>
'; } }

Możesz użyć tego do promowania rabatów, które wymagają na przykład minimalnych wydatków lub bezpłatnej dostawy.

Wyjaśnienie kodu

• Hak woocommerce_after_add_to_cart_form drukuje kod HTML po przycisku.
• Sprawdzamy, czy aktualna strona jest stroną produktu i czy ma określoną przez nas kategorię.
• Użyj informacji o kategorii w tablicy. W ten sposób możesz sprawdzić kilka kategorii.
• Treść z echem pozwala na tagi HTML, zmienne i wszystko inne w zakresie PHP.

Dodaj tekst do określonej taksonomii produktu

Zobaczmy teraz, jak wykorzystać hooki WooCommerce do wyświetlania komunikatu w produktach z określonym tagiem. Na przykład wyświetlimy komunikat z ofertą rabatu na niektóre produkty.

Pamiętaj, aby najpierw oznaczyć produkt.

 add_action( 'woocommerce_before_single_product', 'my_product_notice_function' );
funkcja my_product_notice_function() { 
if ( is_product() && has_term( 'discount-25','product_tag' ) ) {
echo '<p><strong>Ten produkt dotyczy 25% rabatu przez następne 48 godzin!</strong></p>';
}
}

Wyjaśnienie kodu

1. 1. Używamy haka woocommerce_before_single_product , aby wyświetlić komunikat na górze strony produktu.
   2. Wewnątrz funkcji używamy warunku is_product() , aby upewnić się, że jest to strona produktu.
   3. A has_term() sprawdza, czy bieżący produkt ma tag „rabat-25” .
   4. Następnie wydrukuj swoją wiadomość w instrukcji if.

Blokuj zakupy dla wylogowanych użytkowników

Hooki WooCommerce umożliwiają wyłączenie przycisku Dodaj do koszyka na stronach produktów dla wylogowanych użytkowników. Może to być przydatne w przypadku produktów lub ofert dostępnych tylko dla subskrybentów lub członków. Aby uzupełnić przykład, dodamy drugi hak, aby wyświetlić komunikat, gdy przycisk zakupu jest wyłączony.

Hak filtra woocommerce_is_purchasable zablokuje zakup, a hak działania woocommerce_before_single_product wyświetli komunikat.

 add_action( 'woocommerce_before_single_product', 'quadlayers_add_message');
add_filter( 'woocommerce_is_purchasable', 'quadlayers_block_admin_purchase' );
function quadlayers_block_admin_purchase($block) {
if ( is_user_logged_in() ):return true;
else:zwróć fałszywe;
endif;
}

function quadlayers_add_message(){
if ( !is_user_logged_in() ):echo '<H2>ZALOGUJ SIĘ, ABY KUPIĆ TEN PRODUKT</h2>';
endif;
}

Wyjaśnienie kodu

1. Używamy zaczepu akcji, aby wydrukować wiadomość, a zaczepu filtra, aby wyłączyć przycisk Dodaj do koszyka .
2. Hak filtra woocommerce_is_purchasable będzie miał wartość true, jeśli użytkownik jest zalogowany, i false, jeśli jest wylogowany.
3. Używamy również warunkowej instrukcji if() , aby zastosować warunki tylko do wylogowanych użytkowników w obu funkcjach (przycisk Dodaj do koszyka wyłączony i komunikat).
4. Na koniec dodaliśmy do wiadomości styl CSS, ujęty w tagu HTML H2.

Jak w pełni wykorzystać haki WooCommerce?

Podsumowując, haki WooCommerce to świetne narzędzia do dostosowywania witryny. Istnieją setki haków do użycia i wszystkie mają tę samą składnię. Zachęcamy więc do zapoznania się z przykładami i uzyskania inspiracji do zastosowania haczyków, których potrzebujesz na swojej stronie.

Haki pozwalają ulepszyć dowolny obszar Twojego sklepu: od kasy, przez koszyk, po strony produktów, taksonomie i wiele więcej! Tak więc, jeśli chcesz jak najlepiej je wykorzystać, śmiało, baw się i daj nam znać, jak to się dzieje. Jeśli chcesz uzyskać bardziej szczegółowe informacje na temat haczyków do kasy, możesz zajrzeć do naszego przewodnika po haczykach do kasy.

Na koniec nie wahaj się z nami skontaktować, jeśli masz jakiekolwiek pytania. Zrobimy co w naszej mocy, aby Ci pomóc!