Come aggiungere dinamicamente una barra del codice coupon a pagine di prodotti specifici con Divi
Pubblicato: 2020-01-09Quando gestisci un negozio online che hai creato con Divi e WooCommerce, di tanto in tanto vorrai mostrare codici coupon sul tuo sito web per aumentare il senso di urgenza. In tutto il Web, noterai che molti negozi online condividono i codici coupon in una barra che è attaccata alla parte superiore della pagina. Ora, con Divi's Theme Builder, puoi aggiungere automaticamente tale barra del codice coupon ai prodotti idonei per il codice coupon.
In questo tutorial, ti mostreremo esattamente come farlo. Ci sono diverse parti in questo tutorial, dall'impostazione del codice coupon alla creazione di un modello di prodotto separato per i prodotti nella categoria di sconto. Potrai anche scaricare gratuitamente il file JSON del modello! Lo stile generale che stiamo utilizzando si basa sul layout della pagina del prodotto in grassetto che abbiamo condiviso in passato.
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica GRATUITAMENTE il modello di pagina del prodotto
Per mettere le mani sul modello della pagina del prodotto, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Panoramica dell'esercitazione
- Assicurati di avere Divi e il plugin WooCommerce installati sul tuo sito web
- Nella prima parte del tutorial, creeremo una nuova categoria di prodotti scontati
- Assegneremo i prodotti idonei a questa nuova categoria di prodotti
- Quindi, creeremo un nuovo codice coupon e ci assicureremo che il codice coupon si applichi solo alla categoria di prodotti che abbiamo creato
- All'interno del generatore di temi, creeremo un nuovo modello per quella particolare categoria di prodotti
- Riutilizzeremo il normale corpo della pagina del prodotto per questo modello e aggiungeremo una barra del codice coupon superiore utilizzando le opzioni integrate di Divi
1. Crea una nuova categoria di prodotti scontati
Vai alle categorie di prodotti e aggiungi una nuova categoria di prodotti scontati
Inizia installando il plug-in WooCommerce sul tuo sito Web WordPress e aggiungi una nuova categoria di prodotti dedicata a tutti i prodotti idonei per il nuovo sconto. Se hai intenzione di utilizzare il codice coupon su categorie di prodotti esistenti, puoi utilizzare quelli invece.
2. Assegna i prodotti alla nuova categoria di sconto
Modifica prodotto
Quindi, apri i prodotti che desideri includere nella vendita.
Assegna i prodotti alla nuova categoria di sconto
E includili nella nuova categoria di prodotti scontati.
3. Crea codice coupon WooCommerce
Vai a Coupon e aggiungi un nuovo coupon
La parte successiva di questo tutorial gestisce la creazione di un nuovo codice coupon. Vai alla dashboard di WordPress > Coupon > E fai clic su "Crea il tuo primo coupon" .
Aggiungi codice coupon e dati coupon
Aggiungi il codice coupon in alto e seleziona le impostazioni generali che desideri applicare al tuo codice coupon.
- Codice sconto: Aggiungi codice sconto
- Tipo di sconto: Sconto percentuale
- Importo del coupon: Aggiungi percentuale
- Data di scadenza del coupon: Seleziona la data
Aggiungi limitazione di utilizzo
Quindi, passa alla limitazione di utilizzo e assicurati che il codice coupon funzioni solo sui prodotti all'interno della tua categoria di prodotti scontati.
- Categorie di prodotti: Sconto
4. Aggiungi un nuovo modello per la categoria di sconto
Aggiungi nuovo modello
Una volta creato il codice coupon, è il momento di includerlo nelle pagine dei prodotti pertinenti! Per farlo, vai al Divi Theme Builder e aggiungi un nuovo modello.
Usa acceso
Usa questo nuovo modello nella categoria di prodotti scontati.
- Utilizzare su: prodotto in una categoria di prodotto specifica: sconto
5. Riutilizza il corpo della pagina del prodotto globale per il nuovo modello
Trascina il corpo del modello del prodotto nel corpo del nuovo modello
Puoi riutilizzare il corpo del modello della pagina del prodotto normale semplicemente trascinandolo sul nuovo modello. In questo tutorial, utilizziamo il layout di pagina del prodotto in grassetto che abbiamo creato in un altro tutorial. Puoi scaricare il file JSON del layout nel post del blog.
6. Aggiungi la barra del codice coupon superiore al corpo del nuovo modello
Entra nell'editor dei modelli del corpo
Dopo aver aggiunto il corpo della pagina del prodotto al nuovo modello, puoi iniziare a modificarlo. Le modifiche apportate a questo modello verranno visualizzate solo nelle pagine dei prodotti che fanno parte della categoria di prodotti scontati.
Aggiungi una nuova sezione all'inizio
All'interno dell'editor dei modelli, la prima cosa che faremo è aggiungere una nuova sezione in alto.
Colore di sfondo
Apri le impostazioni della sezione e cambia il colore di sfondo.
- Colore di sfondo: #e02b20
Spaziatura
Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Animazione
Completa le impostazioni della sezione aggiungendo un'animazione.
- Stile di animazione: diapositiva
- Direzione animazione: Giù
- Durata dell'animazione: 1500 ms
- Ritardo animazione: 1000 ms
- Opacità iniziale dell'animazione: 100%
- Curva di velocità dell'animazione: facilità di entrata e uscita
- Ripetizione animazione: una volta
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Dimensionamento
Apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza del contenitore della sezione.
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Equalizza le altezze delle colonne: Sì
Spaziatura
Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Colonna 1
Spaziatura
Quindi, apri le impostazioni della colonna 1 e aggiungi un'imbottitura superiore e inferiore.
- Imbottitura superiore: 25px
- Imbottitura inferiore: 25px
Colonna 2
Colore di sfondo
Apri anche le impostazioni della colonna 2 e aggiungi un colore di sfondo bianco.
- Colore di sfondo: #ffffff
Spaziatura
Aggiungi anche un riempimento personalizzato superiore e inferiore a questa colonna.
- Imbottitura superiore: 20px
- Imbottitura inferiore: 20px
Frontiera
E includi un raggio del bordo superiore sinistro e destro.
- In alto a sinistra + in alto a destra: 30px
Aggiungi modulo di testo alla colonna 1
Aggiungi contenuto
Il primo e unico modulo di cui abbiamo bisogno nella colonna 1 è un modulo di testo. Inserisci una copia a tua scelta.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Montserrat
- Colore del testo: #ffffff
- Dimensione del testo: 16px
- Allineamento del testo: Centro
Aggiungi modulo di testo alla colonna 2
Aggiungi il codice coupon alla casella dei contenuti
Nella seconda colonna, aggiungi un altro modulo di testo con il codice sconto che hai aggiunto nella prima parte del tutorial.
Impostazioni testo
Modificare le impostazioni del testo del modulo come segue:
- Carattere del testo: Montserrat
- Peso del carattere del testo: pesante
- Colore del testo: #000000
- Dimensione del testo: 19px
- Allineamento del testo: Centro
Dimensionamento
Quindi, modificare le impostazioni di dimensionamento.
- Larghezza: 50%
- Allineamento del modulo: Centro
Spaziatura
Aggiungi anche un po' di imbottitura sul fondo.
- Imbottitura inferiore: 10px
Frontiera
E completa le impostazioni del modulo aggiungendo un bordo inferiore.
- Larghezza bordo inferiore: 1px
- Colore bordo inferiore: #333333
7. Salva le modifiche del generatore di temi e visualizza il risultato
Una volta completata la pagina del prodotto modificata, puoi salvare le modifiche al modello, uscire dal Theme Builder e visualizzare il risultato sulle pagine del prodotto in sconto!
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come creare una barra del codice coupon e consentirne la visualizzazione automatica sulle pagine dei prodotti idonee per il codice coupon in questione. Questo è un ottimo modo per dare un ulteriore incentivo ai visitatori ad acquistare i tuoi prodotti. Sei stato anche in grado di scaricare gratuitamente il file JSON del modello! Se hai domande, assicurati di lasciare un commento nella sezione commenti qui sotto.
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.