Come aggiungere un pulsante Aggiungi al carrello personalizzato in WooCommerce

Vuoi imparare come aggiungere un pulsante di aggiunta al carrello personalizzato in WooCommerce?

La personalizzazione dei pulsanti sul tuo negozio WooCommerce può aiutarti a catturare l'attenzione, migliorando i tassi di conversione e le vendite.

In questo articolo, ti mostreremo come aggiungere un pulsante personalizzato per aggiungere al carrello in WooCommerce passo dopo passo.

Perché personalizzare il tuo pulsante Aggiungi al carrello di WooCommerce?

La modifica del pulsante Aggiungi al carrello ti aiuta ad allinearlo ai prodotti WooCommerce che vendi. Se rimani con il pulsante del carrello predefinito, potrebbe non essere completamente correlato al tipo di prodotto.

Ad esempio, potresti voler modificare il testo dell'aggiunta al carrello e sostituirlo con un'icona o una casella di controllo per più prodotti. In alternativa, potresti voler cambiare il colore del pulsante per risaltare maggiormente sul tuo sito.

Potresti anche voler mostrare i pulsanti del carrello altrove sul tuo sito WooCommerce, come la pagina di pagamento, le categorie e la pagina del carrello degli acquisti.

Per eseguire una delle operazioni precedenti, avrai bisogno di un modo per personalizzare facilmente il tuo pulsante Aggiungi al carrello, con il minimo sforzo.

Come aggiungere un pulsante Aggiungi al carrello personalizzato in WooCommerce

Fortunatamente, condividiamo 2 metodi per creare un pulsante di aggiunta al carrello personalizzato di WooCommerce. Il primo metodo utilizza un plug-in WordPress semplice e potente e il secondo metodo mostra come personalizzare i pulsanti del carrello manualmente senza un plug-in.

Metodo 1: aggiungi un pulsante Aggiungi al carrello personalizzato con SeedProd

Per il primo metodo, utilizzeremo SeedProd, il miglior costruttore di siti Web per WordPress.

Questo potente plug-in include un generatore di pagine drag-and-drop che ti consente di personalizzare qualsiasi parte del tuo sito Web senza codice. Puoi creare temi WordPress personalizzati, creare landing page ad alta conversione e personalizzare qualsiasi layout con punta e clicca.

Poiché SeedProd include il supporto WooCommerce, puoi usarlo per progettare e lanciare interi siti WooCommerce senza uno sviluppatore. Segui i passaggi seguenti per utilizzare SeedProd per aggiungere un pulsante di aggiunta al carrello personalizzato al tuo sito WooCommerce.

Passaggio 1. Installa e attiva SeedProd

Per prima cosa, vai alla pagina dei prezzi di SeedProd e scegli il tuo piano SeedProd. Per accedere alle funzionalità di WooCommerce, avrai bisogno del piano SeedProd Elite .

Quindi, accedi al tuo account SeedProd, fai clic sulla scheda Download e scarica il file .zip del plug-in. Puoi anche copiare la chiave di licenza nella stessa pagina.

Ora puoi caricare il plug-in sul tuo sito Web WordPress. Se hai bisogno di aiuto con questo, segui questa guida sull'installazione e l'attivazione di un plugin per WordPress.

Dopo aver installato SeedProd, vai alla pagina SeedProd »Impostazioni e incolla la chiave di licenza che hai salvato in precedenza.

Assicurati di fare clic sul pulsante Verifica chiave prima di andare al passaggio successivo.

Nota: SeedProd ti consente di aggiungere pulsanti personalizzati di aggiunta al carrello a WooCommerce in 2 modi:

• Utilizzo di una pagina di destinazione
• Creazione di un tema WooCommerce personalizzato

Per questo tutorial, creeremo un tema WooCommerce personalizzato perché crea automaticamente tutte le pagine del tuo negozio WooCommerce.

Passaggio 2. Scegli un kit per siti Web

Per il passaggio successivo, vai alla pagina SeedProd »Costruttore di temi. Qui è dove puoi costruire le diverse parti del tuo tema WooCommerce e personalizzare il design di ogni modello.

Puoi farlo costruendo ogni parte da zero o utilizzando un kit di siti Web prefabbricato. Andremo con la seconda opzione perché è più facile e veloce.

Per scegliere un Website Kit, clicca sul pulsante Temi .

Nella schermata successiva, vedrai i kit del sito Web disponibili. I kit compatibili con WooCommerce avranno "WooCommerce" accanto ai loro titoli.

Puoi quindi passare il mouse su un design che ti piace e fare clic sull'icona del segno di spunta per importarlo nel tuo Generatore di temi.

Per questa guida, utilizziamo il kit del sito Web WooCommerce di Pottery Shop .

Dopo aver importato il tuo Website Kit, vedrai le singole parti del tuo tema in un elenco come questo:

