WooCommerce Hooks: Una Guida Completa per Principianti e Sviluppatori

Sei uno sviluppatore WooCommerce che vuole portare il tuo negozio online a un livello superiore? Vuoi personalizzare la funzionalità e l’aspetto del tuo negozio senza modificare i file principali?

Gli hook di WooCommerce sono la soluzione.

Gli hook sono strumenti potenti che ti consentono di personalizzare il tuo negozio WooCommerce per adattarlo perfettamente alle tue esigenze aziendali specifiche. Ti consentono di aggiungere, modificare o rimuovere funzionalità nei punti chiave del processo WooCommerce. Questa flessibilità ti consente di creare un’esperienza di acquisto personalizzata per i tuoi clienti.

In questa guida completa, ci immergeremo nel mondo degli hook di WooCommerce. Esploreremo cosa sono gli hook, come funzionano e come puoi usarli per migliorare il tuo negozio online.

Ma prima, iniziamo con le basi.

Cosa sono gli hook di WooCommerce?

Gli hook di WooCommerce, costruiti sulle stesse fondamenta degli hook di WordPress, sono un modo per gli sviluppatori di inserire codice personalizzato in punti specifici del plugin WooCommerce. Consentono di aggiungere, rimuovere o modificare le funzionalità senza modificare direttamente i file principali del plug-in. Ciò significa che puoi personalizzare in sicurezza il tuo negozio pur essendo in grado di aggiornare WooCommerce quando vengono rilasciate nuove versioni.

Leggi anche: Personalizza il tuo negozio WooCommerce in 5 passaggi – Bluehost Blog

Ci sono due tipi di hook in WooCommerce: action hooks e filter hooks. Gli action hook consentono di aggiungere o modificare funzionalità, mentre gli hook di filtro consentono di modificare i dati prima che vengano visualizzati o salvati.

Importanza degli hook nello sviluppo di WooCommerce

Gli hook sono una parte essenziale dello sviluppo di WooCommerce. Forniscono un modo per personalizzare le funzionalità del tuo negozio per soddisfare le tue esigenze specifiche. Sia che tu voglia aggiungere campi personalizzati alla pagina di pagamento, modificare il formato del titolo del prodotto o cambiare il modo in cui vengono visualizzati i prezzi, gli hook lo rendono possibile.

L’uso degli hook può anche aiutarti a mantenere le tue personalizzazioni separate dai file principali di WooCommerce. In questo modo è più facile mantenere il codice e si garantisce che le modifiche non vengano sovrascritte quando si aggiorna il plugin.

Come funzionano gli hook di WooCommerce

Per utilizzare efficacemente gli hook nel tuo negozio WooCommerce, devi prima capire la loro struttura e come funzionano sotto il cofano. Questa sezione fornirà uno sguardo approfondito all’anatomia dell’azione e degli hook dei filtri, spiegando le loro differenze e come interagiscono con il tuo codice personalizzato.

Ganci di azione

Gli action hook ti consentono di eseguire funzioni personalizzate in punti specifici durante il processo di caricamento della pagina WooCommerce. Ti danno la possibilità di aggiungere o modificare funzionalità senza modificare direttamente i file principali.

Quando si incontra un action hook nel codice di WooCommerce, si attiva ed esegue tutte le funzioni “agganciate” ad esso utilizzando la funzione add_action(). Gli hook di azione non restituiscono alcun valore; Ti consentono semplicemente di eseguire il tuo codice quando vengono attivati.

La sintassi di base per aggiungere una funzione a un action hook è:

add_action( 'hook_name', 'your_function_name', priority, accepted_args );

• ‘hook_name‘ è il nome dell’action hook che vuoi scegliere come target

• ‘your_function_name‘ è il nome della funzione personalizzata che hai scritto per essere eseguita quando l’hook si attiva

• La priorità è un numero intero che determina l’ordine in cui viene eseguita la funzione se più funzioni sono associate alla stessa azione. I numeri più bassi corrispondono a un’esecuzione precedente. La priorità predefinita è 10

• accepted_args è il numero di argomenti accettati dalla funzione. Questo è facoltativo e il valore predefinito è 1

Ecco un semplice esempio di utilizzo della funzione add_action():

function my_custom_function() { 
    // Your custom code here 
} 
add_action( 'wooCommerce_before_main_content', 'my_custom_function' ); 

In questo esempio, l’my_custom_function() verrà eseguito ogni volta che viene attivato l’hook dell’azione ‘wooCommerce_before_main_content‘. Questo di solito avviene subito prima del caricamento dell’area del contenuto principale di una pagina WooCommerce.

Alcuni hook di azione comuni di WooCommerce includono:

• ‘wooCommerce_before_shop_loop‘: si attiva prima del ciclo del prodotto nelle pagine di archivio

• “wooCommerce_before_single_product“: si attiva prima del contenuto della singola pagina del prodotto

• “wooCommerce_after_add_to_cart_form“: si attiva dopo il modulo di aggiunta al carrello nelle pagine dei prodotti

• “wooCommerce_checkout_order_processed“: si attiva dopo l’elaborazione di un ordine

Ganci filtranti

Gli hook di filtro, d’altra parte, consentono di manipolare e restituire un valore prima che venga visualizzato sul front-end o salvato nel database. Ti danno la possibilità di personalizzare e modificare i prodotti WooCommerce al volo.

Quando viene rilevato un hook di filtro, passa un valore attraverso tutte le funzioni ad esso collegate utilizzando la funzione add_filter(). Ogni funzione ha quindi l’opportunità di modificare e restituire il valore, che viene poi passato alla funzione successiva agganciata al filtro. Il valore finale modificato viene quindi utilizzato da WooCommerce.

La sintassi di base per aggiungere una funzione a un hook di filtro è simile a add_action():

add_filter( 'hook_name', 'your_function_name', priority, accepted_args ); 

I parametri funzionano allo stesso modo di add_action(). La differenza principale è che la funzione personalizzata deve accettare il valore filtrato come parametro e restituire il valore modificato.

