Come aggiungere un campo di testo personalizzato Woocommerce nella pagina del prodotto

Pubblicato: 2020-09-21

Aggiungi il campo di testo personalizzato Woocommerce nella pagina del prodotto In questo post, ti mostrerò una soluzione molto semplice per aggiungere un campo di testo personalizzato WooCommerce nella pagina del prodotto. Questi campi personalizzati sono anche chiamati componenti aggiuntivi del prodotto e includono campi di testo, campi di selezione, caselle di controllo e così via. Il motivo principale per aggiungere questo è consentire al cliente di inserire informazioni aggiuntive e personalizzate su un prodotto a un costo.

WooCommerce è una potente soluzione di eCommerce per WordPress che ha guadagnato popolarità nel corso degli anni. Si stima che WooCommerce alimenterà oltre il 42% di tutti i negozi online disponibili.

Questa è una percentuale molto elevata e se stai cercando un negozio online facile da configurare e gestire, WooCommerce è l'opzione migliore per te. È una soluzione gratuita e open source, che si è evoluta in una soluzione di e-commerce molto competente per siti Web basati su WordPress.

Campo di testo personalizzato Woocommerce nella pagina del prodotto

Se fai una rapida ricerca su Internet, molte persone ti forniranno soluzioni complesse e difficili da implementare. In questo breve tutorial, condividerò uno snippet di codice PHP che aggiungerà questa funzionalità alla pagina del tuo prodotto.

Entro la fine di questo tutorial, gli utenti del tuo negozio online potranno aggiungere una nota personalizzata a ciascun prodotto. Se il campo personalizzato non viene compilato, verrà generato un errore.

Inoltre, se stai cercando un modo più semplice per aggiungere campi personalizzati, il plugin Product Extras for WooCommerce sarà la soluzione migliore per te. Tuttavia, è un plug-in premium e dovrai pagare una tariffa annuale di $ 59. Extra del prodotto per il plug-in WooCommerce

Perché dovresti aggiungere campi personalizzati nella pagina del prodotto?

Il motivo principale per farlo è migliorare la fidelizzazione dei clienti, che probabilmente aumenterà le vendite, poiché i clienti potranno aggiungere una nota personalizzata all'ordine.

Ad esempio, un cliente potrebbe desiderare confezioni regalo o biglietti di auguri personalizzati sul prodotto e può aggiungere la nota personalizzata sul prodotto.

Con tutto ciò che è stato preparato, diamo un'occhiata ai passaggi che devi seguire per aggiungere un campo di testo personalizzato sulla pagina del prodotto nel tuo negozio WooCommerce. La pagina del prodotto predefinita è simile a questa:

Passaggi per aggiungere un campo di testo personalizzato Woocommerce nella pagina del prodotto

Ecco i passaggi che devi seguire:

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Menu Editor temi . Quando viene aperta la pagina dell'editor del tema , cerca il file delle funzioni del tema in cui aggiungeremo la funzione che aggiungerà il campo personalizzato di WooCommerce nella pagina del prodotto .
Aggiungi il seguente codice al file functions.php :

 /**

 * @snippet Aggiungi un campo di input ai prodotti - WooCommerce

 */

// ------------------------------------------

// 1. Mostra il campo di input personalizzato sopra Aggiungi al carrello

add_action( 'woocommerce_before_add_to_cart_button', 'njengah_product_add_on', 9 );

funzione njengah_product_add_on() {

    $valore = isset($_POST['custom_text_add_on'] ) ? sanitize_text_field($_POST['_custom_text_add_on'] ): '';

    echo '<div><label>Componente aggiuntivo di testo personalizzato <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' . $valore . '"></p></div>';

}

// ------------------------------------------

// 2. Genera un errore se il campo di input personalizzato è vuoto

add_filter('woocommerce_add_to_cart_validation', 'njengah_product_add_on_validation', 10, 3);