SeedProd crea automaticamente pagine di contenuto, come le tue informazioni, carrello, checkout e pagine di contatto. Puoi visualizzare queste pagine andando su Pagine »Tutte le pagine dalla dashboard di WordPress e personalizzarle con il generatore di pagine drag-and-drop di SeedProd.

Iniziamo il processo di personalizzazione personalizzando il tuo pulsante di aggiunta al carrello di WooCommerce.

Passaggio 3. Personalizza il pulsante Aggiungi al carrello

Di seguito ti mostreremo come aggiungere un pulsante di aggiunta al carrello personalizzato in WooCommerce nelle pagine del tuo negozio, prodotto, archivio prodotti e blog.

Aggiunta di un pulsante Aggiungi al carrello della pagina del negozio personalizzata

Innanzitutto, inizieremo modificando la pagina del tuo negozio WooCommerce. Per fare ciò, trova la parte del modello Pagina negozio e fai clic sul collegamento Modifica design .

La tua pagina del negozio WooCommerce si aprirà nel generatore di pagine drag-and-drop di SeedProd, dove puoi personalizzare il tuo design senza codice.

Puoi fare clic sull'anteprima dal vivo per modificare qualsiasi elemento della pagina e personalizzarne le impostazioni. Allo stesso modo, puoi trascinare i blocchi dal pannello di sinistra e rilasciarli sulla tua pagina per aggiungere più contenuti.

Per impostazione predefinita, il modello Pagina negozio utilizza il blocco Griglie prodotti . Facendo clic su di esso verranno visualizzate le impostazioni per controllare l'aspetto delle schede di prodotto.

Ad esempio, puoi modificare il numero di colonne, filtrare i prodotti per ID prodotto, Query o Tipo e modificare l'ordine in cui vengono visualizzati.

Puoi anche fare clic sulla scheda Avanzate per visualizzare più opzioni di personalizzazione, inclusi stili di carattere, colori, bordi e altro.

Nella sezione Pulsanti, puoi personalizzare il tuo pulsante di aggiunta al carrello di WooCommerce con pochi clic. Ad esempio, nel menu a discesa Stile pulsante, puoi scegliere:

• Appartamento
• 2D
• Vintage ▾
• Fantasma
• Collegamento

Inoltre, puoi modificare il colore del pulsante, la tipografia, le dimensioni e il raggio del bordo.

Sperimenta le opzioni di personalizzazione per trovare un look adatto alle tue esigenze aziendali. Quindi, premi il pulsante Salva nell'angolo in alto a destra per memorizzare le modifiche e fai clic sull'icona X per tornare al Generatore di temi.

Modifica del pulsante Aggiungi al carrello della pagina del prodotto

Ora diamo un'occhiata alla personalizzazione del pulsante Aggiungi al carrello sulle pagine dei singoli prodotti. Dovrai trovare il modello di pagina del prodotto e fare clic sul collegamento Modifica design per aprirlo.

Questa volta, vedrai i dettagli del singolo prodotto all'interno dell'editor visivo di SeedProd.

Per impostazione predefinita, visualizzerà:

• Immagine del prodotto
• Titolo del prodotto
• Prezzo del prodotto
• breve descrizione
• Pulsante Aggiungi al carrello
• Schede dei dati del prodotto

Puoi personalizzare ogni elemento facendo clic su di essi per mostrarne le impostazioni. Ad esempio, facendo clic sul pulsante Aggiungi al carrello puoi modificare il testo del pulsante in qualcosa di più accattivante.

Puoi anche modificare l'allineamento dei pulsanti e aggiungere un'icona dalla libreria di icone di Font Awesome.

La scheda Avanzate ti consentirà di modificare i colori, la tipografia, le ombre e la spaziatura dei pulsanti come prima.

Modifica del pulsante del carrello degli archivi dei prodotti

La modifica del pulsante Aggiungi al carrello negli archivi dei prodotti segue un processo simile alla pagina del tuo negozio. Trova semplicemente la parte del modello Archivi prodotti e fai clic sul collegamento Modifica design per aprirlo nell'editor visivo.

Il blocco utilizzato da SeedProd in questa pagina è il blocco Archive Products . Gli utenti vedranno questa pagina se fanno clic sull'intestazione di una categoria di prodotto o utilizzano la barra di ricerca del tuo negozio.

Questo blocco non visualizzerà un'anteprima nell'editor visivo live; tuttavia, puoi ancora personalizzare ciò che il blocco mostra sul front-end aprendo le sue impostazioni.

Ad esempio, puoi modificare il numero di colonne, mostrare gli articoli per conteggio e ordinare per filtro. Inoltre, puoi abilitare il filtraggio per Query, come ad esempio:

• Interroga per attributo
• Seleziona Per tag
• Seleziona per categoria
• Seleziona per prodotto SKU
• Seleziona Per gruppo
• Seleziona Per visibilità

Quindi, nella scheda Avanzate , puoi personalizzare il pulsante Aggiungi al carrello modificandone i colori, il carattere, la spaziatura, le dimensioni e altro.

Aggiunta di un pulsante Aggiungi al carrello personalizzato sulla pagina del blog

La pagina del tuo blog è un altro luogo in cui puoi visualizzare un pulsante Aggiungi al carrello. In questo modo, puoi consigliare prodotti dopo i post del blog per aumentare le vendite.

Per farlo con SeedProd, trova il modello di Pagina del blog e fai clic sul collegamento Modifica design .

Per impostazione predefinita, la pagina del tuo blog visualizzerà un elenco dei tuoi ultimi post del blog, ma puoi personalizzarlo per includere qualsiasi altro contenuto che ti piace.

Aggiungiamo una sezione a questa pagina che mostra un nuovo prodotto. Innanzitutto, trascina un blocco di colonne sulla pagina e scegli un layout di colonne.

Quindi, scegli il blocco Immagine e aggiungi un'immagine del prodotto.

Nella seconda colonna, puoi utilizzare i blocchi Intestazione e Paragrafo per il titolo e la descrizione del tuo prodotto. Quindi, trascina il pulsante Aggiungi al carrello in modo che gli utenti possano aggiungere il prodotto al carrello.

Ora, fai clic sul blocco per aprire le sue impostazioni e aggiungere il testo del pulsante di aggiunta al carrello personalizzato.

Avrai anche bisogno dell'ID prodotto per quel prodotto specifico. Puoi trovarlo andando su Prodotti »Tutti i prodotti dalla dashboard di WordPress e copiando il valore ID.

Successivamente, puoi incollare l'ID nel campo ID prodotto sul pulsante Aggiungi al carrello. Ciò garantirà che un prodotto specifico venga aggiunto al carrello dopo aver fatto clic sull'URL Aggiungi al carrello.

Ricordati di fare clic sul pulsante Salva per salvare le modifiche.

Passaggio 4. Salva e pubblica le modifiche

Quando sei soddisfatto dell'aspetto delle tue pagine WooCommerce, sei pronto per far vivere il tuo negozio. Per farlo, torna al Generatore di temi e, nell'angolo in alto a destra, ruota l' interruttore Abilita tema SeedProd sulla posizione "Attivo".

Diamo un'occhiata ad alcune delle pagine che abbiamo personalizzato:

Pagina del negozio

Pagina del prodotto

Pagina di archivio

Pagina del blog

Metodo 2: aggiungi un pulsante Aggiungi al carrello personalizzato con il codice

Il prossimo metodo che ti mostreremo prevede la modifica del codice sul tuo sito Web WordPress. In genere non consigliamo di farlo se sei un principiante perché può danneggiare il tuo sito web.

Detto questo, capiamo che alcune persone non vogliono sovrascrivere completamente il design del loro sito Web esistente.

Prima di iniziare, ti suggeriamo di creare un tema figlio per assicurarti di non perdere le modifiche quando aggiorni il tuo tema WordPress. Dovresti anche eseguire il backup del tuo sito WordPress per ripristinarlo in sicurezza se qualcosa va storto.

Poiché gestiremo frammenti di codice per questo metodo, è una buona idea installare un plug-in per frammenti di codice, come WPCode. Ciò significa che non sarà necessario modificare direttamente i file del tema.

Quando hai tutto pronto, puoi iniziare ad aggiungere manualmente pulsanti di aggiunta al carrello personalizzati in WooCommerce.

Modifica il testo del pulsante Aggiungi al carrello nelle pagine dei prodotti

Per prima cosa, esamineremo la modifica del testo del pulsante Aggiungi al carrello in WooCommerce. Ad esempio, potresti voler cambiare il testo del pulsante in "Compra questo articolo".

Per farlo, crea uno snippet di codice personalizzato in WPCode e incolla il seguente codice PHP:

add_filter('woocommerce_product_single_add_to_cart_text','SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce(){
return __('Buy this item', 'woocommerce');
}

Salva le modifiche, quindi quando visualizzi un singolo prodotto, vedrai il testo del tuo nuovo pulsante Aggiungi al carrello.

Cambia il colore del pulsante Aggiungi al carrello

Se vuoi cambiare il colore del tuo pulsante Aggiungi al carrello, dovrai aggiungere alcuni CSS personalizzati. Puoi farlo andando su Aspetto »Personalizza» CSS aggiuntivo dalla dashboard di WordPress.

Ora incolla il seguente codice CSS:

.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

Puoi fare lo stesso per le pagine dell'archivio prodotti incollando il seguente snippet di codice CSS:

.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

Ecco qua!

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un pulsante di aggiunta al carrello personalizzato in WooCommerce.

Potrebbe piacerti anche questo post: Come modificare un menu in WordPress per la navigazione personalizzata.

Pronto a personalizzare i tuoi pulsanti di aggiunta al carrello di WooCommerce?

Grazie per aver letto. Seguici su YouTube, Twitter e Facebook per contenuti più utili per far crescere la tua attività.