Ecco un esempio di base di utilizzo della funzione add_filter( ):

function my_custom_price( $price, $product ) { 
    // Modify the price here 
    return $modified_price; 
} 
add_filter( 'wooCommerce_get_price', 'my_custom_price', 10, 2 );

In questo esempio, la funzione my_custom_price() è agganciata all’hook del filtro ‘wooCommerce_get_price‘. Accetta il prezzo corrente del prodotto e l’oggetto prodotto come parametri, modifica il prezzo e restituisce il nuovo valore. WooCommerce utilizza quindi questo prezzo modificato al posto dell’originale.

Alcuni hook di filtro comuni di WooCommerce includono:

• “wooCommerce_product_get_price“: filtra il prezzo del prodotto

• “wooCommerce_product_title“: filtra il titolo del prodotto

• ‘wooCommerce_checkout_fields‘: filtra i campi di checkout

• “wooCommerce_add_to_cart_redirect“: filtra l’URL di reindirizzamento dopo che un prodotto è stato aggiunto al carrello

Capire come funzionano gli hook di azione e filtro e come agganciare le tue funzioni ad essi sblocca un mondo di possibilità di personalizzazione per il tuo negozio WooCommerce.

Puoi modificare le funzionalità di base, aggiungere nuove funzionalità e personalizzare l’esperienza utente per soddisfare perfettamente le tue esigenze aziendali specifiche.

Come trovare e utilizzare gli hook in WooCommerce

WooCommerce ha oltre 300 hook di azione e filtro disponibili nei suoi file principali. Trovare l’amo giusto da utilizzare può essere difficile, soprattutto per i principianti.

Un modo per trovare gli hook è cercare nei file dei modelli di WooCommerce. Molti dei file modello, come ‘single-product.php‘ e ‘archive-product.php‘, contengono action hook che puoi utilizzare per inserire i tuoi contenuti.

Puoi anche trovare gli hook cercando nella documentazione di WooCommerce o utilizzando un plugin come Simply Show Hooks, che visualizza visivamente gli hook sulle tue pagine WooCommerce.

Una volta trovato l’amo che si desidera utilizzare, è necessario creare una funzione personalizzata che verrà collegata all’amo. Questa funzione dovrebbe prendere i parametri appropriati e restituire il valore modificato se si utilizza un hook di filtro.

Ecco un esempio di come utilizzare l’hook wooCommerce_single_product_summary per aggiungere un messaggio personalizzato sopra il pulsante Aggiungi al carrello nella pagina di un prodotto:

function custom_single_product_message() { 
    echo '<p class="custom-message">Free shipping on orders over $50!</p>'; 
} 
add_action( 'wooCommerce_single_product_summary', 'custom_single_product_message', 15 );

In questo esempio, abbiamo creato una funzione personalizzata chiamata custom_single_product_message() che emette un messaggio.

Abbiamo quindi utilizzato la funzione add_action() per agganciare la nostra funzione personalizzata all’hook wooCommerce_single_product_summary con una priorità di 15. Ciò significa che verrà eseguito dopo il titolo e il prezzo, ma prima del pulsante Aggiungi al carrello.

Strumenti per lavorare con gli hook di WooCommerce

Sebbene sia possibile aggiungere le funzioni personalizzate al file “functions.php” del tema figlio, sono disponibili altri strumenti che possono semplificare il lavoro con gli hook.

Uno strumento popolare è il plug-in Code Snippets. Questo plugin ti consente di aggiungere i tuoi frammenti di codice personalizzati al tuo sito WordPress senza modificare direttamente i file del tema. Fornisce inoltre un’interfaccia intuitiva per la gestione degli snippet e dispone di un editor di codice integrato con evidenziazione della sintassi.

Un altro strumento utile è il riferimento al codice WooCommerce. Questo riferimento online elenca tutti gli hook di azione e filtro disponibili in WooCommerce, insieme a una descrizione di ciò che fanno e dei parametri che accettano. Puoi cercare gli hook per nome o sfogliare per categoria per trovare l’hook di cui hai bisogno.

Guida visiva agli hook di WooCommerce

Ora che avete una solida comprensione di come funzionano gli hook di WooCommerce, facciamo un tour visivo di alcuni hook di uso comune in varie parti di un negozio WooCommerce.

Questa sezione tratterà gli hook trovati nelle pagine dei singoli prodotti, nelle pagine del carrello e del checkout e nelle pagine dell’account e dell’archivio.

Hook nelle singole pagine dei prodotti WooCommerce

Le pagine dei singoli prodotti sono quelle in cui i clienti visualizzano informazioni dettagliate su un prodotto specifico. WooCommerce mette a disposizione diversi hook che permettono di personalizzare il layout e il contenuto di queste pagine.

Alcuni hook popolari per le pagine di singoli prodotti includono:

1. “wooCommerce_before_single_product“: questo hook si attiva prima del contenuto del singolo prodotto. È un buon posto per aggiungere contenuti personalizzati sopra il titolo del prodotto, come un banner o un messaggio.

2. ‘wooCommerce_single_product_summary‘: Questo gancio consente di aggiungere contenuti all’interno dell’area di riepilogo del prodotto, che contiene il titolo, il prezzo, la descrizione e il pulsante Aggiungi al carrello. È possibile utilizzare questo hook per riorganizzare l’ordine degli elementi o inserire informazioni aggiuntive.

Esempio di utilizzo:

add_action( 'wooCommerce_single_product_summary', 'custom_product_stock_status', 15 ); 
 
function custom_product_stock_status() { 
    global $product; 
    if ( $product->is_in_stock() ) { 
        echo '<p class="stock-status in-stock">In stock and ready to ship!</p>'; 
    } else { 
        echo '<p class="stock-status out-of-stock">Currently out of stock. Check back soon!</p>'; 
    } 
} 

3. “wooCommerce_after_single_product_summary“: utilizza questo hook per aggiungere contenuti sotto il riepilogo del prodotto, come prodotti correlati, upsell o schede di prodotti personalizzati. Quest’area è perfetta per visualizzare informazioni aggiuntive che possono aiutare i clienti a prendere decisioni di acquisto informate.

