Il widget Aggiungi al carrello consente ai clienti di aggiungere prodotti al proprio carrello virtuale. Questo è un widget di modello di prodotto singolo. Puoi aggiungere questo widget per progettare la pagina del tuo singolo prodotto utilizzando ShopEngine.

Impariamo come utilizzare il widget Aggiungi al carrello sul tuo sito wooCommerce:

Passaggio 1: attiva il widget #

Per abilitare il widget,

• Vai a: ShopEngine > Widget > Aggiungi al carrello 
• Accendere 
• Salvare le modifiche

Nota: Puoi anche attivare Stock prodotti con un'impostazione globale che attiva tutti i widget di ShopEngine allo stesso tempo.

Passaggio 2: aggiungi Aggiungi al carrello Aggeggio #

Prima di poter aggiungere il widget devi prima creare un modello di prodotto singolo. Consulta la documentazione su come creare un modello di prodotto singolo.

Aggiungere Aggiungi al carrello:

• Vai a ShopEngine > Modelli > Modello di pagina di prodotto singolo
• Clicca su Modifica con ElementoR

• Ricerca per Aggiungi al carrello nell'opzione Ricerca elementi
• Trascinare e rilasciare il widget 
• Clicca su Aggiornamento per salvare le modifiche.

Passaggio 3: Impostazioni di Aggiungi al carrello #

Vai a Contenuti > Impostazioni per personalizzare le seguenti opzioni:

• Impostazioni quantità:
  • Stile pulsante: Puoi cambiare lo stile del pulsante. Puoi impostare i pulsanti di aumento (+) e diminuzione (-) su entrambi i lati, entrambi a sinistra, entrambi a destra oppure puoi lasciarlo come predefinito. Hai anche la possibilità di scegliere personalizzato Icona più (+) E Icona meno (-).
• Azione:
  • Mostra lo stato delle scorte: Puoi mostrare lo stato delle scorte attivando questa opzione.
• Variazione:
  • Descrizione della variazione: Attiva questa opzione per mostrare la descrizione della variante del prodotto.
• Ordinamento dei dati:
  • Abilita ordinamento: Abilita questa opzione per personalizzare la posizione di Quantità, Aggiungi al carrello, Check out rapido, Lista dei desideri e posizione di confronto. Puoi usare il valore – per la posizione, minore è il valore (- 5) avrà maggiore priorità.
  • Posizione quantità: Non è possibile modificare questa opzione per i prodotti di gruppo. In tal caso, questa opzione sarà sempre la prima.

Compila il resto dei valori in base all'ordine in cui desideri che appaiano e fai clic su Aggiornamento salvare.

Passaggio 4: Impostazioni di stile di Aggiungi al carrello #

Passa alla scheda Stile per accedere a tutte le opzioni di stile.

Espandi Stato delle scorte e modificare le seguenti impostazioni:

• Tipografia:  Qui puoi modificare la famiglia di caratteri, la dimensione del carattere, lo spessore del carattere, la trasformazione e l'altezza della linea per il testo dello stato delle scorte.
• Allineamento: Puoi scegliere l'allineamento a sinistra, a destra o al centro.
• Colore disponibile: Scegli il colore del testo quando il prodotto è disponibile.
• Colore esaurito: Scegli il colore per il testo quando il prodotto è esaurito.

Espandere Pulsante Aggiungi al carrello per modificare le seguenti opzioni di stile:

• Tipografia:  Puoi modificare la famiglia di caratteri, la dimensione e lo spessore del carattere, la trasformazione e l'altezza della linea per il pulsante Aggiungi al carrello qui.
• Normale/al passaggio del mouse: Cambia il colore e il colore dello sfondo sia per la visualizzazione normale che per quella al passaggio del mouse.
• Tipo di confine: puoi scegliere che il tipo di bordo sia solido, punteggiato, tratteggiato doppio o nessuno.
• Larghezza: Seleziona la larghezza superiore, sinistra, destra e inferiore del bordo.
• Colore: Scegli un colore per il bordo.
• Raggio del bordo: Inserisci i valori superiore, destro, inferiore e sinistro per il raggio.
• Imbottitura: Regola l'imbottitura superiore, sinistra, destra e inferiore.
• Margine: Se lo desideri, dai un margine in alto, a sinistra, a destra e in basso.

