Campioni di variazione per WooCommerce? Ecco come impostarli

Pubblicato: 2023-03-17

Probabilmente hai già visto campioni di variazione sui siti di e-commerce. Sono i selettori visivi disponibili quando si scelgono le varianti di prodotto. E puoi imparare come utilizzare i campioni di variazione per WooCommerce senza alcuna conoscenza di codifica. In questo modo, il tuo cliente vede effettivamente le trame, i colori e altre differenze tra le varianti del prodotto, aiutandolo a decidere quale acquistare.

Hai tre opzioni ️ per aggiungere e utilizzare campioni di variazione per WooCommerce:

  1. Usa un plug-in che aggiunge campioni di variazione al tuo tema attuale
  2. Installa un nuovo tema e-commerce con campioni inclusi
  3. Codice personalizzato i campioni nel tuo sito attuale

Ottenere un nuovo tema non è realistico per molti utenti, considerando che non c'è motivo di scambiare un tema perfettamente valido solo per una funzione. E la codifica personalizzata richiede abilità speciali (o l'assunzione di qualcuno che possa svolgere quel lavoro). Ecco perché consigliamo vivamente di installare un plug-in per utilizzare i campioni di variazione per WooCommerce.

In questa guida imparerai passo dopo passo come impostare campioni di variazione per WooCommerce utilizzando un plug-in senza codice.

Come impostare i #campioni di variazione per #WooCommerce
Fai clic per twittare

Perché i campioni di variazione?

WooCommerce viene già fornito con un menu a discesa delle varianti predefinito. Inoltre, molti temi WooCommerce includono pulsanti di variazione di stile. Quindi, qual è il punto di mettere campioni sulle varianti del tuo prodotto?

  1. Per migliorare l'esperienza di acquisto : una variante di prodotto basata su testo dice poco sulla variante oltre al suo nome; l'aggiunta di immagini garantisce che il cliente non faccia clic su varianti a cui non è interessato e, pertanto, trascorre meno tempo a fare clic senza pensare.
  2. Per sostituire ciò che manca con lo shopping online : i campioni visivi offrono ai clienti uno sguardo alle trame, ai colori e persino alle forme dei prodotti, cose che spesso possono ottenere solo entrando in un negozio fisico.
  3. Per aumentare le conversioni : con un processo di acquisto più veloce e i clienti che si sentono più sicuri di ciò che stanno guardando, puoi aumentare le possibilità che acquistino prodotti.

Quindi, preferiresti scegliere le varianti di prodotto predefinite di WooCommerce? Come questo:

Varianti del menu a tendina di Woocommerce

O preferiresti elevare l'aspetto e l'esperienza delle tue varianti incorporando campioni basati su immagini e colori? Come questo:

visualizzare il tipo di colore dei campioni

Se scegli gli eleganti campioni di prodotti per WooCommerce, continua a leggere per imparare ad aggiungerli al tuo sito di e-commerce.

Come utilizzare i campioni di variazione per WooCommerce

Per il modo più semplice per impostare campioni di variazione per WooCommerce, puoi utilizzare il plug-in Sparks per WooCommerce.

Senza richiedere alcuna conoscenza tecnica, ti consente di aggiungere campioni di variazione a qualsiasi tema WooCommerce e supporta campioni utilizzando etichette, immagini o colori.

Per seguire questo tutorial, supponiamo che tu abbia già installato WooCommerce con i prodotti aggiunti al tuo negozio. Da lì, tratteremo come aggiungere campioni di variazione al tuo negozio.

  • Passaggio 1: installa il plug-in Sparks per WooCommerce
  • Passaggio 2: aggiungi un attributo
  • Passaggio 3: configurare i termini per l'attributo
  • Passaggio 4: considera un tipo di campione di variante diverso (facoltativo)
  • Passaggio 5: crea varianti di prodotto per un articolo WooCommerce
  • Passaggio 6: visualizza i campioni di variazione per WooCommerce in azione

Passaggio 1: installa il plug-in Sparks per WooCommerce

