Cum să creați mostre radio, etichete, culori și variații de imagine pentru atributele variabile ale produsului WooCommerce

Varianta de produs WooCommerce este o tehnologie incredibilă introdusă pentru a stimula vânzările și conversia site-ului.

Te gândești de ce mostrele sunt incredibile, nu?

Mostrele de variante de produs înlocuiesc câmpul derulant de selectare a variantei de produs WooCommerce implicite și activează mostrele de culoare, imagine, etichetă și radio. În consecință, clienții pot selecta cu ușurință varianta de produs dorită și le pot adăuga imediat în coș.

În acest tutorial, vă voi arăta cum puteți activa mostrele de radio, etichete, culori și variații de fotografii în produsul variabil WooCommerce folosind Tema OceanWP .

Presupun că aveți tema OceanWP instalată. Pentru a activa mostrele în produsele dvs. variabile, instalați mai întâi pluginul WooCommerce Variation Swatches .

Demo live | Descărcați pluginul WooCommerce Variation Swatches

Instalare WooCommerce Variation Swatches

Puteți descărca pluginul WooCommerce Variation Swatches și din backend-ul site-ului dvs. Selectați Începeți instalarea pluginurilor din notificarea de top pentru administrator.

Instalați și activați WooCommerce Variation Swatches și pluginul Ocean Extra .

Dacă nu primiți notificarea de top pentru a instala pluginul swatches, navigați la Plugins >> Add New . Căutați mostre de variații WooCommerce în câmpul de căutare. Instalați și activați pluginul WooCommerce Variation Swatches de Emran Ahmed .

După instalarea și activarea cu succes a pluginului, este timpul să creați mostre radio, etichete, culori și variații de imagine în tema OceanWP. Să începem procesul.

Configurare WooCommerce Variation Swatches

După instalarea pluginului Woocommerce Variation Swatches and Photos în tema OceanWP. Este timpul să configurați acest plugin pentru produsele dvs. variabile. Există două moduri de a instala acest plugin.

1. Activați mostrele variabile pentru produsele variabile existente
2. Configurați mostre variabile Pentru produse variabile noi

În acest tutorial, voi descrie ambele moduri.

Activați mostrele variabile pentru produsele variabile existente

Mulți dintre voi au deja produse variabile create în magazinul dvs. Dacă doriți să transformați selecția derulantă a variantei de produs în mostre radio, etichetă, culoare și imagini, ați urmat acest tutorial de aici. Verificați următoarea captură de ecran. Meniul derulant de selectare a variantei implicite arată în prezent ca următoarea captură de ecran de pe site-ul dvs. În pașii următori, vă voi arăta cum transformați câmpul de selectare a variației în mostre frumoase.

Inainte de

După

Pasul 01: Editarea atributului

Mergeți la Produse >> Atribute . Toate atributele globale existente sunt listate în secțiunea de atribute. După instalarea pluginului WooCommerce Variation Swatches, adaugă câmpul Tip . În mod implicit, ar afișa select sub Titlul Tip .

Deoarece pluginul WooCommerce Swatches vine cu trei tipuri de atribute: Culoare, Imagine, Buton . Puteți seta orice tip de atribut pentru atributul dorit.

În scop demonstrativ, a fost creat atributul Fabrics, Pattern and Label . Adăugați tipul de atribut Culoare pentru atributul Model , tipul de atribut Imagine pentru atributul Fabrics și tipul de atribut Buton pentru Atributul Etichetă .

Pentru a seta tipul de atribut de culoare la Atributul de model , faceți clic pe Editare .

Selectați Tip de culoare din meniul derulant tip.

Reveniți Produse >> Atribute . Editați atributul Fabrics ca și atributul Pattern .

Reveniți Produse >> Atribute din nou. Editați atributul Etichetă, cum ar fi atributul Fabrics și Pattern .

Când selecția tipului de atribut este finalizată, reveniți la pagina cu lista de atribute. Lista de atribute ar arăta ca imaginea următoare.

Interfața produsului ar arăta ca următoarea captură de ecran după selectarea tipurilor de atribute pentru atributele produsului.

Variațiile pentru atributul Etichetă arată bine, dar variațiile pentru atributul Model trebuie să definească culorile, iar variațiile pentru atributul Fabrics trebuie să adauge imagini.

Pasul 02: Editarea variațiilor

Pentru a defini culorile ca variații în interiorul atributului Pattern . Mergeți la Produse >> Atribute . Selectați Configurați termeni din atributul Modele .

După selectarea Configurați termenii, apare o listă de variații de atribute. Pentru Pattern, trei variante: albastru , verde și roșu sunt listate aici. Editați fiecare variație una câte una pentru a adăuga culoarea variației.

Pentru demonstrație, selectați Editați linkul pentru Varianta verde .

Din panoul de editare a variantelor. Selectați culoarea dorită din Colorpicker și actualizați modificările apăsând butonul Actualizare .

Când toate variantele de culori sunt actualizate cu succes, interfața arată ca următorul.

După actualizarea variațiilor atributelor modelului, editați atributul Fabrics selectând Configurați termeni precum atributul modelului .

După ce apăsați Configurați termeni , apare o listă de termeni Fabrics ca un model. Editați fiecare variantă pentru a insera imaginea cu variante. Pentru scop demonstrativ, Editați linkul pentru atributul Chambray .

Din panoul de editare a variantelor. încărcați imaginea variată dorită din imagine și actualizați modificările apăsând butonul Actualizare .

După actualizarea imaginilor pentru toate variantele, interfața ar dori următoarea captură de ecran.

Configurați mostre de variații pentru noile produse variabile

Acesta este pasul pentru cei care nu au niciun produs variabil creat pentru magazinul lor. În primul rând, vom crea produse variabile și vom activa mostre pentru ele.

Pasul 01: Creați atribute și variații globale

După instalarea și activarea cu succes a pluginului, creați atributul dorit la nivel global din Produse >> Atribute . Creați variante de model , țesături, lungime și dimensiune , introduceți titlul atributului și tipul de atribut corespunzător din meniul derulant Tip.

Când atributul culoare, imagine și etichetă Pattern , Fabrics , Label and Size este creat cu succes, se creează o listă de atribute în stânga.

După crearea atributelor globale, adăugați variații de atribute selectând Configurați termeni. Pentru a crea variații pentru atributele modelului , selectați Configurați legăturile de termeni . Completați câmpul Nume și selectați codurile de culoare. Creați variații de verde , albastru și roșu pentru atributele de culoare.

O listă de variații de atribute apare în ecranul din stânga după adăugarea de variații pentru atributele de model .

Accesați din nou Produse >> Atribute . Creați variații pentru atributele Fabrics , selectați Configurați linkurile termenilor din Fabrics . Completați câmpul Nume și adăugați o variantă de imagine din biblioteca media sau încărcați de pe computer.

Creați variații Chambray, Corduroy și Embossed pentru atributele imaginii și acestea vor apărea în stânga.

Creați variații pentru atributele Radio și Label, cum ar fi variațiile Imagine și Culoare.

Pasul 02: Afișați mostre în pagina de produse variabile

Pentru a activa mostre pe pagina variabilă a produsului. Intră în modul de editare a produsului dorit, selectează produsul variabil din Datele produsului .

Mergeți la fila Atribute . Faceți clic pe meniul drop-down Atribut produs personalizat . Aici apar toate atributele create la nivel global. Adăugați toate atributele unul câte unul.

După ce ați adăugat toate atributele, apăsați butonul Selectați tot din fiecare setare de atribut pentru a adăuga simultan toate variațiile disponibile. După ce adăugați variații ale atributelor produsului, salvați setările selectând Butoanele Salvare atribute .

Acum intrați în fila Variații . Faceți clic pe meniul drop-down Adăugați o variantă . Aici apar două opțiuni. Prima este Adăugați variație și a doua este Creați variații din toate atributele.

Selectați Creare variații din toate atributele și apăsați Go . Va adăuga toate combinațiile de variații disponibile create pentru atribute. Adăugați o imagine de preț și de variație pentru variația individuală și salvați setările.

Concluzie

Am încercat să acopăr fiecare pas pentru a instala WooCommerce Variation Swatches Plugin în tema OceanWP. Spune-mi în caseta de comentarii dacă mai ai nevoie de ajutor.