4. “wooCommerce_product_thumbnails“: questo gancio si attiva all’interno della galleria di immagini del prodotto. Puoi usarlo per modificare l’aspetto delle immagini in miniatura o aggiungere contenuti personalizzati.

Ganci per il carrello e le pagine di pagamento

Le pagine del carrello e del checkout sono passaggi fondamentali nel percorso del cliente. Rappresentano le fasi finali del processo di acquisto, in cui i clienti esaminano i loro ordini, selezionano le opzioni di spedizione e pagamento e completano le loro transazioni. WooCommerce fornisce diversi hook per aiutarti a ottimizzare queste pagine per un’esperienza più fluida e facile da usare.

Alcuni agganci essenziali per il carrello e le pagine di pagamento includono:

1. ‘wooCommerce_before_cart‘: Questo gancio spara davanti al tavolo del carrello. Usalo per aggiungere contenuti personalizzati o promozioni sopra il carrello.

2. “wooCommerce_cart_totals_before_shipping“: Questo gancio ti consente di aggiungere contenuti prima delle opzioni di spedizione nell’area dei totali del carrello. È un buon posto per visualizzare messaggi o promozioni relative alla spedizione.

Esempio di utilizzo:

add_action( 'wooCommerce_cart_totals_before_shipping', 'custom_shipping_message' ); 
 
function custom_shipping_message() { 
    echo '<p class="shipping-message">Free shipping on orders over $50!</p>'; 
} 

3. “wooCommerce_review_order_before_submit“: utilizza questo hook per aggiungere contenuti prima del pulsante Effettua ordine nella pagina di pagamento, come una casella di controllo dell’accordo personalizzato o badge di fiducia.

4. “woocommerce_checkout_after_customer_details“: questo hook si attiva dopo la sezione dei dettagli del cliente nella pagina di pagamento. Puoi usarlo per aggiungere campi personalizzati o dividere il checkout in più passaggi.

Hook nell’account WooCommerce e nelle pagine di archivio

Le pagine dell’account WooCommerce consentono ai clienti di visualizzare i propri ordini, gestire i propri indirizzi ed eseguire altre attività relative all’account. Le pagine di archivio, come le pagine del negozio e delle categorie, visualizzano elenchi di prodotti. WooCommerce fornisce anche ganci per personalizzare queste pagine.

Alcuni hook utili per le pagine di account e archivio includono:

1. “woocommerce_before_account_navigation“: questo hook si attiva prima del menu di navigazione dell’account. Utilizzalo per aggiungere voci di menu o contenuti personalizzati sopra la navigazione.

2. “woocommerce_after_account_orders“: utilizza questo hook per visualizzare contenuti personalizzati dopo la tabella degli ordini nella pagina dell’account, ad esempio un messaggio che incoraggia i clienti a lasciare recensioni.

Esempio di utilizzo:

add_action( 'woocommerce_after_account_orders', 'custom_account_message' ); 
 
function custom_account_message() { 
    echo '<p class="account-message">Thank you for your orders! Please leave a review for the products you purchased.</p>'; 
} 

3. ‘woocommerce_before_shop_loop‘: questo hook si attiva prima del ciclo del prodotto nelle pagine di archivio. Usalo per aggiungere filtri personalizzati, opzioni di ordinamento o contenuti promozionali.

4. “woocommerce_after_shop_loop_item“: utilizza questo gancio per inserire contenuti dopo ogni prodotto nel ciclo, come un pulsante “Visualizzazione rapida” personalizzato o un meta prodotto aggiuntivo.

Hook WooCommerce comuni che dovresti conoscere

WooCommerce offre una vasta gamma di hook che ti consentono di personalizzare quasi ogni aspetto del tuo negozio online. Concentriamoci ora su alcuni degli hook per azioni e filtri più utilizzati. Questi ganci sono essenziali per modificare la funzionalità e l’aspetto del tuo negozio WooCommerce.

Ganci di azione usati di frequente

Gli action hook vengono utilizzati per aggiungere o modificare funzionalità in punti specifici del processo WooCommerce. Consentono di inserire contenuti personalizzati, modificare il comportamento di determinate funzionalità o attivare azioni aggiuntive in base a eventi specifici.

1. “woocommerce_before_main_content“: questo hook si attiva prima che venga visualizzato il contenuto principale di WooCommerce. È un buon posto per aggiungere contenuti personalizzati che appaiono sopra il ciclo del prodotto nelle pagine del negozio o sopra i dettagli del prodotto nelle pagine dei singoli prodotti.

Esempio di utilizzo:

add_action( 'woocommerce_before_main_content', 'custom_content_before_main' ); 
 
function custom_content_before_main() { 
    echo '<div class="custom-content">Check out our latest products!</div>'; 
}

2. “woocommerce_after_shop_loop_item“: questo gancio viene attivato dopo ogni prodotto nel ciclo del negozio. Usalo per aggiungere contenuti personalizzati o pulsanti sotto il titolo o il prezzo del prodotto.

Esempio di utilizzo:

add_action( 'woocommerce_after_shop_loop_item', 'custom_button_after_product' ); 
 
function custom_button_after_product() { 
    echo '<a href="#" class="custom-button">Buy Now</a>'; 
} 

3. ‘woocommerce_before_cart‘: questo gancio si attiva prima della tabella del carrello nella pagina del carrello. È una posizione ideale per visualizzare messaggi personalizzati, promozioni o contenuti aggiuntivi relativi al carrello.

Esempio di utilizzo:

add_action( 'woocommerce_before_cart', 'custom_message_before_cart' ); 
 
function custom_message_before_cart() { 
    echo '<div class="custom-message">Spend $50 or more for free shipping!</div>'; 
} 

4. “woocommerce_checkout_before_customer_details“: utilizza questo hook per aggiungere contenuti personalizzati prima della sezione dei dettagli del cliente nella pagina di pagamento. Questo è un buon posto per visualizzare una barra di avanzamento, un messaggio sui campi obbligatori o un link alla tua informativa sulla privacy.

5. “woocommerce_checkout_order_review“: Questo hook viene attivato nella pagina di pagamento, all’interno della sezione di revisione dell’ordine. Utilizzalo per modificare l’aspetto del riepilogo dell’ordine o aggiungere contenuti personalizzati relativi all’ordine.

Esempio di utilizzo:

add_action( 'woocommerce_checkout_order_review', 'custom_order_review_content' ); 
 
function custom_order_review_content() { 
    echo '<div class="custom-order-review">Your order will be processed within 1-2 business days.</div>'; 
}

6. “woocommerce_email_header“: Questo gancio ti consente di modificare l’intestazione dei modelli di email WooCommerce. Usalo per aggiungere contenuti personalizzati, cambiare il logo o regolare lo stile dell’intestazione dell’e-mail.

7. “woocommerce_email_footer“: Simile all’hook dell’intestazione dell’email, questo hook ti consente di personalizzare il piè di pagina dei modelli di email WooCommerce. Aggiungi contenuti personalizzati, link ai social media o modifica lo stile in modo che corrisponda al tuo marchio.

Ganci filtranti popolari

Gli hook di filtro vengono utilizzati per modificare i dati prima che vengano visualizzati o elaborati da WooCommerce. Consentono di modificare il contenuto di elementi specifici, alterare il comportamento di determinate funzionalità o manipolare i dati prima che vengano salvati o recuperati.

1. “woocommerce_product_title“: questo gancio ti consente di modificare il titolo del prodotto prima che venga visualizzato sulla pagina del singolo prodotto o nel ciclo del negozio.

Esempio di utilizzo:

add_filter( 'woocommerce_product_title', 'custom_product_title' ); 
 
function custom_product_title( $title ) { 
    return 'Best ' . $title . ' Available!'; 
} 

2. “woocommerce_product_tabs“: Usa questo gancio per aggiungere, rimuovere o riorganizzare le schede sulla pagina del singolo prodotto. È possibile creare schede personalizzate o modificare il contenuto di quelle esistenti.

Esempio di utilizzo:

add_filter( 'woocommerce_product_tabs', 'custom_product_tab' ); 
 
function custom_product_tab( $tabs ) { 
    $tabs['custom_tab'] = array( 
        'title'    => 'Custom Tab', 
        'priority' => 50, 
        'callback' => 'custom_tab_content' 
    ); 
    return $tabs; 
} 
 
function custom_tab_content() { 
    echo '<h2>Custom Tab Content</h2>'; 
    echo '<p>This is the content of the custom tab.</p>'; 
} 

3. “woocommerce_add_to_cart_redirect“: questo hook ti consente di modificare l’URL di reindirizzamento dopo che un prodotto è stato aggiunto al carrello. Usalo per reindirizzare i clienti a una pagina specifica, ad esempio una pagina di cross-selling o upsell.

Esempio di utilizzo:

add_filter( 'woocommerce_add_to_cart_redirect', 'custom_add_to_cart_redirect' ); 
 
function custom_add_to_cart_redirect( $url ) { 
    return get_permalink( 123 ); // Replace 123 with the ID of the desired redirect page 
}

4. ‘woocommerce_cart_totals‘: utilizzare questo gancio per modificare i totali del carrello prima che vengano visualizzati nelle pagine del carrello e di pagamento. È possibile aggiungere totali personalizzati, modificare quelli esistenti o cambiare l’ordine in cui vengono visualizzati.

Esempio di utilizzo:

add_filter( 'woocommerce_cart_totals', 'custom_cart_totals' ); 
 
function custom_cart_totals( $totals ) { 
    $totals['custom_total'] = array( 
        'label' => 'Custom Total', 
        'value' => '10.00' 
    ); 
    return $totals; 
}

5. “woocommerce_product_related_posts_query“: Questo hook consente di modificare la query per i prodotti correlati nella pagina del singolo prodotto. Utilizzalo per modificare il numero di prodotti correlati, filtrarli in base a criteri specifici o modificare l’ordine in cui vengono visualizzati.

6. ‘woocommerce_checkout_fields‘: utilizza questo gancio per aggiungere, rimuovere o modificare i campi di pagamento. È possibile creare campi personalizzati, modificare le etichette dei campi o regolare le regole di convalida dei campi.

Esempio di utilizzo:

add_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' ); 
 
function custom_checkout_fields( $fields ) { 
    $fields['billing']['custom_field'] = array( 
        'label'     => 'Custom Field', 
        'required'  => true, 
        'clear'     => true, 
        'type'      => 'text', 
        'class'     => array( 'form-row-wide' ) 
    ); 
    return $fields; 
}  

7. “woocommerce_payment_gateways“: questo gancio consente di aggiungere, rimuovere o modificare i gateway di pagamento disponibili. Utilizzalo per creare metodi di pagamento personalizzati o modificare l’ordine in cui vengono visualizzati i gateway.

Esempi pratici di come utilizzare gli hook di WooCommerce

Ora che hai familiarità con alcuni degli hook WooCommerce più comuni, esploriamo esempi pratici di come utilizzarli per personalizzare il tuo negozio online. Tratteremo l’aggiunta di contenuti personalizzati utilizzando gli action hook, la modifica dell’output con gli hook dei filtri e i casi d’uso reali per gli hook di WooCommerce.

Aggiunta di contenuti personalizzati utilizzando gli action hook

Gli action hook ti consentono di inserire contenuti personalizzati in punti specifici del tuo negozio WooCommerce. Di seguito sono riportati alcuni esempi di come utilizzare gli action hook per aggiungere contenuti personalizzati:

Esempio 1: Aggiunta di un messaggio personalizzato alla pagina del carrello

add_action( 'woocommerce_before_cart', 'custom_cart_message' ); 
 
function custom_cart_message() { 
    echo '<div class="custom-message">Thank you for shopping with us! Please review your cart before proceeding to checkout.</div>'; 
} 

