28 Ganci per il checkout di WooCommerce: più di una guida visiva

Una delle migliori caratteristiche di WooCommerce è la personalizzazione. Con l'aiuto dei ganci, puoi aggiungere contenuti alle pagine dei prodotti, alla pagina del carrello e alla pagina di pagamento.

Questa guida elenca tutti gli hook di pagamento di WooCommerce e dove puoi inserirli nella pagina di pagamento e per cosa.

Diamo una rapida panoramica su cosa sono gli hook, i loro tipi e quindi saltiamo agli hook della pagina di pagamento.

Cosa sono i ganci?

Hooks in WordPress ti consente di modificare o aggiungere codice senza modificare i file principali.

Sono chiamati ganci perché funzionano come un gancio nella vita reale per contenere oggetti. Nel mondo dell'e-commerce, gli hook hanno tenuto programmi aggiuntivi.

Per migliorare l'esperienza del cliente, i proprietari di negozi e gli sviluppatori utilizzano questi hook. Qui è dove aggiungeranno paragrafi, descrizioni di prodotti, icone, immagini, loghi e testi.

I due principali tipi di ganci

Sebbene ci siano molti hook di WordPress, puoi classificarli in due tipi:

1. Ganci d'azione
2. Ganci per filtri

Ganci d'azione

Gli action hook ti consentono di aggiungere funzionalità extra in qualsiasi punto del tuo sito web. Questo hook può essere utilizzato per aggiungere widget, menu o persino un messaggio extra.

Questo è un esempio di hook di azione:

add_action('woocommerce_before_checkout_billing_form', 'storeapps_before_checkout_billing_form');
funzione storeapps_before_checkout_billing_form() {
   // aggiungi il tuo codice qui
}

Dove woocommerce_before_checkout_billing_form è l'hook e storeapps_callback_function è la funzione che creiamo per aggiungere i nostri script personalizzati.

Ganci per filtri

Gli hook del filtro consentono di modificare una funzione esistente. In questi hook, non stai aggiungendo nulla di nuovo, ma semplicemente cambiando o filtrando i dati.

Per esempio:

add_filter('woocommerce_breadcrumb_defaults', 'storeapps_change_breadcrumb');
funzione storeapps_change_breadcrumb ($ contenuto) {
   $contenuto.= "App Store";
   restituire $contenuto;
}

Un altro esempio potrebbero essere i pulsanti Aggiungi al carrello dell'intero negozio che cambiano con un filtro.

Perché usare gli hook in WooCommerce?

Non c'è quasi modo per ignorare e non usare questi hook una volta che vedi cosa possono fare. Tutto nel tuo negozio è personalizzabile, quindi puoi creare un negozio WooCommerce che desideri utilizzando questi ganci.

Non dovrai preoccuparti di queste conseguenze se usi gli hook. La modifica dei temi non influirà sulle modifiche. Quindi è meglio restare con i ganci per evitare tutti i mal di testa e i rischi.

Poiché il pagamento è la pagina più cruciale per qualsiasi negozio, diamo un'occhiata agli hook della pagina di pagamento di WooCommerce.

Tutti i ganci di pagamento di WooCommerce

1. woocommerce_before_checkout_form
2. woocommerce_checkout_before_customer_details
3. woocommerce_checkout_billing
4. woocommerce_before_checkout_billing_form
5. woocommerce_after_checkout_billing_form
6. woocommerce_before_checkout_registration_form
7. woocommerce_after_checkout_registration_form
8. woocommerce_checkout_shipping
9. woocommerce_before_checkout_shipping_form
10. woocommerce_after_checkout_shipping_form
11. woocommerce_before_order_notes
12. woocommerce_after_order_notes
13. woocommerce_checkout_after_customer_details
14. woocommerce_checkout_before_order_review_heading
15. woocommerce_checkout_order_review
16. woocommerce_checkout_before_order_review
17. woocommerce_review_order_before_cart_contents
18. woocommerce_review_order_after_cart_contents
19. woocommerce_review_order_before_shipping
20. woocommerce_review_order_after_shipping
21. woocommerce_review_order_before_order_total
22. woocommerce_review_order_after_order_total
23. woocommerce_review_order_before_payment
24. woocommerce_review_order_before_submit
25. woocommerce_review_order_after_submit
26. woocommerce_review_order_after_payment
27. woocommerce_checkout_after_order_review
28. woocommerce_after_checkout_for

