Jak korzystać z haków WooCommerce — kompletny przewodnik

Opublikowany: 2022-05-03

W tym artykule omówimy, w jaki sposób możesz użyć haków WooCommerce, aby rozszerzyć swój sklep WooCommerce zgodnie z Twoimi wymaganiami.

Czy zastanawiałeś się kiedyś, jak WordPress stał się tak duży? Ponad 40% światowych stron internetowych używa teraz WordPressa jako swojego systemu CMS. Wszystko to było możliwe dzięki hookom i filtrom, za pomocą których ludzie stworzyli tysiące wtyczek.

Od czasu do czasu możesz posłuchać ludzi, którzy mówią, że PHP wkrótce umrze, ale udział WordPressa wciąż rośnie, a WordPress jest całkowicie oparty na PHP. Tylko czas pokaże.

Jeśli nigdy nie tworzyłeś wtyczki WordPress, musisz zapoznać się z tym przewodnikiem, ponieważ musisz wiedzieć, jak utworzyć wtyczkę WordPress, zanim będziesz mógł skorzystać z tego przewodnika.

Spis treści

Czym są haki?

Możliwe jest edytowanie lub dodawanie kodu w WordPressie bez edytowania podstawowych plików za pomocą hooków.

WordPress i WooCommerce w dużym stopniu wykorzystują haki, które są funkcjami, które programiści WordPress i WooCommerce mogą dostosowywać. Są dwa rodzaje haczyków

  1. Akcje : te typy zaczepów umożliwiają wykonanie niestandardowego kodu za każdym razem, gdy zostaną uruchomione.
  2. Filtry : zaczepy filtrów umożliwiają manipulowanie i zwracanie wartości (na przykład ceny produktu) podczas przekazywania jej przez określone funkcje.

WooCommerce to wtyczka WordPress, która również została stworzona przy użyciu Actions and Hooks, jednak każda wtyczka może również tworzyć własne hooki i filtry, których inni twórcy wtyczek mogą używać do dalszego rozszerzania funkcjonalności wtyczki.

Haki WooCommerce

Teraz w tym samouczku wyjaśnimy różne haki WooCommerce, podamy również przykłady wizualne, a także przykłady kodu. Początkowo nasz kod wtyczki wygląda tak

 <?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberpanel.net * Description: CyberPanel Tutorial * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberpanel.net * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); }

Kontynuując samouczek, będziemy dodawać więcej kodu do tego pliku.

Haki do produktów WooCommerce

Zaczniemy od haczyków, których możesz używać na stronach produktów, później podamy Ci przykład kodu, jak używać woocommerce_before_single_product do wyświetlania czegoś na górze Twojego produktu.

Haczyki wyświetlane u góry iu dołu strony produktu

  • woocommerce_before_main_content
  • woocommerce_after_main_content
haczyki woocommerce

Haczyki wyświetlane nad i pod opisem produktu

  • woocommerce_before_single_product_summary
  • woocommerce_after_single_product_summary

Haczyki wyświetlane u góry iu dołu strony produktu

  • woocommerce_before_single_product
  • woocommerce_after_single_product

Haczyki wyświetlane w krótkim opisie produktu

  • woocommerce_single_product_summary
  • woocommerce_product_meta_start
  • woocommerce_product_meta_end
  • woocommerce_share

Hooki wyświetlane w komentarzach

  • woocommerce_review_before
  • woocommerce_review_before_comment_meta
  • woocommerce_review_meta
  • woocommerce_review_before_comment_text
  • woocommerce_review_comment_text
  • woocommerce_review_after_comment_text

woocommerce_before_single_product

Teraz powiedzmy, że chcesz wyświetlić coś na górze strony pojedynczego produktu, możesz użyć haków WooCommerce o nazwie woocommerce_before_single_product , nasz kod do tego wyglądał następująco:

 add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; }

Teraz możesz zobaczyć na poniższym obrazku, że hello world jest wydrukowane na górze obrazu produktu