Per iniziare, installa e attiva il plug-in Sparks per WooCommerce.

Per completare la configurazione, vai su Impostazioni > Sparks su WordPress. Fare clic sul pulsante Attiva sotto Campioni di variazione .

attivazione di campioni di variazione per WooCommerce

Nota: Sparks per WooCommerce offre anche altre funzionalità che puoi attivare in questa pagina. Ad esempio, potresti attivare funzionalità come liste dei desideri dei prodotti, visualizzazioni rapide dei prodotti, confronti dei prodotti, recensioni avanzate dei prodotti e pagine di ringraziamento personalizzate, solo per citarne alcune.

Passaggio 2: aggiungi un attributo

Affinché Sparks inserisca campioni di varianti visive nelle pagine dei prodotti, è necessario creare attributi e varianti di prodotto per i prodotti WooCommerce.

Ecco una guida completa su come configurare le varianti di WooCommerce e i prodotti variabili.

Spiega che:

  • Gli attributi sono descrittori di prodotti, come materiale, colore o taglia
  • Le variazioni sono le scelte che i clienti fanno, come il modo in cui un cliente sceglie tra una scarpa blu e una rossa

Devi creare un attributo per ogni variazione che desideri includere nel tuo negozio, poiché le varianti di prodotto si basano sugli attributi.

Per iniziare, crea un attributo globale: qualcosa come colore, trama o stile.

Completa questa attività andando su Prodotti > Attributi nella dashboard di WordPress.

Aggiungi un nome descrittivo per l'attributo, un titolo rappresentativo dell'intero gruppo di varianti che intendi mostrare. Per questa guida, useremo "Color" .

aggiungendo un nome a un attributo

Utilizza il campo a discesa Tipo per selezionare il tipo di campione di variazione che desideri mostrare. Questa è una funzionalità del plug-in Sparks.

Ecco i tipi di campioni di variazione per WooCommerce:

  • Colore : scegli i colori e questi appaiono come campioni
  • Immagine : carichi immagini che fungono da campioni di varianti
  • Etichetta : digiti etichette di testo per i campioni (nessun colore visivo o immagini, solo testo)

Fare clic su Aggiungi attributo per salvare.

scegliere un tipo per i campioni di variazione per WooCommerce

Passaggio 3: configurare i termini per l'attributo

I "termini" si riferiscono agli elementi dell'attributo che intendi salvare sotto il nome dell'attributo generale. In Color , ad esempio, puoi aggiungere termini come Red , Blue e Green . Trova l'attributo creato di recente nell'elenco a destra. Fare clic su Configura termini per procedere.

andando a configurare i termini

Crea un termine di attributo per ogni variazione che desideri per il prodotto. Per prima cosa, aggiungi un Nome .

dandogli un nome

Scorri verso il basso per caricare un'immagine per quel termine variante. Fare clic sul pulsante Aggiungi nuovo per salvare il termine.

aggiunta di un'immagine ai campioni di variazione per WooCommerce

Man mano che continui ad aggiungere altri termini, vengono visualizzati tutti nell'elenco, classificati in base a una variante.

Ad esempio, abbiamo i termini Nero, Grigio, Rosa, Arcobaleno e Bianco nell'attributo Colore.

guardando i colori dei prodotti con le immagini come campioni

Passaggio 4: considera un tipo di campione di variante diverso (facoltativo)

Come accennato, puoi scegliere un campione Colore , Immagine o Etichetta . Se preferisci non caricare immagini da utilizzare come campioni, scegli Colore o Etichetta durante la creazione di un attributo.

decidere i tipi di campioni di variazione per WooCommerce

Quando crei i termini per i tipi di colore , c'è un'opzione per digitare un codice esadecimale del colore o scegliere dal selettore di colore.

scegliere un colore

Vedrai esempi visivi di come appaiono i campioni di colore mentre salvi i termini.

visualizzare i campioni di variazione di colore per WooCommerce