Diamo un'occhiata a ciascun gancio in dettaglio, dove è posizionato e come puoi aggiungerlo.

1. woocommerce_before_checkout_form
L'hook è definito prima del modulo di pagamento. Si trova sopra il campo del coupon nella pagina di pagamento.

add_action('woocommerce_before_checkout_form', 'storeapps_before_checkout_form', 10);
funzione storeapps_before_checkout_form() {
	echo '<h2>woocommerce_before_checkout_form</h2>';
}

2. woocommerce_checkout_before_customer_details
Il gancio è definito nel modulo di pagamento appena prima dei dettagli del cliente.

add_action('woocommerce_checkout_before_customer_details', 'storeapps_checkout_before_customer_details', 10);
funzione storeapps_checkout_before_customer_details() {
	echo '<h2>woocommerce_checkout_before_customer_details</h2>';
}

3. woocommerce_checkout_billing
Questo è un nuovo hook aggiunto alla pagina di pagamento. Il modello del modulo di fatturazione nella pagina di pagamento è incluso utilizzando questo hook.

add_action('woocommerce_checkout_billing', 'storeapps_checkout_billing');
funzione storeapps_checkout_billing() {
    echo '<h2>woocommerce_checkout_billing</h2>';
}

4. woocommerce_before_checkout_billing_form
L'hook viene definito prima dell'inizio del modulo di fatturazione.

add_action( 'woocommerce_before_checkout_billing_form', 'storeapps_before_checkout_billing_form', 10 );
funzione storeapps_before_checkout_billing_form() {
	echo '<h2>woocommerce_before_checkout_billing_form</h2>';
}

5. woocommerce_after_checkout_billing_form
L'hook viene definito dopo la compilazione del modulo di fatturazione.

add_action( 'woocommerce_after_checkout_billing_form', 'storeapps_after_checkout_billing_form', 10 );
funzione storeapps_after_checkout_billing_form() {
	echo '<h2>woocommerce_after_checkout_billing_form</h2>';
}

6. woocommerce_before_checkout_registration_form
L'hook è definito nel modello del modulo di fatturazione dopo il modulo di creazione dell'account. Questo verrà eseguito per gli utenti guest.

add_action('woocommerce_before_checkout_registration_form', 'storeapps_before_checkout_registration');
funzione storeapps_before_checkout_registration_form() {
    echo '<h2>woocommerce_before_checkout_registration_form</h2>';
}

7. woocommerce_after_checkout_registration_form
Questo hook è definito nel modello del modulo di fatturazione. Questo verrà eseguito per gli utenti guest.

add_action('woocommerce_after_checkout_registration_form', 'storeapps_after_checkout_registration_form');
funzione storeapps_after_checkout_registration_form() {
    echo '<h2>woocommerce_after_checkout_registration_form</h2>';
}

8. woocommerce_checkout_shipping
Questo hook è definito nel modello del modulo di spedizione prima del modulo di spedizione.

add_action('woocommerce_checkout_shipping', 'storeapps_checkout_shipping');
funzione storeapps_checkout_shipping() {
    echo '<h2>woocommerce_checkout_shipping</h2>';
}

9. woocommerce_before_checkout_shipping_form
Questo hook è definito appena prima dell'inizio del modulo di spedizione.

add_action('woocommerce_before_checkout_shipping_form', 'storeapps_before_checkout_shipping_form', 10);
funzione storeapps_before_checkout_shipping_form() {
	echo '<h2>woocommerce_before_checkout_shipping_form</h2>';
}

10. woocommerce_after_checkout_shipping_form
Questo gancio viene definito dopo la compilazione del modulo di spedizione.

add_action('woocommerce_after_checkout_shipping_form', 'storeapps_after_checkout_shipping_form', 10);
funzione storeapps_after_checkout_shipping_form() {
	echo '<h2>woocommerce_after_checkout_shipping_form</h2>';
}

11. woocommerce_before_order_notes
Questo hook è definito prima del campo delle note dell'ordine nella pagina di pagamento.

add_action('woocommerce_before_order_notes', 'storeapps_before_order_notes', 10);
funzione storeapps_before_order_notes() {
	echo '<h2>woocommerce_before_order_notes</h2>';
}

