Come usare WooCommerce Hooks – Guida con esempi

Vuoi imparare a usare gli hook di WooCommerce? Sei nel posto giusto! In questa guida ti mostreremo come usare action e filter hook. Inoltre, ti forniremo molti esempi che puoi applicare al tuo negozio WooCommerce!

Quando installi WooCommerce sul tuo sito web, hai accesso a un lungo elenco di nuovi hook che estendono le tue possibilità di sviluppare una soluzione personalizzata. Gli hook WooCommerce funzionano allo stesso modo degli hook nativi di WordPress e ti consentono di eseguire script personalizzati su qualsiasi pagina WooCommerce.

Simile agli hook di WordPress, ci sono due tipi di hook di WooCommerce: azione o filtro. L'action hook permette di inserire degli script, mentre i filter hook ricevono i dati originali e li restituiscono con qualche modifica.

Sintassi degli hook WooCommerce

Gli hook di WooCommerce seguono la stessa sintassi degli hook di WordPress.

Gancio d'azione

add_action('name_of_the_action_hook','your_action_hook_funcion');

Gancio filtro

add_filter('name_of_the_filter_hook','your_filter_hook_funcion');

Dopo aver dichiarato l'hook, devi aggiungere i tuoi script nella funzione:

 funzione tua_azione_gancio_funzione(){
# il tuo codice qui
}

Gli hook del filtro devono restituire alcuni dati in un parametro della funzione:

 funzione tuo_filtro_hook_function($dati){
# il tuo codice che modifica $data
restituire $dati;
}

Per vedere un hook WooCommerce in azione, incolla il seguente codice nel file functions.php del tuo tema figlio:

 add_action( 'woocommerce_product_meta_start', 'quadlayers_woocommerce_hooks');
funzione 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">'; // Passa all'URL dell'immagine desiderato
}

Questo è l'esempio più semplice, in cui stai aggiungendo un'immagine a tutte le pagine dei prodotti. L'immagine verrà visualizzata sotto il pulsante Aggiungi al carrello , prima dei metadati del prodotto.

Come puoi vedere, il nome dell'hook, woocommerce_product_meta_start , è autoesplicativo e ti dice esattamente dove questo hook ti consente di inserire il tuo codice.

Elenco degli hook WooCommerce

Ci sono più di mille hook WooCommerce. Qui elencheremo i più popolari in modo da familiarizzare con gli hook più comuni e conosciuti.

Abbiamo diviso l'elenco in sezioni in base alla pagina a cui sono correlati. Il nome dei ganci è autoesplicativo, quindi non avrai problemi a capire cosa fanno.

• Carrello

  • 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

• Guardare

  • 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_grazie
• Per ulteriori informazioni sui ganci di pagamento, puoi consultare la nostra guida completa sui ganci di pagamento di WooCommerce.

• Prodotti

  • 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

• Tassonomie

  • woocommerce_archive_description
  • 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

• Account

  • 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 carrello

  • 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

• Globale

  • pre_get_product_search_form
  • woocommerce_breadcrumb
  • woocommerce_no_products_found

Per trovare l'elenco completo degli hook WooCommerce, puoi dare un'occhiata alla documentazione ufficiale del WC.

Esempi utili di WooCommerce Hooks

Ora, diamo un'occhiata ad alcuni esempi di cose utili che puoi fare con gli hook di WooCommerce.

NOTA : prima di iniziare, ti consigliamo di creare un tema figlio. Se non li conosci, puoi consultare la nostra guida su come creare un tema figlio e l'elenco dei migliori plugin per temi figlio.

Se stai appena iniziando con gli hook, puoi semplicemente copiare questi script e incollarli nel file functions.php del tuo tema figlio. Quindi, quando ti senti più a tuo agio, puoi modificare gli script e creare logiche diverse.

Aggiungi una descrizione alla pagina del negozio

Per impostazione predefinita, la Pagina del negozio non mostra la descrizione. Tuttavia, puoi abilitarlo utilizzando l'hook woocommerce_archive_description come segue:

 funzione quadlayers_shop_description() {
$description = '<p>Benvenuto nel mio negozio, sii generoso e compra molte cose, grazie.</p>';
eco $descrizione;
}

add_action('woocommerce_archive_description', 'quadlayers_shop_description');

Aggiungi una nota informativa dopo il pulsante Aggiungi al carrello

I ganci del carrello WooCommerce ti consentono di inserire script personalizzati in molte sezioni della pagina del carrello. Qui ti mostreremo come aggiungere un testo dopo il pulsante Aggiungi al carrello .

Questo script stamperà un testo personalizzato dopo il pulsante Aggiungi al carrello.

 add_action( 'woocommerce_after_add_to_cart_form', 'quadlayers_after_addtocart_button' );
