Come aggiungere il pulsante Aggiungi al carrello nelle pagine di Divi Shop
Pubblicato: 2020-06-21Utilizzi Divi e vuoi personalizzare le pagine del tuo negozio? In questo tutorial imparerai come includere il pulsante Aggiungi al carrello nelle pagine del negozio Divi.
Se hai intenzione di avviare un negozio online, WooCommerce è il modo più semplice e veloce per farlo. Anche se non sei uno sviluppatore, alcuni ottimi temi WooCommerce possono aiutarti a iniziare e migliorare le funzionalità del tuo negozio. Una delle migliori opzioni là fuori è Divi.
Perché includere un pulsante Aggiungi al carrello nelle pagine del negozio?
Il tema Divi è una delle opzioni più popolari per i negozi WooCommerce. È un tema molto flessibile che viene fornito con molte potenti funzionalità. Tuttavia, uno svantaggio è che i prodotti nelle pagine del negozio non hanno un pulsante Aggiungi al carrello. Ciò aggiunge un passaggio nella canalizzazione di acquisto e può influire sulle conversioni. La buona notizia è che c'è un modo per risolverlo.
In questa guida, ti mostreremo come aggiungere facilmente il pulsante Aggiungi al carrello alle pagine del negozio Divi .
Come aggiungere il pulsante Aggiungi al carrello in Divi?
Qui ti mostreremo i modi più semplici ed efficaci per includere il pulsante Aggiungi al carrello in Divi. Anche se apporteremo alcune modifiche ai file principali del tema, questi metodi sono molto facili da seguire anche per i principianti.
I due metodi principali per aggiungere il pulsante Aggiungi al carrello nelle pagine del negozio sono:
- Modifica del file functions.php
- Utilizzo del plug-in frammenti di codice
Entrambi i metodi sono adatti ai principianti e ti permetteranno di aggiungere il pulsante Aggiungi al carrello in pochissimo tempo.
Prima di iniziare
Prima di iniziare, ti consigliamo:
- Genera un backup completo nel caso qualcosa vada storto.
- Crea un tema figlio: non è consigliabile modificare direttamente i file del tema. Invece, puoi creare un tema figlio e modificarlo. Ci sono diversi metodi per farlo. In questo tutorial useremo un plugin.
1) Includi il pulsante Aggiungi al carrello da functions.php
Crea un tema figlio
Prima di aggiungere il pulsante Aggiungi al carrello in Divi, devi creare un tema figlio. Per farlo, utilizzeremo un plugin gratuito per WordPress chiamato Child Themify. Quindi, per prima cosa, devi installare Child Themify sul tuo sito.
Quindi, attivalo.
Successivamente, vedrai le impostazioni del plug-in nella sezione Aspetto .
Dal menu a discesa, dovrai selezionare un tema principale. Nel nostro caso, creeremo un tema figlio per Divi. Quindi, dai un nome al tuo nuovo tema figlio.
Ci sono anche alcune opzioni avanzate, ma non è necessario usarle per questo.
Dopo aver selezionato il tema principale e nominato il tema figlio, premere il pulsante Crea tema figlio .
Successivamente, vai alla sezione Aspetto> Temi e vedrai il nuovo tema figlio. Attivalo.
Ora controlla la pagina del negozio del tuo negozio. Nel nostro caso, abbiamo creato un negozio demo utilizzando alcuni prodotti campione.
Come puoi vedere nello screenshot qui sopra, non c'è il pulsante Aggiungi al carrello. Quindi, quando un utente vuole aggiungere un prodotto al carrello, non può farlo direttamente dalla pagina del negozio. Invece, devono andare alle pagine dei prodotti specifici e aggiungere gli articoli al carrello da lì.
La buona notizia è che esiste un modo semplice per includere un pulsante Aggiungi al carrello nella pagina del negozio. Per fare ciò, dovrai aggiungere alcune righe di codice al tuo tema figlio.
Modifica il file functions.php
Per includere il pulsante Aggiungi al carrello nella pagina del negozio in Divi, vai all'editor del tema e seleziona il file functions.php . Copia il codice qui sotto e incollalo nel tuo file functions.php .
// Questo codice aggiunge i pulsanti "Aggiungi al carrello" a una pagina che mostra il ciclo del negozio add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );
Dopo aver incollato il codice, fare clic su Aggiorna file . E se controlli il frontend della pagina del negozio, vedrai le modifiche.
Hai aggiunto i pulsanti Aggiungi al carrello alla pagina del negozio !
2) Plugin frammenti di codice
In alternativa, invece di aggiornare il file functions.php , puoi includere il pulsante Aggiungi al carrello in Divi usando un plugin. Nella nostra esperienza con WordPress e la personalizzazione, Code Snippets è uno dei migliori strumenti per questo compito.
Prima di tutto, devi installare e attivare il plug-in Code Snippets sul tuo sito.
Quindi, dovrai aggiungere un nuovo snippet al tuo sito web.
Basta nominare il tuo snippet a scopo identificativo, copiare il codice dal basso e incollarlo nel campo Codice.
// Questo codice includerà i pulsanti "Aggiungi al carrello" in una pagina che mostra il ciclo del negozio add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );
Quindi, salva e attiva lo snippet.
Ancora una volta vedrai i pulsanti Aggiungi al carrello nella pagina del tuo negozio.
Come vedi, entrambi i metodi sono molto semplici ed efficaci. Se sei un principiante, ti consigliamo di utilizzare i frammenti di codice. È uno strumento gratuito che ti consente di modificare facilmente i file principali e non interromperà il tuo sito Web.
Come personalizzare il pulsante Aggiungi al carrello
Ora che hai incluso con successo un pulsante Aggiungi al carrello nelle pagine del negozio Divi, devi personalizzare il pulsante.
Per fare ciò, devi specificare una classe CSS personalizzata per il tuo pulsante. Un semplice codice PHP farà il lavoro. Quindi, puoi aggiungere un po' di CSS e personalizzare il pulsante.
Quindi, per farlo, incolla il codice PHP sottostante nella sezione Frammenti di codice come nuovo.
add_action('woocommerce_after_shop_loop_item', 'quadlayers_woocommerce_template_loop_add_to_cart', 10);
add_action('woocommerce_after_shop_loop_item_title', 'quadlayers_woocommerce_template_loop_add_to_cart', 10);
funzione quadlayers_woocommerce_template_loop_add_to_cart(){
woocommerce_template_loop_add_to_cart(array('class'=>'button product_type_simple add_to_cart_button ajax_add_to_cart my_class_here'));
}
Quindi, puoi utilizzare i CSS per modificare il pulsante. In questo codice, abbiamo menzionato le classi CSS predefinite del pulsante come: button product_type_simple add_to_cart_button ajax_add_to_cart . Inoltre, puoi aggiungere la tua classe CSS personalizzata sostituendo my_class_here .
Quando includi CSS aggiuntivi al tuo tema, puoi usare qualcosa come: .my_class { option:value !important; } .my_class { option:value !important; } . Assicurati di sostituire my_class con la tua classe CSS.
Ad esempio, puoi utilizzare un codice CSS come questo:
.woocommerce-LoopProduct-link + a {
/* Il tuo CSS personalizzato qui */
}Il tema Divi viene fornito con un editor CSS personalizzato e puoi incollare tutto il codice CSS lì. D'altra parte, puoi utilizzare la sezione CSS aggiuntiva tramite il tuo personalizzatore di WordPress. Ti consigliamo di utilizzare il Customizer perché ti consente di vedere cosa stai facendo in tempo reale.
Conclusione
Quindi, ecco come puoi facilmente includere un pulsante Aggiungi al carrello nelle pagine del negozio Divi. In questo modo, puoi migliorare il processo di acquisto, offrire ai clienti un'esperienza migliore e aumentare le conversioni. Inoltre, ti aiuterà a ridurre l'abbandono del carrello nel tuo negozio.
Un'altra opzione interessante per aumentare la conversione nel tuo negozio consiste nell'includere link di checkout diretto nel tuo negozio. In questo modo, riduci il processo di acquisto e riduci le possibilità che gli utenti abbandonino. Per ulteriori informazioni a riguardo, consulta la nostra guida su come creare collegamenti di pagamento diretto WooCommerce.
Inoltre, se desideri personalizzare il tuo negozio, ti consigliamo di dare un'occhiata ai seguenti tutorial:
- Come personalizzare la pagina del negozio WooCommerce?
- Aggiungi al carrello funzione in modo programmatico in WooCommerce
- Come implementare il pulsante Aggiungi al carrello AJAX in WooCommerce?
- Come personalizzare la pagina di pagamento di WooCommerce?
Infine, per sfruttare al meglio Divi Theme, puoi dare un'occhiata alle nostre guide:
- Come nascondere e rimuovere il piè di pagina in Divi?
- Il modulo di contatto Divi non funziona? Ecco come risolverlo!
Se hai trovato utile questo articolo, considera di condividere questo post con i tuoi amici sui social media. Aiuterà gli altri a personalizzare le pagine del negozio Divi.
Per ulteriori informazioni su come migliorare le conversioni, dai un'occhiata ai migliori plugin per l'acquisto rapido di WooCommerce.