Se opti per il tipo di campione Etichetta, stai semplicemente creando pulsanti di testo per i tuoi campioni. Pertanto, aggiungeresti un'etichetta di testo durante la creazione di ciascun termine di attributo.

aggiungendo un'etichetta

Al termine, è possibile visualizzare un'anteprima di tutti i termini dell'etichetta.

visualizzare tutti i termini per i campioni di variazione dell'etichetta per WooCommerce

Passaggio 5: crea varianti di prodotto per un articolo WooCommerce

L'attributo è un articolo globale che puoi aggiungere a più prodotti nel tuo negozio. Per visualizzare i campioni sul frontend, devi creare varianti di prodotto per ciascun articolo.

Vai a Prodotti > Tutti i prodotti e seleziona l'articolo che desideri modificare.

andare alla pagina di un prodotto

Scorri fino alla sezione Dati prodotto . Fai clic sul menu a discesa Tipo di prodotto e scegli Prodotto variabile .

prodotto variabile

Apri la scheda Attributi . Qui, utilizza il menu a discesa per selezionare l'attributo salvato in precedenza. In questo caso, Color .

scegliendo un attributo che hai creato prima

Fare clic sul pulsante Aggiungi per allegare questo attributo al prodotto variabile.

aggiungendo l'attributo

Aggiungi ciascuno dei valori necessari. Assicurati di selezionare la casella Utilizzato per variazioni per allegare questi valori alle variazioni necessarie. Fai clic sul pulsante Salva attributi quando hai finito.

utilizzando campioni di variazione per WooCommerce

Successivamente, apri la scheda Variazioni in Dati prodotto .

Vedrai un menu a discesa Aggiungi variante ; lascialo così com'è e seleziona il pulsante Vai . Questo inserisce una variazione vuota. Devi inserire una variante vuota per tutte le varianti che desideri per il prodotto. Quindi, utilizza il campo a discesa per ogni variante da aggiungere dai tuoi salvataggi, come Nero, Grigio, Rosa e Bianco.

In alternativa, puoi impostare il menu a discesa su Crea variazioni da tutti gli attributi e fare clic sul pulsante Vai . Questo creerà automaticamente varianti di prodotto per tutti gli attributi scelti, il che può farti risparmiare tempo se hai molte varianti.

aggiungendo una variante

Con tutte le varianti aggiunte, devi comunque modificare le varianti per includere prezzi e immagini. Uno per uno, fai clic sui link Modifica accanto a ogni variante. Questo apre un pannello delle impostazioni per ogni variante.

facendo clic sul pulsante di modifica

Fai clic per caricare un'immagine . Aggiungi anche un Prezzo Normale , anche se tutte le varianti hanno lo stesso prezzo; WordPress non visualizzerà i campioni di variazione per WooCommerce se le varianti non hanno il proprio prezzo.

digitando un prezzo

Esamina tutte le singole varianti per aggiungere un'immagine (unica per quella variante) e un prezzo normale .

Fai clic su Salva modifiche nella parte inferiore della scheda Varianti .

aggiungendo un prezzo e un'immagine per la variazione

Fai clic per aggiornare o pubblicare il prodotto per salvare le modifiche quando hai finito.

Passaggio 6: visualizza i campioni di variazione per WooCommerce in azione

Fare clic per visualizzare o visualizzare in anteprima il frontend di quella particolare pagina del prodotto. Ora dovresti vedere i campioni di variazione che hai creato elencati come opzioni che il cliente può scegliere. Il nostro esempio mostra un titolo Color ; dopodiché, puoi vedere i campioni basati su immagini per le varianti.

campioni di variazione per WooCommerce sotto forma di immagine

L'immagine del prodotto (e potenzialmente il prezzo e la descrizione) cambia quando un cliente seleziona un campione di variante del prodotto. La versione testuale della variante viene visualizzata quando un utente scorre su un campione per un breve periodo di tempo.

risultati del tipo di immagine dei campioni

