Come creare campioni di variazione di radio, etichette, colori e immagini per gli attributi dei prodotti variabili WooCommerce

Il campione di variazione del prodotto WooCommerce è un'incredibile tecnologia introdotta per aumentare le vendite e la conversione del sito.

Stai pensando perché gli swatch sono incredibili, giusto?

I campioni di variazione del prodotto sostituiscono il campo a discesa di selezione della variazione del prodotto WooCommerce predefinito e abilitano i campioni di colore, immagine, etichetta e radio. Di conseguenza, i clienti possono facilmente selezionare la variante di prodotto desiderata e aggiungerla immediatamente al carrello.

In questo tutorial, ti mostrerò come abilitare i campioni di variazione di radio, etichette, colori e foto nel prodotto variabile WooCommerce usando OceanWP Theme .

Presumo che tu abbia installato il tema OceanWP. Per abilitare i campioni nei tuoi prodotti variabili, installa prima il plug-in WooCommerce Variation Swatches .

Dimostrazione dal vivo | Scarica WooCommerce Variation Swatches Plugin

Installazione di campioni di variazione WooCommerce

Puoi anche scaricare il plug-in WooCommerce Variation Swatches dal backend del tuo sito. Seleziona Inizia installazione plug -in dall'avviso dell'amministratore principale.

Installa e attiva i campioni di variazione WooCommerce e il plug-in Ocean Extra .

Se non ricevi l'avviso principale per installare il plug-in campioni, vai a Plugin >> Aggiungi nuovo . Cerca i campioni di variazione WooCommerce nel campo di ricerca. Installa e attiva WooCommerce Variation Swatches Plugin di Emran Ahmed .

Dopo aver installato e attivato correttamente il plug-in, è il momento di creare campioni di variazioni di radio, etichette, colori e immagini nel tema OceanWP. Iniziamo il processo.

Configurazione dei campioni di variazione WooCommerce

Dopo aver installato Woocommerce Variation Swatches and Photos plug- in nel tuo tema OceanWP. È ora di configurare questo plugin per i tuoi prodotti variabili. Ci sono due modi per installare questo plugin.

1. Abilita i campioni di variazione per i prodotti variabili esistenti
2. Imposta i campioni di variazione Per i nuovi prodotti variabili

In questo tutorial, descriverò entrambi i modi.

Abilita i campioni di variazione per i prodotti variabili esistenti

Molti di voi hanno già prodotti variabili creati nel proprio negozio. Se vuoi trasformare la selezione a discesa della variazione del prodotto in campioni radio, etichetta, colore e immagini, hai seguito questo tutorial da qui. Controlla lo screenshot seguente. Il menu a discesa di selezione della variante predefinita attualmente è simile al seguente screenshot nel tuo sito. Nei prossimi passaggi, ti mostrerò come trasformare il campo di selezione della variazione in splendidi campioni.

Prima di

Dopo

Passaggio 01: modifica dell'attributo

Vai a Prodotti >> Attributi . Tutti gli attributi globali esistenti sono elencati nella sezione degli attributi. Dopo aver installato il plug-in WooCommerce Variation Swatches, aggiunge il campo Tipo . Per impostazione predefinita, mostrerebbe selezionare sotto Tipo titolo.

Poiché WooCommerce Swatches Plugin viene fornito con tre tipi di attributi: Colore, Immagine, Pulsante . È possibile impostare qualsiasi tipo di attributo per l'attributo desiderato.

A scopo dimostrativo, è stato creato l'attributo Tessuti, Motivo ed Etichetta . Aggiungi il tipo di attributo Colore per l'attributo Motivo , il tipo di attributo Immagine per l'attributo Tessuti e il tipo di attributo Pulsante per l'attributo etichetta .

Per impostare il tipo di attributo colore su Attributo Pattern , fare clic su Modifica .

Seleziona Tipo di colore dall'elenco a discesa del tipo.

Torna indietro Prodotti >> Attributi . Modifica l'attributo Tessuti come l'attributo Motivo .

Torna indietro Prodotti >> Attributi di nuovo. Modifica attributo Etichetta come Tessuti e attributo Motivo .

Una volta completata la selezione del tipo di attributo, torna alla pagina dell'elenco degli attributi. L'elenco degli attributi sarebbe simile all'immagine seguente.

Il frontend del prodotto apparirà come lo screenshot seguente dopo aver selezionato i tipi di attributo per gli attributi del prodotto.

Le variazioni per l'attributo Etichetta sembrano a posto, ma le variazioni per l'attributo Motivo devono definire i colori e le variazioni per l'attributo Tessuti devono aggiungere immagini.