12. woocommerce_after_order_notes
Questo hook è definito dopo il campo delle note dell'ordine nella pagina di pagamento.

add_action('woocommerce_after_order_notes', 'storeapps_after_order_notes', 10);
funzione storeapps_after_order_notes() {
	echo '<h2>woocommerce_after_order_notes</h2>';
}

13. woocommerce_checkout_after_customer_details
Il gancio viene posizionato dopo aver completato i dettagli del cliente, ovvero dopo i campi di fatturazione e spedizione.

add_action( 'woocommerce_checkout_after_customer_details', 'storeapps_checkout_after_customer_details', 10);
funzione storeapps_checkout_after_customer_details() {
	echo '<h2>woocommerce_checkout_after_customer_details</h2>';
}

14. woocommerce_checkout_before_order_review_heading
Questo hook è definito nel modello di checkout prima dell'intestazione di revisione dell'ordine, ad esempio "Il tuo ordine". Questo hook è stato aggiunto in WooCommerce v3.6.0.

add_action('woocommerce_checkout_before_order_review_heading', 'storeapps_checkout_before_order_review_heading');
funzione storeapps_checkout_before_order_review_heading() {
    echo '<h2>woocommerce_checkout_before_order_review_heading</h2>';
}

15. woocommerce_checkout_order_review
L'hook è definito nel modello di checkout principale. Il modello della tabella di revisione dell'ordine è incluso utilizzando questo gancio.

add_action('woocommerce_checkout_order_review', 'storeapps_checkout_order_review');
funzione storeapps_checkout_order_review() {
    echo '<h2>woocommerce_checkout_order_review</h2>';
}

16. woocommerce_checkout_before_order_review
Questo gancio è definito prima dei dettagli dell'ordine nella pagina di pagamento.

add_action('woocommerce_checkout_before_order_review', 'storeapps_checkout_before_order_review', 10);
funzione storeapps_checkout_before_order_review() {
	echo '<h2>woocommerce_checkout_before_order_review</h2>';
}

17. woocommerce_review_order_before_cart_contents
Questo hook è definito all'interno del corpo della tabella degli ordini prima del contenuto.

add_action( 'woocommerce_review_order_before_cart_contents', 'storeapps_review_order_before_cart_contents', 10 );
funzione storeapps_review_order_before_cart_contents() {
	echo '<h2>woocommerce_review_order_before_cart_contents</h2>';
}

18. woocommerce_review_order_after_cart_contents
Questo hook è definito all'interno del corpo della tabella degli ordini dopo tutto il contenuto.

add_action( 'woocommerce_review_order_after_cart_contents', 'storeapps_review_order_after_cart_contents', 10 );
funzione storeapps_review_order_after_cart_contents() {
	echo '<h2>woocommerce_review_order_after_cart_contents</h2>';
}

19. woocommerce_review_order_before_shipping
Questo gancio è definito prima della sezione di spedizione nella tabella degli ordini.

add_action('woocommerce_review_order_before_shipping', 'storeapps_review_order_before_shipping', 10);
funzione storeapps_review_order_before_shipping() {
	echo '<h2>woocommerce_review_order_before_shipping</h2>';
}

20. woocommerce_review_order_after_shipping
Questo gancio è definito dopo la sezione di spedizione nella tabella dei dettagli dell'ordine.

add_action('woocommerce_review_order_after_shipping', 'storeapps_review_order_after_shipping', 10);
funzione storeapps_review_order_after_shipping() {
	echo '<h2>woocommerce_review_order_after_shipping</h2>';
}

21. woocommerce_review_order_before_order_total
Questo gancio è definito prima della sezione totale e dopo la sezione di spedizione nella tabella dei dettagli dell'ordine.

add_action( 'woocommerce_review_order_before_order_total', 'storeapps_review_order_before_order_total', 10 );
funzione storeapps_review_order_before_order_total() {
	echo '<h2>woocommerce_review_order_before_order_total</h2>';
}

22. woocommerce_review_order_after_order_total
Questo gancio è definito dopo la sezione totale e nella tabella dei dettagli dell'ordine.