Podobnie możesz użyć innych haczyków w poniższej tabeli, aby dodać informacje na stronie produktu. Aktualny wygląd naszego pliku wtyczki:

 <?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberwp.cloud * Description: Manage multiple CyberPanel installations via WordPress. * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberwp.cloud * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); } add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; }

Koszyk WooCommerce Haki

Teraz zobaczmy wszystkie haczyki użyte na stronie koszyka, podzielone na trzy kategorie dla Twojej wygody.

Haczyki wyświetlane przed listą produktów w koszyku

  • woocommerce_before_cart
  • woocommerce_before_cart_table
  • woocommerce_before_cart_contents
  • woocommerce_cart_contents
  • woocommerce_after_cart_contents

Haczyki wyświetlane po liście produktów w koszyku

  • woocommerce_cart_coupon
  • woocommerce_cart_actions
  • woocommerce_after_cart_table
  • woocommerce_cart_collaterals
  • woocommerce_before_cart_totals

Haczyki wyświetlane na końcu zamówienia

  • 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

A jeśli w koszyku nie ma produktów, zostanie użyty następujący haczyk

woocommerce_cart_is_empty

woocommerce_before_cart

Zobaczmy, jak możemy użyć haka woocommerce_before_cart , aby wyświetlić coś przed tabelą koszyka

A fragment kodu to

 add_action( 'woocommerce_before_cart', 'woocommerce_before_cart_custom', 10, 0 ); function woocommerce_before_cart_custom() { echo "before cart content"; }

Ostateczny kod będzie wyglądał tak

 <?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberpanel.net * Description: CyberPanel Tutorial * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberpanel.net * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); } add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; } add_action( 'woocommerce_before_cart', 'woocommerce_before_cart_custom', 10, 0 ); function woocommerce_before_cart_custom() { echo "before cart content"; }

Podobnie możesz użyć innych zaczepów w swoim kodzie i możesz zrobić prawie wszystko ze swoim kodem.

Zamówienie - haki WooCommerce

Strona kasy to bardzo ważna i funkcjonalna strona w sklepie WooCommerce. Poniżej wymieniono wiele kategorii haków używanych na stronach kasy.

Hooki używane przed formularzem informacji kontaktowych użytkownika

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form

Haki używane do ustawiania znaczników danych rozliczeniowych

  • woocommerce_after_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_after_order_notes

Haczyki używane przed podsumowaniem produktu w porządku

  • 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_before_order_total
  • woocommerce_review_order_after_order_total

Haczyki wyświetlane pod formularzem zamówienia

  • woocommerce_checkout_order_review
  • woocommerce_review_order_before_payment
  • woocommerce_review_order_before_submit
  • woocommerce_review_order_after_submit
  • woocommerce_review_order_after_payment
  • woocommerce_after_checkout_form

Haki kategorii WooCommerce

Wyświetlanie tytułu kategorii

woocommerce_archive_opis

woocommerce_shop_loop

Jest wyświetlany przed kartą produktu na liście.

woocommerce_before_shop_loop

Jest wyświetlany nad listą produktów w kategorii.

woocommerce_after_shop_loop

Jest wyświetlany pod listą produktów w kategorii.

woocommerce_after_shop_loop_item

Jest on wyświetlany na końcu każdego opisu karty Produktu.

Haczyki, które dodatkowo zaznaczają kartę Produktu na liście.

  • woocommerce_after_shop_loop_item_title
  • woocommerce_shop_loop_item_title
  • woocommerce_before_shop_loop_item_title

Wniosek

Dołożyliśmy wszelkich starań, aby zapewnić wizualną reprezentację prawie wszystkich haków importowych, których możesz użyć do rozszerzenia swojego sklepu WooCommerce.

Oprócz tego podaliśmy dwa praktyczne przykłady kodu, aby pokazać, jak łatwo można użyć tych zaczepów w kodzie wtyczki. Możesz łatwo użyć tych haczyków WooCommerce, aby nawet dodać pola kasy lub dodać pola wejściowe, aby zebrać więcej informacji od użytkownika podczas procesu składania zamówienia.

Masz nieograniczone możliwości, jeśli nadal masz jakieś pytania, możesz je zadać w polu komentarza poniżej.