funzione quadlayers_after_addtocart_button() {
	// NOTA: sostituisci gli slug della tua categoria con "musica" && sostituisci /costi-di-consegna/ con un URL valido
	if ( is_product() && has_term( array( 'music' ), 'product_cat' ) ) {
		echo '<div></div><div>;<a href="/delivery-costs/" target="_blank" rel="noopener"><i class="fa fa-truck" aria-hidden=" true"></i> Spendi $ 100 e ricevi la spedizione gratuita;</a></div>
'; } }

Puoi usarlo per promuovere sconti che richiedono una spesa minima o la consegna gratuita, ad esempio.

Spiegazione del codice

• L'hook woocommerce_after_add_to_cart_form stampa il codice HTML dopo il pulsante.
• Verifichiamo se la pagina corrente è una pagina di prodotto e se ha la nostra categoria specificata.
• Usa lo slug di categoria all'interno di un array. In questo modo puoi controllare diverse categorie.
• Il contenuto ripetuto consente tag HTML, variabili e qualsiasi altra cosa all'interno dell'ambito PHP.

Aggiungi testo a una specifica tassonomia di prodotto

Ora, vediamo come utilizzare gli hook di WooCommerce per visualizzare un messaggio nei prodotti con un tag specifico. Ad esempio, mostreremo un messaggio che offre uno sconto per determinati prodotti.

Ricordati di taggare prima il prodotto.

 add_action('woocommerce_before_single_product', 'my_product_notice_function');
funzione my_product_notice_function() { 
if ( is_product() && has_term( 'sconto-25', 'product_tag' ) ) {
echo '<p><strong>Questo prodotto richiede uno sconto del 25% per le prossime 48 ore!</strong></p>';
}
}

Spiegazione del codice

1. 1. Usiamo l'hook woocommerce_before_single_product per visualizzare un messaggio nella parte superiore della pagina del prodotto.
   2. All'interno della funzione, utilizziamo un condizionale su is_product() per assicurarci che sia una pagina di prodotto.
   3. E has_term() controlla se il prodotto corrente ha il tag "discount-25" .
   4. Quindi, stampa il tuo messaggio nell'istruzione if.

Blocca l'acquisto da utenti disconnessi

Gli hook di WooCommerce ti consentono di disabilitare il pulsante Aggiungi al carrello nelle pagine dei prodotti per gli utenti disconnessi. Questo può essere utile per prodotti o offerte disponibili solo per abbonati o membri. Per completare l'esempio, aggiungeremo un secondo hook per visualizzare un messaggio quando il pulsante di acquisto è disabilitato.

Il hook del filtro woocommerce_is_purchasable bloccherà l'acquisto e il hook dell'azione woocommerce_before_single_product visualizzerà il messaggio.

 add_action( 'woocommerce_before_single_product', 'quadlayers_add_message');
add_filter('woocommerce_is_purchasable', 'quadlayers_block_admin_purchase');
funzione quadlayers_block_admin_purchase($blocco) {
if ( is_user_logged_in() ):return true;
altrimenti:restituisce falso;
finisci se;
}

funzione quadlayers_add_message(){
if ( !is_user_logged_in() ):echo '<H2>ACCEDI PER ACQUISTARE QUESTO PRODOTTO</h2>';
finisci se;
}

Spiegazione del codice

1. Usiamo l'action hook per stampare un messaggio e il filter hook per disabilitare il pulsante Aggiungi al carrello .
2. L'hook del filtro woocommerce_is_purchasable sarà vero se l'utente è connesso e falso se è disconnesso.
3. Utilizziamo anche un'istruzione if() condizionale per applicare le condizioni solo agli utenti disconnessi in entrambe le funzioni (pulsante Aggiungi al carrello disabilitato e messaggio).
4. Infine, abbiamo aggiunto uno stile CSS al messaggio, racchiuso in un tag HTML H2.

Come sfruttare al meglio WooCommerce Hooks?

In conclusione, gli hook di WooCommerce sono ottimi strumenti per personalizzare il tuo sito. Ci sono centinaia di hook da usare e seguono tutti la stessa sintassi. Quindi, ti invitiamo a dare un'occhiata agli esempi e trarre ispirazione per applicare gli hook di cui hai bisogno sul tuo sito.

I ganci ti permettono di migliorare qualsiasi area del tuo negozio: dalla cassa al carrello alle pagine dei prodotti, alle tassonomie e molto altro! Quindi, se vuoi trarne il massimo, vai avanti, gioca e facci sapere come va. Se desideri informazioni più dettagliate sui ganci di pagamento, puoi dare un'occhiata alla nostra guida ai ganci di pagamento.

Infine, non esitare a contattarci in caso di domande. Faremo del nostro meglio per aiutarti!