funzione njengah_product_add_on_validation($passato, $id_prodotto, $qty){

   if( isset( $_POST['custom_text_add_on'] ) && sanitize_text_field( $_POST['custom_text_add_on'] ) == '' ) {

      wc_add_notice( 'Il componente aggiuntivo di testo personalizzato è un campo obbligatorio', 'errore');

      $passato = falso;

   }

   ritorno $passato;

}

// ------------------------------------------

// 3. Salva il valore del campo di input personalizzato nei dati degli articoli del carrello

add_filter('woocommerce_add_cart_item_data', 'njengah_product_add_on_cart_item_data', 10, 2);

funzione njengah_product_add_on_cart_item_data($cart_item, $product_id){

    if( isset( $_POST['custom_text_add_on'] ) ) {

        $cart_item['custom_text_add_on'] = sanitize_text_field($_POST['custom_text_add_on']);

    }

    restituisci $carrello_elemento;

}

// ------------------------------------------

// 4. Visualizza il valore del campo di input personalizzato @ Carrello

add_filter('woocommerce_get_item_data', 'njengah_product_add_on_display_cart', 10, 2);

funzione njengah_product_add_on_display_cart($dati, $cart_item) {

    if ( isset( $cart_item['custom_text_add_on'] ) ){

        $dati[] = matrice(

            'name' => 'Componente aggiuntivo di testo personalizzato',

            'value' => sanitize_text_field( $cart_item['custom_text_add_on'] )

        );

    }

    restituire $dati;

}

// ------------------------------------------

// 5. Salva il valore del campo di input personalizzato nel meta elemento dell'ordine

add_action( 'woocommerce_add_order_item_meta', ' njengah_product_add_on_order_item_meta', 10, 2 );

funzione njengah_product_add_on_order_item_meta($item_id, $valori) {

    if ( ! empty( $values['custom_text_add_on'] ) ) {

        wc_add_order_item_meta($item_id, 'Add-On testo personalizzato', $values['custom_text_add_on'], true);

    }

}

// ------------------------------------------

// 6. Visualizza il valore del campo di input personalizzato nella tabella degli ordini

add_filter( 'woocommerce_order_item_product', ' njengah_product_add_on_display_order', 10, 2 );

funzione njengah_product_add_on_display_order($cart_item, $order_item){

    if( isset( $order_item['custom_text_add_on'] ) ){

        $cart_item['custom_text_add_on'] = $order_item['custom_text_add_on'];

    }

    restituisci $carrello_elemento;

}

// ------------------------------------------

// 7. Visualizza il valore del campo di input personalizzato nelle e-mail dell'ordine

add_filter('woocommerce_email_order_meta_fields', 'njengah_product_add_on_display_emails');

funzione njengah_product_add_on_display_emails($campi) {

    $fields['custom_text_add_on'] = 'Componente aggiuntivo testo personalizzato';

    restituisci $campi;

}

Per vedere il risultato , aggiorna semplicemente la pagina del prodotto e dovresti vedere questo:

Se un utente non ha inserito i dettagli, verrà visualizzato un errore finché l'utente non aggiunge il testo personalizzato come mostrato di seguito: errore se l'utente non ha inserito i dettagli

La nota personalizzata apparirà anche sui dettagli dell'ordine come mostrato qui: componente aggiuntivo di testo personalizzato sul carrello

Come funziona il codice

Innanzitutto, il codice mostra il campo di input personalizzato sopra Aggiungi al carrello, quindi viene aggiunto un errore se il campo di input personalizzato è vuoto. Quindi il valore del campo di input personalizzato viene salvato e visualizzato nel carrello, nell'articolo dell'ordine, nella tabella degli ordini e nelle e-mail dell'ordine.

Conclusione

In questo post, ti ho fornito una soluzione più semplice per gli utenti meno esperti di tecnologia che implicano l'uso di un plug-in. Quindi ho condiviso uno snippet di codice PHP che dovrebbe essere inserito nel file functions.php per visualizzare il componente aggiuntivo del cliente nel carrello, nell'articolo dell'ordine, nella tabella degli ordini e nelle e-mail dell'ordine. Spero che questo post ti abbia aiutato ad aggiungere un campo di testo personalizzato WooCommerce nella pagina del prodotto.