Se hai selezionato il tipo di colore durante la generazione degli attributi globali, i campioni di prodotto per WooCommerce visualizzano i colori anziché le immagini. Tutto il resto è uguale in termini di prezzi e descrizioni e le immagini cambiano quando vengono cliccate.

visualizzare il tipo di colore dei campioni

Se hai scelto il tipo di etichetta durante la creazione degli attributi, il plug-in Sparks mostra i tuoi campioni come pulsanti con testo. Ancora una volta, funzionano allo stesso modo dei normali campioni.

guardando la versione dell'etichetta dei campioni di variazione per WooCommerce

Funzionalità bonus con Neve Pro e il plug-in Sparks

Tutte le funzionalità di Sparks per WooCommerce che hai visto sopra funzioneranno con qualsiasi tema WordPress.

Tuttavia, se desideri funzionalità ancora più avanzate, puoi associare Sparks per WooCommerce al tema Neve.

Combinando il plug-in Sparks per WooCommerce con il tema Neve Pro, puoi sbloccare ancora più funzionalità dei campioni di prodotto, come la possibilità di mostrare i campioni nella pagina Negozio o nelle pagine Archivio.

Questo fa parte della funzione WooCommerce Booster di Neve Pro. Devi avere la versione Pro di Neve per poter visualizzare queste funzionalità.

Pubblicazione di campioni di variazione nella Galleria del negozio (e in tutte le pagine dell'Archivio)

Con Neve Pro e il plug-in Sparks, ecco come configurarlo:

  1. Vai su Aspetto > Personalizza > WooCommerce > Catalogo prodotti .
  2. Apri la scheda Scheda prodotto e scorri fino alla sezione per il pulsante Aggiungi al carrello .
  3. Scegli l'opzione Dopo l'immagine .
  4. Assicurati che l'interruttore Abilita campioni di variazione sia attivato.
  5. Fai clic su Pubblica .
abilitare i campioni di variazione per WooCommerce nella sezione di personalizzazione

Come misura finale per assicurarti che i campioni vengano pubblicati nella pagina Negozio (e in tutti gli archivi), vai su Impostazioni > Sparks nella dashboard di WordPress. Scorri verso il basso fino al modulo Variation Swatches e fai clic sul collegamento a Configure .

Sei indirizzato a una nuova pagina. In Impostazioni generali attivare l'opzione Mostra attributi nei prodotti di archivio . Ciò rende i campioni visibili su tutti gli elementi dell'archivio; la pagina Negozio è composta da archivi, quindi è un passaggio essenziale per aggiungere campioni a quella galleria.

aggiunta di attributi alle pagine di archivio

Ciò non solo offre all'acquirente un rapido pulsante "Aggiungi al carrello" mentre si trova nella pagina del negozio, ma fornisce campioni visivi e cambio di variante senza dover aprire l'intera pagina del prodotto. Inoltre, le immagini del prodotto cambiano nella pagina Negozio per riflettere la variante che vorrebbero acquistare.

campioni di variazione per WooCommerce nella pagina del negozio
Vai in cima

Hai domande sui campioni di variazione per WooCommerce?

I campioni di variazione trasformano le noiose varianti di prodotti in un'esperienza visiva, avvicinando lo shopping online a un ambiente di vendita al dettaglio di persona.

Come impostare i #campioni di variazione per #WooCommerce
Fai clic per twittare

I clienti non possono ancora provare gli articoli o sentire il materiale nel tuo negozio online, ma i campioni forniscono uno sguardo più da vicino a trame, colori e varianti di forme di cui altrimenti non avrebbero molte informazioni.

Inoltre, i campioni di variazione rendono le pagine dei prodotti più user-friendly e piacevoli alla vista. Ti consigliamo di iniziare con i campioni di variazione su tutte le pagine dei prodotti, quindi di espandere le funzionalità di Neve Pro per i campioni nelle pagine Archivio e Negozio.

Hai ancora domande su come utilizzare i campioni di variazione per WooCommerce? Fatecelo sapere nella sezione commenti qui sotto!