Sei qui per abilitare WooCommerce Attributi dei prodotti Immagini Campioni per prodotti variabili nel tema Flatsome?

Grande! Sei nel posto giusto.

Se hai seguito il nostro ultimo tutorial su come creare campioni di colore WooCommerce, troverai questo tutorial facile.

Quindi, se sei qui per la prima volta, dovresti controllare il tutorial precedente per abilitare i campioni di attributi del prodotto a colori. Supponiamo che tu abbia scaricato le versioni gratuite e premium del plug-in. Non preoccuparti se te lo sei perso in qualche modo. Puoi scaricarlo all'istante!

Come abilitare le immagini degli attributi di WooCommerce nel tema Flatsome

L'installazione dei campioni di variazione dell'attributo WooCommerce e del plug-in fotografico è la stessa dell'installazione di altri plug-in WordPress nel tema Flatsome. Basta caricarlo e attivarlo da Plugin >> Aggiungi nuovo . E segui i passaggi successivi per configurarlo.

Passaggio 01: crea attributo immagine

Per creare un attributo Immagine a livello globale, vai su Prodotti >> Attributi . Inserisci il titolo dell'attributo nel campo Nome . In questo tutorial, ho chiamato il nome dell'attributo: Image .

Lascia vuoto il campo Slug . Il sistema genera automaticamente l'attributo slug. Seleziona l'immagine dal menu a tendina Tipo di attributo. Premere il pulsante Aggiungi attributo per salvare le modifiche.

Dopo aver creato l'attributo Immagine, noterai che viene creato un elenco sul lato destro. mostra l'attributo aggiunto Immagine aggiunto.

Passaggio 02: crea variazioni di attributo

L'attributo Immagine appena creato è vuoto. Non ci sono variazioni all'interno dell'attributo. Per aggiungere una variazione sotto l'attributo dell'immagine, premere Configura collegamento termine .

A scopo dimostrativo, aggiungeremo tre varianti. Ramie , pelle e lana .

Per creare una variante, inserire il titolo della variante nel campo Nome . Mantieni il campo slug vuoto per consentire al sistema di generarlo automaticamente. Carica le immagini delle varianti dal tuo computer o da Media Libra facendo clic sul pulsante Carica/Aggiungi immagine .

Al termine della selezione dell'immagine, premere il pulsante Aggiungi nuova immagine per completare il processo

Come l'elenco degli attributi. verrebbe creato un elenco di varianti di immagini come il seguente.

Passaggio 03: abilitare la variazione degli attributi nel prodotto variabile

È ora di abilitare i campioni di immagine all'interno di un prodotto variabile. Per abilitare i campioni immagine nel prodotto desiderato. Entra nella modalità di modifica del prodotto desiderata. Assicurati di aver selezionato prodotti variabili da Dati prodotto .

Selezionando il prodotto Variabile dal menu a discesa Dati prodotto , vai alla scheda Attributi . Fai clic sul menu a discesa Attributo prodotto personalizzato . In questo menu a discesa, puoi vedere tutti gli attributi creati a livello globale. Poiché abbiamo creato solo un attributo Immagine , ora mostra un attributo Immagine .

Seleziona l'attributo Immagine e fai clic su Aggiungi . È possibile visualizzare le seguenti schermate visualizzate in seguito.

Se si desidera selezionare tutte le varianti disponibili dell'attributo colore, fare clic sul pulsante Seleziona tutto . Se desideri deselezionare tutte le varianti selezionate contemporaneamente. Fare clic sul pulsante Seleziona nessuno . Aggiungi tutte le variazioni selezionando il pulsante Seleziona tutto , selezionando Usato per le impostazioni delle variazioni e facendo clic sul pulsante Salva attributi . Controlla lo screenshot seguente per le linee guida.

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

In questo tutorial, selezioneremo Crea variazione da tutti gli attributi e faremo clic sul pulsante Vai . Aggiungerà tutte le varianti disponibili come le seguenti.

Nell'immagine sopra puoi vedere che ci sono variazioni di immagine in pelle , ramiè e lana . Da questa schermata, puoi aggiungere immagini di varianti, prezzi di variazione e altri dettagli specifici della variazione. Dopo aver aggiunto tutti i dettagli richiesti in ciascuna variante, fare clic sul pulsante Salva modifiche .

Ricorda ! Non dimenticare di aggiungere il prezzo in ogni variazione, altrimenti le variazioni non saranno visibili sul frontend del prodotto.

Se riesci ad aggiungere con successo la variazione. Puoi vedere i seguenti campioni nel frontend del tuo prodotto.

Impostazioni semplici

I campioni e le foto delle variazioni di WooCommerce sono un potente plug-in. Ti consente di abilitare la descrizione comando, disabilitare il foglio di stile predefinito del plug-in e passare dalle forme rotonde e quadrate.

Se desideri selezionare lo stile forma da Rotondo a Quadrato e abilitare la descrizione comando, la pagina del prodotto frontend è simile alla seguente.

Impostazioni avanzate

Per fornire la massima flessibilità, il plugin WooCommerce Attribute Image Swatches offre un paio di impostazioni avanzate per darti di più. Le impostazioni consentono di controllare la larghezza , l' altezza e la dimensione del carattere dei campioni di variazione. La parte fantastica che pubblicheremo è l'opzione Comportamento attributo per presentare in modo intelligente la variazione esaurita. Il comportamento degli attributi può rendere sfocatura, nascondere e incrociare variazioni di stock.

Se selezioni un'opzione Sfocatura da Comportamento attributo, la variazione esaurita sarà simile alla seguente schermata.

Personalizza descrizione comando e campione nelle pagine Store/Archivio

La personalizzazione dell'immagine della descrizione comando e l'abilitazione dei campioni è la funzionalità premium di questo plug-in. Per abilitarlo, devi prima scaricare la versione Premium del plugin WooCommerce Variation Swatches.

Abilita descrizione comando

Puoi personalizzare lo sfondo della descrizione comando e il colore del testo dalle Impostazioni avanzate . Controlla lo screenshot seguente per personalizzare lo stile del suggerimento.

L'anteprima del frontend della descrizione comando è simile alla schermata seguente.

Abilita i campioni sulle pagine del negozio

Per abilitare i campioni di immagini nelle pagine del negozio. Vai alla pagina Archivio/Negozio . Controllare le impostazioni Mostra nell'archivio per mostrare i campioni di immagini nella pagina del negozio/archivio. Anche nel tema Flatsome, puoi abilitare i campioni prima e dopo l'aggiunta al pulsante del carrello nel negozio dalle impostazioni di Posizione dei campioni di archivio . Inoltre, puoi controllare esclusivamente la dimensione del campione di variazione dell'immagine da queste impostazioni.

Dopo aver abilitato i campioni nella pagina del negozio, appare come il seguente screenshot.

Conclusione:

Questa tecnologia aumenterà l'usabilità e la conversione del tuo sito. Se riscontri problemi durante l'installazione del plug-in dei campioni di variazione del prodotto WooCommerce in Flatsome Theme, faccelo sapere nel commento qui sotto. cercheremo di aiutarti. Se hai bisogno di qualsiasi argomento nel tuo requisito desiderato. Fammi sapere nel commento. cercheremo di trattarlo nel prossimo tutorial.