Come usare WooCommerce Hooks - Una guida completa

Pubblicato: 2022-05-03

In questo articolo discuteremo di come utilizzare WooCommerce Hooks per estendere il tuo negozio WooCommerce in base alle tue esigenze.

Vi siete mai chiesti come WordPress è diventato così grande? Più del 40% dei siti Web mondiali ora utilizza WordPress come CMS. Tutto è stato reso possibile da hook e filtri con i quali le persone hanno creato migliaia di plugin.

Di tanto in tanto potresti ascoltare persone che dicono che PHP morirà presto, ma la condivisione di WordPress continua a crescere e WordPress è completamente basato su PHP. Ebbene solo il tempo lo dirà.

Se non hai mai sviluppato un plugin per WordPress, devi guardare questa guida perché devi sapere come creare un plugin per WordPress prima di poter utilizzare questa guida.

Sommario

Cosa sono gli Hook?

È possibile modificare o aggiungere codice in WordPress senza modificare i file principali utilizzando gli hook.

WordPress e WooCommerce fanno ampio uso di hook, che sono funzioni che gli sviluppatori di WordPress e WooCommerce possono personalizzare. I ganci sono di due tipi

  1. Azioni : questi tipi di hook consentono di eseguire codice personalizzato ogni volta che vengono attivati.
  2. Filtri : i filtri hook ti consentono di manipolare e restituire un valore (ad esempio il prezzo di un prodotto) mentre viene passato attraverso determinate funzioni.

WooCommerce è un plug-in WordPress creato anche utilizzando Azioni e Hook, tuttavia, ogni plug-in può anche creare i propri Hook e filtri che altri sviluppatori di plug-in possono utilizzare per estendere ulteriormente la funzionalità del plug-in.

Ganci WooCommerce

Ora in questo tutorial spiegheremo vari hook di WooCommerce, ti forniremo anche esempi visivi e esempi di codice. Inizialmente il nostro codice del plugin è simile

 <?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."); }

Continuando con il tutorial, continueremo ad aggiungere altro codice a questo file.

Ganci per prodotti WooCommerce

Inizieremo prima con gli hook che puoi utilizzare nelle pagine dei prodotti, in seguito ti forniremo un esempio di codice su come utilizzare woocommerce_before_single_product per visualizzare qualcosa sopra il tuo prodotto.

Ganci visualizzati nella parte superiore e inferiore della pagina Prodotto

  • woocommerce_before_main_content
  • woocommerce_after_main_content
ganci woocommerce

Ganci visualizzati sopra e sotto una descrizione del prodotto

  • woocommerce_before_single_product_summary
  • woocommerce_after_single_product_summary

Ganci visualizzati nella parte superiore e inferiore della pagina Prodotto

  • woocommerce_before_single_product
  • woocommerce_after_single_product

Ganci che vengono visualizzati nella breve descrizione del prodotto

  • woocommerce_single_product_summary
  • woocommerce_product_meta_start
  • woocommerce_product_meta_end
  • woocommerce_share

Hook visualizzati nei commenti

  • 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

Ora supponiamo che tu voglia visualizzare qualcosa nella parte superiore della pagina del tuo singolo prodotto, puoi utilizzare gli hook WooCommerce chiamati woocommerce_before_single_product , il nostro codice per questo era simile a:

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

Ora puoi vedere nell'immagine qui sotto che ciao mondo è stampato sopra l'immagine del prodotto

Allo stesso modo puoi utilizzare altri ganci nella tabella seguente per aggiungere informazioni sulla pagina del prodotto. Aspetto attuale del nostro file di plugin:

 <?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"; }

Ganci per carrello WooCommerce

Vediamo ora tutti i ganci utilizzati nella pagina del carrello, divisi in tre categorie per vostra comodità.

Ganci visualizzati prima dell'elenco dei prodotti nel carrello

  • woocommerce_before_cart
  • woocommerce_before_cart_table
  • woocommerce_before_cart_contents
  • woocommerce_cart_contents
  • woocommerce_after_cart_contents

Ganci visualizzati dopo l'elenco dei prodotti nel carrello

  • woocommerce_cart_coupon
  • woocommerce_cart_actions
  • woocommerce_after_cart_table
  • woocommerce_cart_collaterals
  • woocommerce_before_cart_totals

Ganci visualizzati alla fine di un ordine

  • 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

E se non ci sono prodotti nel carrello, verrà utilizzato il seguente gancio

woocommerce_cart_is_empty

woocommerce_before_cart

Vediamo come possiamo usare il gancio woocommerce_before_cart per visualizzare qualcosa prima della tabella del carrello

E lo snippet di codice per questo è

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

E il codice finale sarà simile a questo

 <?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"; }

Allo stesso modo puoi usare altri hook nel tuo codice e puoi fare quasi tutto con il tuo codice.

Cassa - Ganci WooCommerce

La pagina di pagamento è una pagina molto importante e funzionale in un negozio WooCommerce. Di seguito sono menzionate più categorie di hook utilizzati nelle pagine di pagamento.

Hook utilizzati prima della forma delle informazioni di contatto dell'utente

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form

Hook utilizzati per impostare il markup dei dettagli di fatturazione

  • woocommerce_after_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_after_order_notes

Ganci utilizzati prima del riepilogo del prodotto in ordine

  • 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

Ganci visualizzati sotto il modulo d'ordine

  • 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

Ganci di categoria WooCommerce

Visualizzazione del titolo della categoria

woocommerce_archive_description

woocommerce_shop_loop

Viene visualizzato prima della scheda Prodotto nell'elenco.

woocommerce_before_shop_loop

Viene visualizzato sopra l'elenco dei prodotti nella categoria.

woocommerce_after_shop_loop

Viene visualizzato sotto l'elenco dei prodotti nella categoria.

woocommerce_after_shop_loop_item

Viene visualizzato alla fine di ogni descrizione della scheda Prodotto.

Ganci che segnano inoltre la scheda Prodotto nell'elenco.

  • woocommerce_after_shop_loop_item_title
  • woocommerce_shop_loop_item_title
  • woocommerce_before_shop_loop_item_title

Conclusione

Abbiamo fatto del nostro meglio per offrirti una rappresentazione visiva di quasi tutti gli hook di importazione che puoi utilizzare per estendere il tuo negozio WooCommerce.

A parte questo, abbiamo fornito due pratici esempi di codice per mostrare quanto sia facile usare quegli hook nel codice del tuo plugin. Puoi facilmente utilizzare questi hook WooCommerce per aggiungere anche campi di pagamento o aggiungere caselle di input per raccogliere più informazioni dall'utente durante il processo di ordinazione.

Ci sono possibilità illimitate a portata di mano, se hai ancora domande sentiti libero di farle nella casella dei commenti qui sotto.