Espandere Immissione della quantità per modificare le seguenti opzioni di stile:

• Tipografia:  Puoi modificare la famiglia di caratteri, la dimensione del carattere, lo spessore del carattere, la trasformazione e l'altezza della linea per l'opzione di input della quantità.
• Colore: Scegli un colore per il testo relativo alla quantità.
• Colore di sfondo: Se lo desideri, puoi modificare il colore dello sfondo da qui.
• Pulsante Più Meno:
  • Dimensioni dell'icona: Seleggere la dimensione del pulsante più-meno.
  • Colore e sfondo: Cambia il colore e il colore dello sfondo sia per la vista normale che per quella al passaggio del mouse.
• Imbottitura pulsanti: Fornire un valore di riempimento attorno al pulsante.
• Imbottitura di input: Assegna un valore di riempimento attorno al campo di input.
• Tipo di bordo: puoi scegliere che il tipo di bordo sia solido, punteggiato, tratteggiato doppio o nessuno.
• Larghezza: Seleziona la larghezza superiore, sinistra, destra e inferiore del bordo.
• Colore: Scegli un colore per il bordo.
• Raggio del bordo: Inserisci i valori superiore, destro, inferiore e sinistro per il raggio.
• Margine di avvolgimento: Fornire un valore superiore, destro, sinistro e inferiore per il margine.

Espandere Variazioni per modificare le seguenti opzioni di stile:

• Allineamento: Puoi scegliere l'allineamento a sinistra, a destra o al centro.
• Etichetta/ Descrizione/ Prezzo: Cambia le schede e modifica la tipografia, il colore, lo stile di visualizzazione dell'etichetta, la descrizione e il prezzo.
• Larghezza etichetta:  Seleziona qui la larghezza dell'etichetta in pixel.
• Margine elemento variazione (px): Seleziona qui il margine tra gli elementi di variazione.
• Margine di avvolgimento della variazione: Fornire i valori superiore, sinistro, destro e inferiore per il margine di avvolgimento della variazione.
• Menu a discesa delle varianti: Scegli il colore del menu a discesa qui.
• Tipo di bordo: puoi scegliere che il tipo di bordo sia solido, punteggiato, tratteggiato doppio o nessuno.
• Larghezza: Seleziona la larghezza superiore, sinistra, destra e inferiore del bordo.
• Colore: Scegli un colore per il bordo.
• Raggio del bordo: Inserisci i valori superiore, destro, inferiore e sinistro per il raggio.

Espandere Campioni di variazione per modificare le seguenti opzioni di stile relative ai campioni di variazione:

• Colore/Immagine/Etichetta: Passa a ciascuna scheda per impostare la larghezza del campione, l'altezza del campione e il raggio del bordo per colore, immagine ed etichetta.
• Tipo di confine: è possibile scegliere il tipo di bordo tra solido, punteggiato, tratteggiato doppio o nessuno.
• Larghezza: Seleziona la larghezza superiore, sinistra, destra e inferiore del bordo.
• Colore: Scegli un colore per il bordo.
• Colore bordo selezionato: Scegli un colore del bordo per gli elementi selezionati.

Espandere Lista dei desideri per modificare le seguenti opzioni di stile relative alle liste dei desideri:

• Dimensione dell'icona: Seleziona la dimensione dell'icona per la lista dei desideri.
• Normale/al passaggio del mouse: Scegli il colore e il colore dello sfondo sia per la visualizzazione normale che per quella al passaggio del mouse.
• Tipo di confine: è possibile scegliere il tipo di bordo tra solido, punteggiato, tratteggiato doppio o nessuno.
• Larghezza: Seleziona la larghezza superiore, sinistra, destra e inferiore del bordo.
• Colore: Scegli un colore per il bordo.
• Raggio del bordo: Inserisci i valori superiore, destro, inferiore e sinistro per il raggio.
• Imbottitura: Regola l'imbottitura superiore, sinistra, destra e inferiore.
• Margine: Se lo desideri, dai un margine in alto, a sinistra, a destra e in basso.

Clicca su Aggiornamento per salvare tutte le modifiche apportate.

Ecco un'anteprima del widget Aggiungi al carrello: