riferimento al codice WooCommerce<\/a>. Questo riferimento online elenca tutti gli hook di azione e filtro disponibili in WooCommerce, insieme a una descrizione di ci\u00f2 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. <\/p>\n\nGuida visiva agli hook di WooCommerce <\/h2>\n\n
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. <\/p>\n\n
Questa sezione tratter\u00e0 gli hook trovati nelle pagine dei singoli prodotti, nelle pagine del carrello e del checkout e nelle pagine dell’account e dell’archivio. <\/p>\n\n
Hook nelle singole pagine dei prodotti WooCommerce <\/h3>\n\n
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. <\/p>\n\n
Alcuni hook popolari per le pagine di singoli prodotti includono: <\/p>\n\n
1. “wooCommerce_before_single_product<\/strong>“: questo hook si attiva prima del contenuto del singolo prodotto. \u00c8 un buon posto per aggiungere contenuti personalizzati sopra il titolo del prodotto, come un banner o un messaggio. <\/p>\n\n2. ‘wooCommerce_single_product_summary<\/strong>‘: 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. \u00c8 possibile utilizzare questo hook per riorganizzare l’ordine degli elementi o inserire informazioni aggiuntive. <\/p>\n\nEsempio di utilizzo<\/strong>:<\/p>\n\nadd_action( 'wooCommerce_single_product_summary', 'custom_product_stock_status', 15 ); \n \nfunction custom_product_stock_status() { \n global $product; \n if ( $product->is_in_stock() ) { \n echo '<p class=\"stock-status in-stock\">In stock and ready to ship!<\/p>'; \n } else { \n echo '<p class=\"stock-status out-of-stock\">Currently out of stock. Check back soon!<\/p>'; \n } \n} <\/code><\/pre>\n\n3. “wooCommerce_after_single_product_summary<\/strong>“: utilizza questo hook per aggiungere contenuti sotto il riepilogo del prodotto, come prodotti correlati, upsell o schede di prodotti personalizzati. Quest’area \u00e8 perfetta per visualizzare informazioni aggiuntive che possono aiutare i clienti a prendere decisioni di acquisto informate. <\/p>\n\n4. “wooCommerce_product_thumbnails<\/strong>“: 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. <\/p>\n\nGanci per il carrello e le pagine di pagamento <\/h3>\n\n
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\u00f9 fluida e facile da usare. <\/p>\n\n
Alcuni agganci essenziali per il carrello e le pagine di pagamento includono: <\/p>\n\n
1. ‘wooCommerce_before_cart<\/strong>‘: Questo gancio spara davanti al tavolo del carrello. Usalo per aggiungere contenuti personalizzati o promozioni sopra il carrello. <\/p>\n\n2. “wooCommerce_cart_totals_before_shipping<\/strong>“: Questo gancio ti consente di aggiungere contenuti prima delle opzioni di spedizione nell’area dei totali del carrello. \u00c8 un buon posto per visualizzare messaggi o promozioni relative alla spedizione. <\/p>\n\nEsempio di utilizzo<\/strong>: <\/p>\n\nadd_action( 'wooCommerce_cart_totals_before_shipping', 'custom_shipping_message' ); \n \nfunction custom_shipping_message() { \n echo '<p class=\"shipping-message\">Free shipping on orders over $50!<\/p>'; \n} <\/code><\/pre>\n\n3. “wooCommerce_review_order_before_submit<\/strong>“: 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. <\/p>\n\n4. “woocommerce_checkout_after_customer_details<\/strong>“: 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\u00f9 passaggi. <\/p>\n\nHook nell’account WooCommerce e nelle pagine di archivio <\/h3>\n\n
Le pagine dell’account WooCommerce consentono ai clienti di visualizzare i propri ordini, gestire i propri indirizzi ed eseguire altre attivit\u00e0 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. <\/p>\n\n
Alcuni hook utili per le pagine di account e archivio includono: <\/p>\n\n
1. “woocommerce_before_account_navigation<\/strong>“: questo hook si attiva prima del menu di navigazione dell’account. Utilizzalo per aggiungere voci di menu o contenuti personalizzati sopra la navigazione. <\/p>\n\n2. “woocommerce_after_account_orders<\/strong>“: 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. <\/p>\n\nEsempio di utilizzo:<\/strong><\/p>\n\nadd_action( 'woocommerce_after_account_orders', 'custom_account_message' ); \n \nfunction custom_account_message() { \n echo '<p class=\"account-message\">Thank you for your orders! Please leave a review for the products you purchased.<\/p>'; \n} <\/code><\/pre>\n\n3. ‘woocommerce_before_shop_loop<\/strong>‘: questo hook si attiva prima del ciclo del prodotto nelle pagine di archivio. Usalo per aggiungere filtri personalizzati, opzioni di ordinamento o contenuti promozionali. <\/p>\n\n4. “woocommerce_after_shop_loop_item<\/strong>“: utilizza questo gancio per inserire contenuti dopo ogni prodotto nel ciclo, come un pulsante “Visualizzazione rapida” personalizzato o un meta prodotto aggiuntivo. <\/p>\n\nHook WooCommerce comuni che dovresti conoscere <\/h2>\n\n
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\u00f9 utilizzati. Questi ganci sono essenziali per modificare la funzionalit\u00e0 e l’aspetto del tuo negozio WooCommerce. <\/p>\n\n
Ganci di azione usati di frequente <\/h3>\n\n
Gli action hook vengono utilizzati per aggiungere o modificare funzionalit\u00e0 in punti specifici del processo WooCommerce. Consentono di inserire contenuti personalizzati, modificare il comportamento di determinate funzionalit\u00e0 o attivare azioni aggiuntive in base a eventi specifici. <\/p>\n\n
1. “woocommerce_before_main_content<\/strong>“: questo hook si attiva prima che venga visualizzato il contenuto principale di WooCommerce. \u00c8 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. <\/p>\n\nEsempio di utilizzo:<\/strong> <\/p>\n\nadd_action( 'woocommerce_before_main_content', 'custom_content_before_main' ); \n \nfunction custom_content_before_main() { \n echo '<div class=\"custom-content\">Check out our latest products!<\/div>'; \n}<\/code><\/pre>\n\n2. “woocommerce_after_shop_loop_item<\/strong>“: 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. <\/p>\n\nEsempio di utilizzo<\/strong>:<\/p>\n\nadd_action( 'woocommerce_after_shop_loop_item', 'custom_button_after_product' ); \n \nfunction custom_button_after_product() { \n echo '<a href=\"#\" class=\"custom-button\">Buy Now<\/a>'; \n} <\/code><\/pre>\n\n3. ‘woocommerce_before_cart<\/strong>‘: questo gancio si attiva prima della tabella del carrello nella pagina del carrello. \u00c8 una posizione ideale per visualizzare messaggi personalizzati, promozioni o contenuti aggiuntivi relativi al carrello. <\/p>\n\nEsempio di utilizzo<\/strong>:<\/p>\n\nadd_action( 'woocommerce_before_cart', 'custom_message_before_cart' ); \n \nfunction custom_message_before_cart() { \n echo '<div class=\"custom-message\">Spend $50 or more for free shipping!<\/div>'; \n} <\/code><\/pre>\n\n4. “woocommerce_checkout_before_customer_details<\/strong>“: utilizza questo hook per aggiungere contenuti personalizzati prima della sezione dei dettagli del cliente nella pagina di pagamento. Questo \u00e8 un buon posto per visualizzare una barra di avanzamento, un messaggio sui campi obbligatori o un link alla tua informativa sulla privacy. <\/p>\n\n5. “woocommerce_checkout_order_review<\/strong>“: 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. <\/p>\n\nEsempio di utilizzo<\/strong>:<\/p>\n\nadd_action( 'woocommerce_checkout_order_review', 'custom_order_review_content' ); \n \nfunction custom_order_review_content() { \n echo '<div class=\"custom-order-review\">Your order will be processed within 1-2 business days.<\/div>'; \n}<\/code><\/pre>\n\n6. “woocommerce_email_header<\/strong>“: 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. <\/p>\n\n7. “woocommerce_email_footer<\/strong>“: Simile all’hook dell’intestazione dell’email, questo hook ti consente di personalizzare il pi\u00e8 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. <\/p>\n\nGanci filtranti popolari <\/h3>\n\n
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\u00e0 o manipolare i dati prima che vengano salvati o recuperati. <\/p>\n\n
1. “woocommerce_product_title<\/strong>“: questo gancio ti consente di modificare il titolo del prodotto prima che venga visualizzato sulla pagina del singolo prodotto o nel ciclo del negozio. <\/p>\n\nEsempio di utilizzo<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_product_title', 'custom_product_title' ); \n \nfunction custom_product_title( $title ) { \n return 'Best ' . $title . ' Available!'; \n} <\/code><\/pre>\n\n2. “woocommerce_product_tabs<\/strong>“: Usa questo gancio per aggiungere, rimuovere o riorganizzare le schede sulla pagina del singolo prodotto. \u00c8 possibile creare schede personalizzate o modificare il contenuto di quelle esistenti. <\/p>\n\nEsempio di utilizzo<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_product_tabs', 'custom_product_tab' ); \n \nfunction custom_product_tab( $tabs ) { \n $tabs['custom_tab'] = array( \n 'title' => 'Custom Tab', \n 'priority' => 50, \n 'callback' => 'custom_tab_content' \n ); \n return $tabs; \n} \n \nfunction custom_tab_content() { \n echo '<h2>Custom Tab Content<\/h2>'; \n echo '<p>This is the content of the custom tab.<\/p>'; \n} <\/code><\/pre>\n\n3. “woocommerce_add_to_cart_redirect<\/strong>“: questo hook ti consente di modificare l’URL di reindirizzamento dopo che un prodotto \u00e8 stato aggiunto al carrello. Usalo per reindirizzare i clienti a una pagina specifica, ad esempio una pagina di cross-selling o upsell. <\/p>\n\nEsempio di utilizzo<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_add_to_cart_redirect', 'custom_add_to_cart_redirect' ); \n \nfunction custom_add_to_cart_redirect( $url ) { \n return get_permalink( 123 ); \/\/ Replace 123 with the ID of the desired redirect page \n}<\/code><\/pre>\n\n4. ‘woocommerce_cart_totals<\/strong>‘: utilizzare questo gancio per modificare i totali del carrello prima che vengano visualizzati nelle pagine del carrello e di pagamento. \u00c8 possibile aggiungere totali personalizzati, modificare quelli esistenti o cambiare l’ordine in cui vengono visualizzati. <\/p>\n\nEsempio di utilizzo<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_cart_totals', 'custom_cart_totals' ); \n \nfunction custom_cart_totals( $totals ) { \n $totals['custom_total'] = array( \n 'label' => 'Custom Total', \n 'value' => '10.00' \n ); \n return $totals; \n}<\/code><\/pre>\n\n5. “woocommerce_product_related_posts_query<\/strong>“: 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. <\/p>\n\n6. ‘woocommerce_checkout_fields<\/strong>‘: utilizza questo gancio per aggiungere, rimuovere o modificare i campi di pagamento. \u00c8 possibile creare campi personalizzati, modificare le etichette dei campi o regolare le regole di convalida dei campi. <\/p>\n\nEsempio di utilizzo<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' ); \n \nfunction custom_checkout_fields( $fields ) { \n $fields['billing']['custom_field'] = array( \n 'label' => 'Custom Field', \n 'required' => true, \n 'clear' => true, \n 'type' => 'text', \n 'class' => array( 'form-row-wide' ) \n ); \n return $fields; \n} <\/code><\/pre>\n\n7. “woocommerce_payment_gateways<\/strong>“: 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. <\/p>\n\nEsempi pratici di come utilizzare gli hook di WooCommerce <\/h2>\n\n
Ora che hai familiarit\u00e0 con alcuni degli hook WooCommerce pi\u00f9 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. <\/p>\n\n
Aggiunta di contenuti personalizzati utilizzando gli action hook <\/h3>\n\n
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: <\/p>\n\n
Esempio 1: Aggiunta di un messaggio personalizzato alla pagina del carrello<\/em><\/strong> <\/h4>\n\nadd_action( 'woocommerce_before_cart', 'custom_cart_message' ); \n \nfunction custom_cart_message() { \n echo '<div class=\"custom-message\">Thank you for shopping with us! Please review your cart before proceeding to checkout.<\/div>'; \n} <\/code><\/pre>\n\nIn questo esempio, utilizziamo l’hook ‘woocommerce_before_cart<\/strong>‘ 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. <\/p>\n\nEsempio 2: Inserimento di un banner nella pagina del negozio<\/em><\/strong> <\/h4>\n\nadd_action( 'woocommerce_before_main_content', 'custom_shop_banner' ); \n \nfunction custom_shop_banner() { \n echo '<div class=\"custom-banner\"> \n <img src=\"path\/to\/banner-image.jpg\" alt=\"Shop Banner\"> \n <h2>Welcome to our shop!<\/h2> \n <p>Discover our latest products and special offers.<\/p> \n <\/div>'; \n}<\/code><\/pre>\n\nIn questo caso, utilizziamo il gancio “woocommerce_before_main_content<\/strong>” 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. <\/p>\n\nEsempio 3: Aggiunta di una scheda personalizzata alla pagina del singolo prodotto<\/em><\/strong> <\/h4>\n\nadd_action( 'woocommerce_product_tabs', 'custom_product_tab' ); \n \nfunction custom_product_tab( $tabs ) { \n $tabs['custom_tab'] = array( \n 'title' => 'Custom Tab', \n 'priority' => 50, \n 'callback' => 'custom_tab_content' \n ); \n return $tabs; \n} \n \nfunction custom_tab_content() { \n echo '<h2>Custom Tab Content<\/h2>'; \n echo '<p>This is the content of the custom tab.<\/p>'; \n} <\/code><\/pre>\n\nIn questo esempio, utilizziamo l’hook “woocommerce_product_tabs<\/strong>” per aggiungere una scheda personalizzata alla pagina del singolo prodotto. La funzione ‘custom_product_tab<\/strong>‘ aggiunge una nuova scheda con una funzione di titolo, priorit\u00e0 e callback. <\/p>\n\nLa funzione ‘custom_tab_content<\/strong>‘ definisce il contenuto che verr\u00e0 visualizzato quando si fa clic sulla scheda personalizzata. <\/p>\n\nModifica dell’output con i ganci del filtro <\/h3>\n\n
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: <\/p>\n\n
Esempio 1: Modifica del testo del pulsante “Aggiungi al carrello”<\/strong><\/em> <\/h4>\n\nadd_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text' ); \n \nfunction custom_add_to_cart_text() { \n return 'Buy Now'; \n} <\/code><\/pre>\n\nIn questo esempio, utilizziamo il filtro “woocommerce_product_single_add_to_cart_text<\/strong>” per modificare il testo del pulsante “Aggiungi al carrello” nella pagina del singolo prodotto. La funzione “custom_add_to_cart_text<\/strong>” restituisce il nuovo testo del pulsante, che in questo caso \u00e8 “Acquista ora”. <\/p>\n\nEsempio 2: Modifica dei campi di checkout<\/em><\/strong><\/h4>\n\nadd_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' ); \n \nfunction custom_checkout_fields( $fields ) { \n \/\/ Remove the \"Company\" field \n unset( $fields['billing']['billing_company'] ); \n \n \/\/ Make the \"Phone\" field required \n $fields['billing']['billing_phone']['required'] = true; \n \n \/\/ Add a custom field \n $fields['billing']['custom_field'] = array( \n 'label' => 'Custom Field', \n 'required' => true, \n 'clear' => true, \n 'type' => 'text', \n 'class' => array( 'form-row-wide' ) \n ); \n \n return $fields; \n} <\/code><\/pre>\n\nIn questo caso, utilizziamo il filtro “woocommerce_checkout_fields<\/strong>” per modificare i campi di checkout. La funzione “custom_checkout_fields<\/strong>” rimuove il campo “Azienda”, rende obbligatorio il campo “Telefono” e aggiunge un campo personalizzato alla sezione di fatturazione. <\/p>\n\n