Passaggio 02: modifica delle variazioni

Per definire i colori come variazioni all'interno dell'attributo Pattern . Vai a Prodotti >> Attributi . Seleziona Configura termini dall'attributo Patterns .

Dopo aver selezionato Configura termini, viene visualizzato un elenco di variazioni degli attributi. Per Pattern, qui sono elencate tre varianti: Blue , Green e Red . Modifica ogni variazione una per una per aggiungere il colore della variazione.

Per la dimostrazione, seleziona Modifica collegamento per la variante verde .

Dal pannello di modifica delle varianti. Seleziona il colore desiderato da Colorpicker e aggiorna le modifiche premendo il pulsante Aggiorna .

Quando tutte le varianti di colori vengono aggiornate correttamente, il frontend è simile al seguente.

Dopo aver aggiornato le variazioni degli attributi del modello, modifica l'attributo dei tessuti selezionando Configura termini come l'attributo del modello .

Dopo aver premuto Configura termini, viene visualizzato un elenco di termini di tessuti come modello. Modifica ogni variazione per inserire l'immagine delle variazioni. A scopo dimostrativo, Modifica collegamento per l'attributo Chambray .

Dal pannello di modifica delle varianti. carica l' immagine della variante desiderata dall'immagine e aggiorna le modifiche premendo il pulsante Aggiorna .

Dopo aver aggiornato le immagini per tutte le varianti, il frontend vorrebbe il seguente screenshot.

Imposta i campioni di variazione per i nuovi prodotti variabili

Questo è il passaggio per coloro che non hanno creato alcun prodotto variabile per il proprio negozio. Innanzitutto, creeremo prodotti variabili e abiliteremo i campioni per loro.

Passaggio 01: crea attributi e variazioni globali

Dopo aver installato e attivato correttamente il plug-in, crea l'attributo desiderato a livello globale da Prodotti >> Attributi . Crea variazione Motivo , Tessuti, Lunghezza e Taglia , inserisci il titolo dell'attributo e il tipo di attributo corrispondente dal menu a discesa Tipo.

Quando l'attributo Colore, immagine ed etichetta Motivo , Tessuti , Etichetta e Taglia viene creato correttamente, viene creato un elenco di attributi a sinistra.

Dopo aver creato gli attributi globali, aggiungi le varianti degli attributi selezionando Configura termini. Per creare variazioni per gli attributi Pattern , seleziona Configura collegamenti termini . Compila il campo Nome e seleziona i codici colore. Crea variazioni di verde , blu e rosso per gli attributi di colore.

Un elenco di variazioni degli attributi viene visualizzato nella schermata di sinistra dopo aver aggiunto le variazioni per gli attributi Pattern .

Vai di nuovo ai Prodotti >> Attributi . Crea variazioni per gli attributi di Fabrics , seleziona Configura termini link da Fabrics . Compila il campo Nome e aggiungi l'immagine variante dalla libreria multimediale o carica dal computer.

Crea variazioni Chambray, Corduroy e Embossed per gli attributi dell'immagine e appariranno a sinistra.

Crea variazioni per gli attributi Radio ed Etichetta come le variazioni Immagine e Colore.

Passaggio 02: visualizza i campioni nella pagina del prodotto variabile

Per abilitare i campioni nella pagina del prodotto variabile. Entra nella modalità di modifica del prodotto desiderata, seleziona il prodotto variabile da Dati prodotto .

Vai alla scheda Attributi . Fare clic sul menu a discesa Attributo prodotto personalizzato . Qui vengono visualizzati tutti gli attributi creati a livello globale. Aggiungi tutti gli attributi uno per uno.

Dopo aver aggiunto tutti gli attributi, premere il pulsante Seleziona tutto da ciascuna impostazione di attributo per aggiungere tutte le varianti disponibili contemporaneamente. Dopo aver aggiunto le variazioni degli attributi del prodotto, salva le impostazioni selezionando i pulsanti Salva attributi .

Ora vai nella scheda Variazioni . Fare clic sul menu a discesa Aggiungi variazione . Qui emergono due opzioni. Il primo è Aggiungi variazione e il secondo è Crea variazioni da tutti gli attributi.

Seleziona Crea varianti da tutti gli attributi e premi Vai . Aggiungerà tutte le combinazioni di varianti disponibili create per gli attributi. Aggiungi il prezzo e l' immagine della variazione per la variazione individuale e salva le impostazioni.

Conclusione

Ho cercato di coprire ogni singolo passaggio per installare WooCommerce Variation Swatches Plugin nel tema OceanWP. Fammi sapere nella casella dei commenti se hai bisogno di ulteriore aiuto.