In questo esempio, utilizziamo l’hook ‘woocommerce_before_cart‘ per aggiungere un messaggio personalizzato sopra la tabella del carrello. Il messaggio ringrazia il cliente per lo shopping e gli ricorda di rivedere il carrello prima del check-out.

Esempio 2: Inserimento di un banner nella pagina del negozio

add_action( 'woocommerce_before_main_content', 'custom_shop_banner' ); 
 
function custom_shop_banner() { 
    echo '<div class="custom-banner"> 
        <img src="path/to/banner-image.jpg" alt="Shop Banner"> 
        <h2>Welcome to our shop!</h2> 
        <p>Discover our latest products and special offers.</p> 
    </div>'; 
}

In questo caso, utilizziamo il gancio “woocommerce_before_main_content” per inserire un banner personalizzato nella pagina del negozio. Il banner include un’immagine, un messaggio di benvenuto e una call-to-action per incoraggiare i clienti a esplorare il negozio.

Esempio 3: Aggiunta di una scheda personalizzata alla pagina del singolo prodotto

add_action( 'woocommerce_product_tabs', 'custom_product_tab' ); 
 
function custom_product_tab( $tabs ) { 
    $tabs['custom_tab'] = array( 
        'title'    => 'Custom Tab', 
        'priority' => 50, 
        'callback' => 'custom_tab_content' 
    ); 
    return $tabs; 
} 
 
function custom_tab_content() { 
    echo '<h2>Custom Tab Content</h2>'; 
    echo '<p>This is the content of the custom tab.</p>'; 
} 

In questo esempio, utilizziamo l’hook “woocommerce_product_tabs” per aggiungere una scheda personalizzata alla pagina del singolo prodotto. La funzione ‘custom_product_tab‘ aggiunge una nuova scheda con una funzione di titolo, priorità e callback.

La funzione ‘custom_tab_content‘ definisce il contenuto che verrà visualizzato quando si fa clic sulla scheda personalizzata.

Modifica dell’output con i ganci del filtro

Gli hook di filtro ti consentono di modificare i dati prima che vengano visualizzati o elaborati da WooCommerce. Di seguito sono riportati alcuni esempi di come utilizzare gli hook del filtro per modificare l’output:

Esempio 1: Modifica del testo del pulsante “Aggiungi al carrello”

add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text' ); 
 
function custom_add_to_cart_text() { 
    return 'Buy Now'; 
} 

In questo esempio, utilizziamo il filtro “woocommerce_product_single_add_to_cart_text” per modificare il testo del pulsante “Aggiungi al carrello” nella pagina del singolo prodotto. La funzione “custom_add_to_cart_text” restituisce il nuovo testo del pulsante, che in questo caso è “Acquista ora”.

Esempio 2: Modifica dei campi di checkout

add_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' ); 
 
function custom_checkout_fields( $fields ) { 
    // Remove the "Company" field 
    unset( $fields['billing']['billing_company'] ); 
     
    // Make the "Phone" field required 
    $fields['billing']['billing_phone']['required'] = true; 
     
    // Add a custom field 
    $fields['billing']['custom_field'] = array( 
        'label'     => 'Custom Field', 
        'required'  => true, 
        'clear'     => true, 
        'type'      => 'text', 
        'class'     => array( 'form-row-wide' ) 
    ); 
     
    return $fields; 
} 

In questo caso, utilizziamo il filtro “woocommerce_checkout_fields” per modificare i campi di checkout. La funzione “custom_checkout_fields” rimuove il campo “Azienda”, rende obbligatorio il campo “Telefono” e aggiunge un campo personalizzato alla sezione di fatturazione.

Esempio 3: Modifica del numero di prodotti correlati

add_filter( 'woocommerce_output_related_products_args', 'custom_related_products_args' ); 
 
function custom_related_products_args( $args ) { 
    $args['posts_per_page'] = 6; 
    $args['columns'] = 3; 
    return $args; 
} 

In questo esempio, utilizziamo il filtro “woocommerce_output_related_products_args” per modificare il numero di prodotti correlati visualizzati nella pagina del singolo prodotto. La funzione ‘custom_related_products_args‘ modifica gli argomenti ‘posts_per_page‘ e ‘colonne‘ per mostrare 6 prodotti correlati in 3 colonne.

Casi d’uso reali per gli hook WooCommerce

Gli hook WooCommerce possono essere utilizzati per risolvere un’ampia gamma di sfide di personalizzazione. Ecco alcuni casi d’uso reali per gli hook di WooCommerce:

1. Aggiunta di un metodo di spedizione personalizzato

Puoi utilizzare il filtro “woocommerce_shipping_methods” per aggiungere un metodo di spedizione personalizzato al tuo negozio WooCommerce. Ciò è utile se devi offrire un’opzione di spedizione specifica che non è disponibile per impostazione predefinita, come un servizio di consegna locale o un calcolatore di spedizione personalizzato.

2. Personalizzazione dell’email di conferma dell’ordine

L’action hook “woocommerce_email_order_details” consente di personalizzare l’email di conferma dell’ordine inviata ai clienti. Puoi utilizzare questo gancio per aggiungere contenuti personalizzati, come un messaggio di ringraziamento, consigli sui prodotti o un codice coupon per il loro prossimo acquisto.

3. Modifica dei risultati della ricerca dei prodotti

L’hook dell’azione “pre_get_posts” può essere utilizzato per modificare i risultati della ricerca del prodotto. Ad esempio, è possibile utilizzare questo hook per includere o escludere determinate categorie di prodotti dai risultati di ricerca, modificare l’ordine di visualizzazione dei risultati o aggiungere filtri personalizzati alla pagina di ricerca.

4. Aggiunta di campi personalizzati all’editor del prodotto

L’hook di azione “woocommerce_product_options_general_product_data” ti consente di aggiungere campi personalizzati all’editor del prodotto nell’amministratore di WordPress. Ciò è utile per memorizzare ulteriori informazioni sul prodotto, come uno SKU personalizzato, un numero di parte del produttore o l’URL di un video del prodotto.

5. Personalizzazione del carrello e del processo di checkout

WooCommerce fornisce diversi hook che ti consentono di personalizzare il carrello e il processo di pagamento. Ad esempio, puoi utilizzare l’hook dell’azione “woocommerce_cart_calculate_fees” per aggiungere tariffe personalizzate al totale del carrello, l’hook dell’azione “woocommerce_checkout_create_order_line_item” per modificare le voci dell’ordine o l’hook dell’azione “woocommerce_payment_complete” per eseguire azioni aggiuntive dopo il completamento di un pagamento.

Questi sono solo alcuni esempi di come gli hook di WooCommerce possono essere utilizzati per risolvere le sfide di personalizzazione del mondo reale.

Applicazioni avanzate degli hook WooCommerce

Esploriamo ora alcune applicazioni avanzate degli hook WooCommerce, tra cui la personalizzazione delle email, l’implementazione di prezzi dinamici e sconti e l’integrazione di plugin di terze parti.

Personalizzare le email con gli hook di WooCommerce

WooCommerce invia varie e-mail a clienti e amministratori durante il processo di acquisto. Queste e-mail includono conferme d’ordine, notifiche di spedizione e aggiornamenti dell’account. Gli hook di WooCommerce ti consentono di personalizzare queste email in modo che corrispondano meglio al tuo marchio e forniscano informazioni aggiuntive ai tuoi clienti.

1. Modifica dei modelli di email

Gli hook “woocommerce_email_header” e “woocommerce_email_footer” ti consentono di modificare l’intestazione e il piè di pagina dei modelli di email WooCommerce. Puoi utilizzare questi ganci per aggiungere contenuti personalizzati, modificare il logo o regolare lo stile in modo che corrisponda al tuo marchio.

Esempio:

add_action( 'woocommerce_email_header', 'custom_email_header' ); 
 
function custom_email_header( $email_heading ) { 
    $custom_logo_url = 'https://example.com/path/to/custom-logo.png'; 
    $custom_header = '<div style="text-align: center; margin-bottom: 20px;"><img src="' . $custom_logo_url . '" alt="Custom Logo" /></div>'; 
    echo $custom_header; 
}

In questo esempio, utilizziamo l’hook “woocommerce_email_header” per aggiungere un logo personalizzato all’intestazione dell’email. La funzione ‘custom_email_header‘ genera un tag immagine con l’URL del logo personalizzato.

2. Aggiunta di contenuti personalizzati alle e-mail

Puoi utilizzare l’hook “woocommerce_email_order_details” per aggiungere contenuti personalizzati alla sezione dei dettagli dell’ordine delle email di WooCommerce. Ciò è utile per includere ulteriori informazioni sull’ordine, come un messaggio di ringraziamento o consigli sui prodotti.

Esempio:

add_action( 'woocommerce_email_order_details', 'custom_email_order_details', 20, 4 ); 
 
function custom_email_order_details( $order, $sent_to_admin, $plain_text, $email ) { 
    if ( ! $sent_to_admin && ! $plain_text ) { 
        echo '<p>Thank you for your order! We appreciate your business and hope you enjoy your purchase.</p>'; 
    } 
}

In questo esempio, utilizziamo l’hook “woocommerce_email_order_details” per aggiungere un messaggio di ringraziamento all’e-mail di conferma dell’ordine inviata ai clienti. La funzione ‘custom_email_order_details‘ verifica se l’e-mail non viene inviata a un amministratore e non è in formato testo normale prima di inviare il messaggio.

Prezzi dinamici e sconti tramite hook

Gli hook di WooCommerce possono essere utilizzati per implementare prezzi dinamici e sconti in base a vari criteri, come il ruolo del cliente, la quantità di prodotti acquistati o l’importo totale dell’ordine.

1. Applicazione di uno sconto personalizzato

Il gancio “woocommerce_cart_calculate_fees” ti consente di aggiungere sconti personalizzati al totale del carrello. È possibile utilizzare questo hook per applicare sconti percentuali o di importo fisso in base a condizioni specifiche.

Esempio:

add_action( 'woocommerce_cart_calculate_fees', 'custom_discount' ); 
 
function custom_discount( $cart ) { 
    if ( is_user_logged_in() ) { 
        $discount_amount = $cart->subtotal * 0.1; // Apply a 10% discount for logged-in users 
        $cart->add_fee( 'Custom Discount', -$discount_amount ); 
    } 
}

In questo esempio, utilizziamo l’hook ‘woocommerce_cart_calculate_fees‘ per applicare uno sconto del 10% agli utenti che hanno effettuato l’accesso. La funzione ‘custom_discount‘ verifica se l’utente ha effettuato l’accesso e calcola l’importo dello sconto in base al subtotale del carrello. Lo sconto viene quindi aggiunto come commissione negativa al carrello.

2. Prezzi dinamici basati sulla quantità

Il gancio “woocommerce_before_calculate_totals” può essere utilizzato per modificare i prezzi dei prodotti in base alla quantità acquistata. Ciò è utile per implementare sconti all’ingrosso o prezzi differenziati.

Esempio:

add_action( 'woocommerce_before_calculate_totals', 'dynamic_pricing_quantity' ); 
 
function dynamic_pricing_quantity( $cart ) { 
    if ( is_admin() && ! defined( 'DOING_AJAX' ) ) { 
        return; 
    } 
 
    foreach ( $cart->get_cart() as $cart_item ) { 
        $product = $cart_item['data']; 
        $quantity = $cart_item['quantity']; 
 
        if ( $quantity >= 10 ) { 
            $price = $product->get_price() * 0.9; // Apply a 10% discount for quantities of 10 or more 
            $product->set_price( $price ); 
        } 
    } 
}

In questo esempio, utilizziamo l’hook “woocommerce_before_calculate_totals” per modificare i prezzi dei prodotti in base alla quantità acquistata. La funzione “dynamic_pricing_quantity” scorre ogni articolo del carrello e controlla se la quantità è 10 o più. Se la condizione è soddisfatta, viene applicato uno sconto del 10% sul prezzo del prodotto.

Integrazione di plugin di terze parti con gli hook di WooCommerce

Gli hook di WooCommerce possono essere utilizzati per integrare plugin di terze parti con il tuo negozio online. Ciò consente di estendere le funzionalità di WooCommerce e creare integrazioni personalizzate con altri sistemi.

1. Integrazione con un fornitore di servizi di spedizione personalizzato

Puoi utilizzare il filtro “woocommerce_shipping_methods” per aggiungere un metodo di spedizione personalizzato fornito da un plug-in di terze parti. Ciò ti consente di offrire ulteriori opzioni di spedizione ai tuoi clienti.

Esempio:

add_filter( 'woocommerce_shipping_methods', 'add_custom_shipping_method' ); 
 
function add_custom_shipping_method( $methods ) { 
    $methods['custom_shipping'] = 'Custom_Shipping_Method'; 
    return $methods; 
}

In questo esempio, utilizziamo il filtro “woocommerce_shipping_methods” per aggiungere un metodo di spedizione personalizzato all’elenco dei metodi di spedizione disponibili. La funzione ‘add_custom_shipping_method‘ aggiunge la classe ‘Custom_Shipping_Method‘ all’array ‘$methods’.

2. Modifica dei dati del prodotto con un plug-in di terze parti

Il filtro “woocommerce_product_get_price” può essere utilizzato per modificare il prezzo del prodotto recuperato da un plug-in di terze parti o da una tabella di database personalizzata.

Esempio:

add_filter( 'woocommerce_product_get_price', 'custom_product_price', 10, 2 ); 
 
function custom_product_price( $price, $product ) { 
    $custom_price = get_post_meta( $product->get_id(), 'custom_price', true ); 
    if ( ! empty( $custom_price ) ) { 
        $price = $custom_price; 
    } 
    return $price; 
} 

In questo esempio, utilizziamo il filtro “woocommerce_product_get_price” per modificare il prezzo del prodotto in base al valore di un campo personalizzato. La funzione ‘custom_product_price‘ recupera il valore del meta campo del post ‘custom_price‘ per il prodotto. Se il prezzo personalizzato è impostato, questo sostituisce il prezzo originale del prodotto.

Risoluzione dei problemi relativi agli hook di WooCommerce

Mentre lavori con gli hook di WooCommerce per personalizzare il tuo negozio online, potresti riscontrare vari problemi ed errori. In questa sezione, discuteremo i problemi comuni relativi agli hook di WooCommerce, come risolverli e risolverli e le migliori pratiche per utilizzare gli hook in modo efficace.

1. Il gancio non funziona o le modifiche non hanno effetto

Se avete aggiunto un hook al vostro file php o un plugin personalizzato, ma sembra che non funzioni, i motivi potrebbero essere diversi:

• Errori di sintassi: ricontrolla il codice per verificare la presenza di errori di battitura, punti e virgola mancanti o nomi di funzione errati. Un singolo errore di sintassi può impedire l’esecuzione dell’intero file.

Soluzione: utilizzare un editor di codice con evidenziazione della sintassi e rilevamento degli errori per individuare e correggere rapidamente gli errori di sintassi.

Leggi anche: Come creare un plugin per WordPress (Guida per principianti)

• Nome dell’hook errato: assicurati di utilizzare il nome dell’hook corretto. I nomi degli hook di WooCommerce fanno distinzione tra maiuscole e minuscole e devono essere scritti esattamente come documentato.

Soluzione: Fai riferimento al riferimento all’hook di WooCommerce o utilizza un plug-in di debugger per assicurarti di utilizzare il nome dell’hook corretto.

• Conflitti di priorità degli hook: se più funzioni sono associate alla stessa azione o filtro con la stessa priorità, verranno eseguite nell’ordine in cui sono state aggiunte. Questo può portare a risultati imprevisti.

Soluzione: Regola la priorità delle tue funzioni agganciate per controllare l’ordine in cui vengono eseguite. Utilizzare un valore di priorità univoco per evitare conflitti con altre funzioni.

2. Contenuto duplicato o output imprevisto

Se vedete contenuti duplicati o output inaspettati sulle vostre pagine WooCommerce, potrebbe essere dovuto a un hook che viene attivato più volte o a una funzione che emette contenuti invece di restituirli.

• Chiamate di funzione multiple: Se hai aggiunto accidentalmente la stessa funzione a un hook più volte, verrà eseguita ogni volta che l’hook viene attivato, generando contenuti duplicati.

Soluzione: ricontrolla il codice per assicurarti di non aggiungere la stessa funzione a un hook più di una volta. Se è necessario aggiungere una funzione più volte con argomenti diversi, utilizzare un nome di funzione univoco per ogni istanza.

• Output della funzione non corretto: se si utilizza un hook del filtro, la funzione dovrebbe restituire il valore modificato invece di emetterlo direttamente. L’output di contenuto in una funzione di filtro può portare a un output imprevisto sulla pagina.

Soluzione: assicurarsi che le funzioni di filtro restituiscano il valore modificato anziché eseguirlo o stamparlo. Usa l’istruzione ‘return’ per passare il valore a WordPress.

3. Problemi di prestazioni o caricamento lento della pagina

Se avete aggiunto un gran numero di hook o funzioni complesse al vostro sito WooCommerce, ciò può influire sulle prestazioni e rallentare i tempi di caricamento delle pagine.

• Troppi hook: l’aggiunta di troppi hook, in particolare quelli che eseguono attività ad alta intensità di risorse, può rallentare il sito e influire negativamente sull’esperienza dell’utente.

Soluzione: Controlla i tuoi hook e rimuovi quelli non necessari o ridondanti. Ottimizza le funzioni associate per ridurre al minimo il numero di query al database e richieste esterne.

• Codice inefficiente: il codice scritto male o inefficiente nelle funzioni agganciate può portare a problemi di prestazioni e tempi di caricamento delle pagine lenti.

Soluzione: ottimizzare le prestazioni del codice riducendo al minimo i cicli, utilizzando tecniche di memorizzazione nella cache ed evitando attività che richiedono un uso intensivo delle risorse, ove possibile. Utilizza gli strumenti di profilazione per identificare i colli di bottiglia delle prestazioni e ottimizzarli di conseguenza.

Debug degli errori di hook in WooCommerce

Quando si risolvono i problemi con gli hook di WooCommerce, è essenziale disporre di un solido processo di debug. Di seguito sono riportati alcuni suggerimenti e tecniche per il debug degli errori relativi agli hook:

1. Abilita WP_DEBUG

La costante WP_DEBUG è una funzionalità integrata di WordPress che abilita la modalità di debug e visualizza messaggi di errore dettagliati sul tuo sito. Per abilitare WP_DEBUG, aggiungi la seguente riga al file wp-config.php:

define( 'WP_DEBUG', true ); 

Con WP_DEBUG abilitato, WordPress visualizzerà avvisi, avvisi e messaggi di errore sul tuo sito, semplificando l’identificazione e la risoluzione dei problemi relativi agli hook di WooCommerce.

2. Utilizzare un plug-in del debugger hook

Sono disponibili diversi plugin per WordPress che possono aiutarti a eseguire il debug degli hook di WooCommerce. Ciò include la visualizzazione di informazioni sugli hook attivati su ogni pagina, le funzioni collegate a ciascun hook e l’ordine in cui vengono eseguiti.

Alcuni popolari plugin per debugger hook includono:

• Mostra semplicemente gli hook: questo plugin visualizza un elenco di tutti gli hook attivati nella pagina corrente, insieme alle funzioni collegate a ciascun hook e alle loro priorità.

• WP Hooks Viewer: questo plugin fornisce una rappresentazione visiva degli hook sparati su ogni pagina, permettendoti di vedere l’ordine in cui vengono eseguiti e le relazioni tra hook e funzioni.

• Hook Monitor: questo plugin registra tutti gli hook attivati sul tuo sito e fornisce un’interfaccia ricercabile per l’analisi dei dati degli hook. Può aiutarti a identificare i problemi di prestazioni e rintracciare gli errori relativi a hook specifici.

3. Utilizzare error_log() per il debug

La funzione error_log() è una funzione PHP integrata che scrive messaggi di errore nel registro degli errori del server Web o in un file specificato. È possibile utilizzare error_log() per generare informazioni di debug dalle funzioni associate, che possono aiutare a risolvere i problemi e rintracciare l’origine degli errori.

Esempio:

add_filter( 'woocommerce_product_get_price', 'custom_product_price', 10, 2 ); 
 
function custom_product_price( $price, $product ) { 
    // Output debug information to the error log 
    error_log( 'Processing product ID: ' . $product->get_id() ); 
    error_log( 'Original price: ' . $price ); 
     
    // Your custom pricing logic here 
    // ... 
     
    error_log( 'Modified price: ' . $price ); 
    return $price; 
} 

In questo esempio, utilizziamo error_log() per produrre informazioni di debug sul prodotto in fase di elaborazione, il prezzo originale e il prezzo modificato. Queste informazioni verranno scritte nel registro degli errori del server Web, che è possibile utilizzare per risolvere i problemi e rintracciare gli errori.

4. Prova con un sito di staging

Quando si apportano modifiche significative al sito WooCommerce utilizzando gli hook, è sempre una buona idea testare le modifiche su un sito di staging prima di distribuirle sul sito live. Un sito di staging è una copia esatta del tuo sito live che puoi utilizzare per scopi di test e sviluppo senza influire sul tuo traffico live.

Testando prima le funzioni agganciate su un sito di staging, è possibile assicurarsi che funzionino come previsto e non introducano errori o problemi di prestazioni.

Dopo aver testato a fondo le modifiche sul sito di staging, è possibile distribuirle sul sito live in tutta sicurezza.

Personalizzazione semplificata di WooCommerce con WonderBlocks

Sebbene gli hook offrano potenti opzioni di personalizzazione, richiedono notevoli conoscenze tecniche e competenze di codifica. Non tutti i proprietari di negozi hanno il tempo o il background tecnico per lavorare con il codice PHP e gli hook di WordPress.

Molte personalizzazioni comportano il test di diverse combinazioni di hook, il debug di problemi di codice e la gestione di funzioni personalizzate.

Questa complessità crea una sfida per i proprietari di negozi che devono personalizzare i loro siti WooCommerce ma vogliono evitare di immergersi nel codice.

Riconoscendo questa esigenza, Bluehost ha sviluppato WonderBlocks come parte del suo toolkit WonderSuite.

WonderBlocks offre un’alternativa più semplice per molte personalizzazioni comuni di WooCommerce. Trasforma l’editor di blocchi standard di WordPress in un potente generatore di pagine WooCommerce.

Questo approccio visivo ti consente di personalizzare il tuo negozio senza scrivere una sola riga di codice.

Principali vantaggi dell’utilizzo di WonderBlocks per il tuo negozio WooCommerce:

Esempio: invece di scrivere funzioni di hook personalizzate per modificare il layout del prodotto, puoi utilizzare l’interfaccia drag-and-drop di WonderBlocks. Ciò consente di risparmiare tempo e riduce il rischio di errori di codifica.

Pensieri finali

In questa guida completa, abbiamo esplorato l’incredibile potenza e flessibilità degli hook di WooCommerce. Hai imparato a utilizzare gli hook di azione e filtro per personalizzare ogni aspetto del tuo negozio online, dalla modifica dei dati di prodotto all’aggiunta di funzionalità personalizzate al processo di checkout.

Armato di queste conoscenze, ora sei pronto per portare le tue capacità di sviluppo di WooCommerce al livello successivo. Non vediamo l’ora di vedere le incredibili personalizzazioni e i negozi online unici che creerai utilizzando le conoscenze e le tecniche che hai acquisito da questa guida.

Pronto a mettere in pratica queste personalizzazioni di WooCommerce? Inizia oggi stesso con l’hosting WooCommerce di Bluehost e crea il tuo negozio online personalizzato.

Domande frequenti