add_action('woocommerce_review_order_after_order_total', 'storeapps_review_order_after_order_total', 10);
funzione storeapps_review_order_after_order_total() {
	echo '<h2>woocommerce_review_order_after_order_total</h2>';
}

23. woocommerce_review_order_before_payment
Questo hook è definito prima della sezione dei metodi di pagamento nella pagina di pagamento.

add_action( 'woocommerce_review_order_before_payment', 'storeapps_review_order_before_payment', 10 );
funzione storeapps_review_order_before_payment() {
	echo '<h2>woocommerce_review_order_before_payment</h2>';
}

24. woocommerce_review_order_before_submit
Questo hook è definito prima del pulsante "Inserisci ordine" nella pagina di pagamento.

add_action( 'woocommerce_review_order_before_submit', 'storeapps_review_order_before_submit', 10 );
funzione storeapps_review_order_before_submit() {
	echo '<h2>woocommerce_review_order_before_submit</h2>';
}

25. woocommerce_review_order_after_submit
Questo hook è definito dopo il pulsante "Effettua un ordine" nella pagina di pagamento.

add_action( 'woocommerce_review_order_after_submit', 'storeapps_review_order_after_submit', 10 );
funzione storeapps_review_order_after_submit() {
	echo '<h2>woocommerce_review_order_after_submit</h2>';
}

26. woocommerce_review_order_after_payment
Questo hook è definito dopo l'intera sezione di pagamento incluso il pulsante 'Effettua l'ordine'.

add_action( 'woocommerce_review_order_after_payment', 'storeapps_review_order_after_payment', 10 );
funzione storeapps_review_order_after_payment() {
	echo '<h2>woocommerce_review_order_after_payment</h2>';
}

27. woocommerce_checkout_after_order_review
Questo hook è definito dopo la sezione di revisione dell'ordine nella pagina di pagamento che include la tabella dei dettagli dell'ordine e la sezione di pagamento.

add_action('woocommerce_checkout_after_order_review', 'storeapps_checkout_after_order_review', 10);
funzione storeapps_checkout_after_order_review() {
	echo '<h2>woocommerce_checkout_after_order_review</h2>';
}

28. woocommerce_after_checkout_form
Questo hook è definito alla fine del modulo di pagamento.

add_action('woocommerce_after_checkout_form', 'storeapps_after_checkout_form', 10);
funzione storeapps_after_checkout_form() {
	echo '<h2>woocommerce_after_checkout_form</h2>';
}

Rimozione delle azioni predefinite nella pagina di pagamento

Per impostazione predefinita, WooCommerce utilizza solo alcuni hook per aggiungere:

• modulo di accesso prima del modulo di pagamento (woocommerce_checkout_login_form)
• modulo coupon prima del modulo di pagamento (woocommerce_checkout_coupon_form)
• tabella di revisione degli ordini alla sezione di revisione degli ordini (woocommerce_order_review)
• tabella pagamenti anche alla sezione revisione ordini (woocommerce_checkout_payment)

Questo codice può essere facilmente rimosso come mostrato di seguito. Puoi anche fare riferimento a questo documento per aggiungere in modo sicuro frammenti di codice di WordPress.

/**
 * Rimuovi i ganci di pagamento predefiniti di WooCommerce
 */
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
remove_action('woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20);

Editor di campi di pagamento personalizzato in WooCommerce

Gli esempi sopra mostrano come aggiungere alcuni testi con semplici frammenti di codice alla pagina di pagamento di WooCommerce.

Ma per quanto riguarda i campi di pagamento personalizzati? La codifica personalizzata richiederebbe molto più lavoro.

Ma con l'aiuto di Cassiere, puoi modificare/aggiungere/rimuovere i campi principali di WooCommerce e anche aggiungere campi personalizzati per la sezione di spedizione, fatturazione e campi aggiuntivi.

Avvolgendo

Spero che questa guida ti abbia aiutato a coprire tutti i ganci di pagamento cruciali di WooCommerce.

Usali per migliorare la pagina di pagamento del tuo negozio online. La linea di fondo è che una pagina di pagamento è come un gateway per i tuoi clienti e questi hook possono migliorare l'esperienza utente complessiva del tuo negozio se usati con saggezza.

E per una maggiore ottimizzazione del checkout, i plug-in di WooCommerce sono sempre a tua disposizione.