Ridicați paginile de produse WooCommerce folosind câmpuri personalizate

Dacă doriți să vă îmbunătățiți magazinul WooCommerce, învățarea modului de utilizare a câmpurilor personalizate WooCommerce este un instrument excelent pe care îl aveți în centura dvs. de instrumente.

Câmpurile personalizate vă permit să colectați și să afișați informații suplimentare despre produsele dvs. WooCommerce, ceea ce este foarte util pentru personalizarea magazinului dvs.

Cu instrumentele potrivite, nici câmpurile personalizate WooCommerce nu trebuie să fie complicate. Deși cu siguranță puteți utiliza codul pentru a insera câmpuri personalizate, Elementor oferă o modalitate mai ușoară de a lucra cu câmpuri personalizate, care vă permite să faceți totul de la interfața vizuală a Elementor.

În această postare, vom acoperi tot ce trebuie să știți despre câmpurile personalizate WooCommerce, inclusiv următoarele:

• O privire mai profundă asupra câmpurilor personalizate WooCommerce și a modului în care acestea vă ajută să vă îmbunătățiți magazinul.
• Diferitele tipuri de câmpuri personalizate pe care le puteți adăuga la WooCommerce.
• Când utilizați câmpurile personalizate WooCommerce față de atributele / taxonomiile produsului.
• Cum se creează câmpuri personalizate WooCommerce pe backend.
• Cum să afișați câmpuri personalizate pe frontend-ul magazinului dvs., utilizând Elementor Pro sau cod personalizat.

Să începem!

Câmpurile personalizate WooCommerce vă permit să stocați și să afișați informații suplimentare despre produsele de pe site-ul dvs. Sunt exact ca câmpurile personalizate WordPress obișnuite, dar colectează în mod specific informații despre produsele dvs. WooCommerce.

În mod implicit, WooCommerce oferă câmpuri la nivel înalt care se aplică majorității produselor, cum ar fi prețurile și descrierile produselor. Dar nu vă oferă o modalitate de a crea câmpuri unice magazinului dvs.

Acolo câmpurile personalizate pot fi utile.

Pe backend, câmpurile personalizate facilitează stocarea detaliilor și informațiilor unice despre produsele dvs. În loc să încercați să introduceți informații personalizate în caseta de descriere a produsului nestructurată, puteți crea câmpuri dedicate pentru toate detaliile importante, ceea ce face mai ușoară gestionarea și actualizarea produselor.

În frontend, câmpurile personalizate vă ajută să afișați toate aceste informații într-un mod structurat. Dacă este necesar, acestea vă oferă, de asemenea, șansa de a colecta informații suplimentare de la cumpărători, cum ar fi să le permiteți să introducă un mesaj de gravare personalizat pentru a include pe o bijuterie pe care o achiziționează de la magazinul dvs.

Dacă încă nu sunteți foarte sigur cum se reunesc toate acestea - nu vă faceți griji! În secțiunea următoare, vă vom oferi câteva exemple reale despre cum puteți utiliza câmpuri personalizate pentru a vă îmbunătăți magazinul.

Există două tipuri comune de câmpuri personalizate pe care le veți vedea pentru magazinele WooCommerce:

• Câmpuri de date despre produs - acestea vă permit să stocați informații suplimentare despre un produs. În calitate de administrator al magazinului, veți introduce aceste date din tabloul dvs. de bord WordPress. Apoi, veți afișa datele pe paginile dvs. de produse.
• Câmpuri de introducere personalizate - acestea vă permit să colectați informații suplimentare despre un produs de la cumpărători. De obicei, acest lucru vă ajută să creați un tip de produs personalizabil. Diferența esențială aici este că cumpărătorii dvs. introduc datele din frontend-ul site-ului dvs.

În funcție de situația magazinului dvs., puteți utiliza un singur tip de câmpuri personalizate WooCommerce. Sau, puteți utiliza ambele tipuri, astfel încât să puteți afișa informații suplimentare și să colectați informații suplimentare de la cumpărători.

Să le privim mai detaliat.

Cea mai obișnuită utilizare a câmpurilor personalizate WooCommerce este de a afișa informații suplimentare despre un produs. Câmpurile de intrare WooCommerce backend sunt „o mărime potrivită tuturor”, dar este posibil să aveți situații în care doriți să afișați informații unice despre produsele dvs. într-un mod structurat.

De exemplu, poate aveți un magazin de cărți online și doriți să includeți fragmente de recenzii pozitive de la critici despre cărțile pe care le vindeți. Sigur, le-ați putea include direct în descrierea produsului, dar folosind câmpuri personalizate vă va permite să oferiți aceste citate câmpuri de intrare dedicate și veți avea mai mult control asupra locului în care le plasați.

Sau, poate vindeți tricouri grafice și doriți să colectați și să afișați informații despre designerul fiecărei cămăși.

Iată un exemplu de adăugare a câmpurilor personalizate pe backend:

Și apoi ai putea afișa acele informații oriunde vrei pe paginile de produse astfel:

Practic, dacă vreți vreodată să afișați orice tip de informații suplimentare despre un produs, plasarea acestor informații în câmpuri personalizate poate fi cu adevărat utilă din următoarele motive. Poti…

1. Creați câmpuri de intrare dedicate, ceea ce face mai ușoară adăugarea de informații și actualizarea informațiilor în viitor.
2. Afișați informațiile exact unde doriți să le puneți. Îl puteți plasa oriunde pe paginile dvs. de produse. Și cu Elementor, nici măcar nu trebuie să cunoașteți niciun cod pentru a face acest lucru.
3. Formatați informațiile oricum doriți. De exemplu, puteți adăuga culori pentru a atrage atenția, chenarele etc.

O altă opțiune pentru utilizarea câmpurilor personalizate WooCommerce este de a crea câmpuri de intrare personalizate pe paginile dvs. de produs, astfel încât cumpărătorii să poată personaliza produsul sau să ofere informații suplimentare.

De exemplu, poate vindeți un anumit tip de bijuterii și doriți să le oferiți cumpărătorilor posibilitatea de a crea o gravură personalizată pe articolul pe care îl achiziționează. Sau poate doriți să permiteți cumpărătorilor să introducă un mesaj personalizat pentru a serigrafa pe o cămașă.

Pentru a realiza aceste cazuri de utilizare, puteți adăuga un câmp de introducere a textului pe pagina produsului frontend.

Iată un exemplu care adaugă un astfel de câmp de intrare în plus față de câmpurile de date personalizate din secțiunea anterioară:

Dacă doriți să colectați date suplimentare despre produs, o altă opțiune populară este atributele și taxonomiile WooCommerce. Veți vedea aceste numite „atribute” atunci când personalizați un produs, dar ceea ce face WooCommerce pe backend este să creați o nouă taxonomie personalizată pentru fiecare atribut pe care îl creați.

Atributele și taxonomiile sunt, de asemenea, un mod foarte util de a stoca informații despre un produs, dar îndeplinesc o funcție diferită, deci este important să înțelegem diferența:

• Atribute / taxonomii - le utilizați pentru a grupa produsele împreună, cam ca o categorie. Cumpărătorii dvs. ar putea utiliza aceste informații pentru a filtra toate produsele cu un anumit atribut. WooCommerce include deja două taxonomii în mod implicit - categorii de produse și etichete - dar puteți utiliza atribute pentru a adăuga taxonomii personalizate nelimitate.
• Câmpuri personalizate - le utilizați pentru a stoca informații unice pentru fiecare produs individual. Produsele nu sunt grupate în funcție de informațiile de câmp personalizate.

Să ne uităm la câteva exemple de când să le folosim pe fiecare ...

În primul rând, să presupunem că vindeți o gamă de modele diferite de tricouri în diferite culori. Doriți o modalitate de a stoca informații despre culoarea fiecărui tricou, astfel încât cumpărătorii dvs. să poată filtra toate cămășile din culoarea (culorile) care le interesează.

Pentru acest caz de utilizare, doriți să utilizați un atribut de produs (taxonomie). Aceasta va grupa diferite articole în funcție de culoarea lor atribuită și va permite cumpărătorilor să le filtreze. De exemplu, răsfoind toate cămășile verzi.

Dar atunci să presupunem că doriți să adăugați și o notă despre modul în care se potrivește produsul. De exemplu, dacă se potrivește mărimii sau dacă este puțin mai strâns sau mai slab decât în ​​mod normal. Aceste informații sunt unice pentru fiecare tricou și nu sunt ceva ce majoritatea cumpărătorilor vor dori să filtreze, așa că ar fi mai bine să puneți aceste detalii într-un câmp personalizat.

Există unele situații în care s-ar potrivi atât un atribut cât și un câmp personalizat și puteți alege o abordare diferită în funcție de nevoile dvs. specifice.

De exemplu, să presupunem că doriți să adăugați informații despre designerul grafic care a creat fiecare tricou pe care îl vindeți. Iată diferitele scenarii în care ați putea dori să utilizați fiecare opțiune:

• Atribut - l-ați folosi dacă vindeți mai multe cămăși de la fiecare artist și doriți să oferiți cumpărătorilor o opțiune de a filtra toate cămășile de la un anumit artist.
• Câmp personalizat - îl veți folosi dacă doriți să stocați și să afișați artistul, dar nu este necesar să îl faceți filtrabil. De exemplu, poate că artistul nu este cu adevărat interesat de cumpărători sau poate vindeți doar o singură cămașă de la fiecare artist.

Lucrul cu câmpurile personalizate WooCommerce are două părți:

1. Trebuie să creați câmpurile personalizate pe backend, astfel încât să puteți adăuga mai multe informații produselor dvs.
2. Trebuie să afișați informațiile din acele câmpuri personalizate pe frontend-ul magazinului dvs.

În această primă secțiune, vă vom arăta cum să creați câmpurile personalizate WooCommerce din backend. Apoi, în secțiunea următoare, vom trece prin modul de afișare a acestora.

Modul în care vă creați câmpurile personalizate depinde de dacă doriți să afișați câmpuri suplimentare de date despre produs sau dacă doriți să afișați câmpuri de intrare personalizate. Să trecem prin amândouă ...

Pentru a colecta și stoca date suplimentare despre produsele WooCommerce, puteți utiliza orice plugin de câmpuri personalizate. Opțiunile populare care se integrează cu Elementor includ:

• Câmpuri personalizate avansate (ACF)
• Set de scule
• Păstăi
• Meta Box

Avem o comparație detaliată dintre ACF vs Toolset vs Pods dacă doriți să aflați mai multe despre aceste oferte, dar vom folosi ACF pentru acest exemplu, deoarece este popular, gratuit și flexibil. Totuși, aceeași idee de bază va fi valabilă pentru toate pluginurile.

Pentru a începe, instalați și activați pluginul gratuit Advanced Custom Fields de pe WordPress.org. Apoi, accesați Câmpuri personalizate → Adăugare nouă pentru a crea un nou „Grup de câmp”.

Un grup de câmpuri este exact ceea ce spune numele - un grup de unul sau mai multe câmpuri personalizate pe care doriți să le adăugați la unele sau la toate produsele dvs. WooCommerce.

Pentru început, utilizați regulile de localizare pentru a controla produsele la care doriți să adăugați câmpurile personalizate.

Mai întâi, setați tipul de postare egal cu Produs . Dacă doriți să afișați aceste câmpuri personalizate pe toate produsele dvs., asta este tot ce trebuie să faceți:

Dacă doriți să afișați aceste câmpuri personalizate numai pe anumite produse (de exemplu, produse dintr-o anumită categorie), puteți adăuga mai multe reguli după cum este necesar. De exemplu, iată cum arată să vizați produsele din categoriile „Îmbrăcăminte” sau „Decor”:

Apoi, puteți adăuga câmpurile personalizate utilizând butonul + Adăugare câmp din partea de sus a interfeței. Pentru fiecare câmp, puteți alege dintre diferite tipuri de câmpuri (de ex. Număr vs text scurt vs text lung etc.) și puteți configura alte detalii despre acel câmp.

De exemplu, aici sunt trei câmpuri personalizate de colectat ...

1. Numele designerului.
2. Anul în care designerul a creat designul.
3. O declarație despre design de la designer.

După ce sunteți mulțumit de aspectul tuturor, continuați și publicați grupul de câmpuri.

Acum, când editați un produs, veți vedea acele noi câmpuri personalizate în interfața de editare a produsului:

În secțiunea următoare, vă vom arăta cum să preluați informațiile din aceste câmpuri personalizate și să le afișați pe frontend-ul magazinului dvs. WooCommerce.

Dar mai întâi - să vorbim despre celălalt tip de câmpuri personalizate WooCommerce - câmpuri personalizate de introducere a produselor.

Pluginurile de mai sus sunt excelente dacă doriți să colectați informații suplimentare despre un produs și să îl afișați pe frontend-ul site-ului dvs. Cu toate acestea, acestea nu sunt excelente pentru a colecta informații personalizate de la cumpărătorii dvs. pe frontend. De exemplu, permițând cumpărătorilor să introducă un mesaj de gravare personalizat care va fi adăugat la produs.

Pentru acest caz de utilizare, veți dori, de obicei, un plugin pentru produsele WooCommerce. Aceste plugin-uri sunt concepute special pentru a accepta intrarea produsului de la cumpărători de pe frontend-ul magazinului dvs.

Puteți găsi o mulțime de pluginuri pentru a satisface această nevoie, dar două locuri bune pentru a începe sunt:

• Plugin-ul oficial pentru produse complementare WooCommerce - 49 USD
• Domenii avansate de produse - freemium

Vă vom arăta cum funcționează folosind plugin-ul oficial Product Add-Ons de la echipa WooCommerce, dar ideea de bază va fi aceeași cu toate pluginurile de produse add-on.

Cu pluginul instalat, puteți accesa Produse → Suplimente pentru a crea câmpurile de intrare personalizate pe care doriți să le afișați pe unele / pe toate produsele dvs.

La fel ca în cazul configurării ACF, puteți direcționa câmpurile către toate produsele sau doar anumite categorii de produse.

De asemenea, puteți adăuga cât de multe câmpuri este necesar și puteți alege dintre diferite tipuri de câmpuri.

Singura diferență esențială este că aveți și opțiunea de a ajusta prețul unui produs în funcție de alegerile pe care le face un cumpărător.

De exemplu, ați putea percepe 5 USD în plus dacă cumpărătorul dorește să adauge o gravură / mesaj personalizat:

De asemenea, aveți opțiunea de a adăuga câmpuri de intrare personalizate direct la produse atunci când lucrați în editorul de produse. Puteți face acest lucru dintr-o nouă filă Suplimente din caseta Date produs :

Plug-in-ul Produselor de completare va afișa automat aceste câmpuri personalizate pe frontend-ul magazinului dvs. Dar în secțiunea următoare, vă vom arăta cum puteți controla manual plasarea acestora folosind Elementor.

Acum că v-ați creat câmpurile personalizate și le-ați adăugat informații, sunteți gata să afișați aceste informații pe frontend-ul site-ului dvs.

Vă vom arăta două opțiuni aici:

1. Elementor
2. Cod personalizat prin fișierul functions.php

Cel mai simplu mod de a afișa câmpurile personalizate WooCommerce este cu Elementor Pro și Elementor WooCommerce Builder. Folosind interfața vizuală, glisare și plasare Elementor, puteți crea unul sau mai multe șabloane de produs care includ date din câmpurile dvs. personalizate.

Pentru a începe, accesați Șabloane → Generator de teme și creați un nou șablon de produs unic.

Apoi puteți alege dintr-unul dintre șabloanele prefabricate sau puteți crea propriul design de produs de la zero. Dacă aveți nevoie de ajutor aici, puteți consulta ghidul nostru complet despre modul de personalizare a designului paginii de produs WooCommerce.

Când sunteți gata să inserați câmpurile personalizate WooCommerce, adăugați un widget obișnuit Editor de text și apoi alegeți opțiunea de a-l completa cu etichete dinamice. În meniul derulant Tag-uri dinamice, alegeți ACF FIeld :

În ecranul următor, faceți clic pe pictograma cheie și utilizați meniul derulant Cheie pentru a alege câmpul personalizat exact pe care doriți să îl afișați:

De asemenea, puteți utiliza opțiunile avansate pentru a adăuga text static înainte / după informațiile din câmpul personalizat.

Si asta e! Elementor va extrage acum dinamic datele câmpului personalizat pentru produsul pe care îl previzualizați.

De asemenea, puteți utiliza câmpurile personalizate pentru a completa mai mult decât text. De exemplu, dacă ați adăugat un câmp personalizat pentru număr, puteți utiliza acel număr pentru a completa valorile de stele, contoare și multe altele.

Sau, puteți, de asemenea, să completați dinamic linkuri. De exemplu, puteți crea un câmp personalizat care să includă un link către documentația produsului și să îl utilizați pentru a completa un buton pe pagina produsului unic.

Pentru a afla mai multe despre această caracteristică, puteți citi ghidul nostru complet de conținut dinamic în Elementor Pro.

Sau, pentru un alt mod de a afișa aceste informații în Elementor, puteți crea, de asemenea, un tabel de produse care include datele dvs. de câmp personalizate.

Dacă ați creat câmpuri personalizate de introducere a produselor cu unul dintre pluginurile de mai sus (cum ar fi pluginul oficial pentru produse suplimentare pe care le-am menționat), aceste pluginuri vor afișa automat acele câmpuri pe frontend-ul magazinului dvs., astfel încât să nu trebuie să le includeți manual în șabloanele dvs. Elementor.

În Elementor, aceste câmpuri de completare vor fi afișate de obicei oriunde adăugați widgetul Adăugați în coș în design-urile dvs. Deci, dacă doriți să le mutați, puteți regla amplasarea widgetului Adăugare la coș .

Dacă vă cunoașteți calea în jurul codului, puteți adăuga, de asemenea, câmpuri personalizate WooCommerce la pagina produsului utilizând fișierul functions.php al temei copilului sau un plugin precum Fragmente de cod. Cu toate acestea, nu recomandăm această metodă pentru majoritatea oamenilor, deoarece este complexă.

Nu numai că va trebui să înțelegeți codul pentru a-l configura, dar, de asemenea, nu veți obține o previzualizare vizuală în timp real și va fi greu să vă plasați câmpurile. Acesta este motivul pentru care Elementor face o opțiune mai bună pentru majoritatea proprietarilor de magazine.

Dacă doriți să utilizați metoda codului manual, vă veți baza pe cârligele WooCommerce pentru a plasa informațiile dvs. personalizate. Dacă nu sunteți familiarizați cu „cârlige”, acestea vă permit practic să injectați cod sau conținut în anumite părți ale magazinului dvs. WooCommerce.

De exemplu, puteți găsi diferite cârlige pentru a injecta conținut deasupra titlului produsului, sub titlul produsului, sub butonul Adăugare la coș etc.

Pentru început, va trebui să alegeți cârligul pentru locația în care doriți să injectați conținut din câmpurile dvs. personalizate. Pentru a face mai ușoară vizualizarea acestor locații, puteți utiliza excelentul ghid de vizualizare WooCommerce al Business Bloomer.

Pe lângă găsirea cârligului pe care doriți să îl utilizați, veți avea nevoie și de PHP pentru a afișa câmpul dvs. de la ACF. Dacă nu sunteți sigur cum să obțineți acest lucru, ACF are o documentație foarte detaliată.

Apoi, puteți utiliza un fragment de cod ca mai jos pentru a afișa câmpul, unde insert_hook_location este locația cârligului pe care doriți să o utilizați și field_name este numele de câmp slug de la ACF:

De exemplu, fragmentul de mai jos ar afișa câmpul personalizat al declarației artistice sub detaliile meta ale produsului WooCommerce:

Iată cum ar putea arăta asta pe frontend-ul magazinului dvs.:

Puteți repeta procesul pentru a afișa câmpuri personalizate suplimentare.

Înțelegerea modului de utilizare a câmpurilor personalizate WooCommerce este cu adevărat utilă pentru crearea magazinelor WooCommerce personalizate și optimizate.

Le puteți utiliza pentru a oferi o modalitate structurată de a introduce date suplimentare despre produs în tabloul de bord backend și de a afișa aceste informații pe site-ul dvs. frontend. Sau puteți crea, de asemenea, câmpuri de introducere personalizate pentru a permite cumpărătorilor să vă personalizeze produsele.

Pentru a crea câmpuri personalizate pentru date suplimentare despre produs, puteți utiliza un plugin cum ar fi Advanced Custom Fields (ACF), în timp ce câmpurile de introducere personalizate necesită un plugin dedicat pentru produse suplimentare.

Apoi, pentru cel mai simplu mod de a afișa acele câmpuri personalizate pe frontend-ul magazinului dvs., puteți utiliza Elementor și Elementor WooCommerce Builder. Cu Elementor, puteți crea propriile șabloane de produse personalizate care includ informații dinamice nelimitate din câmpurile dvs. personalizate - nu este necesar cod.

Aveți în continuare întrebări despre cum să utilizați câmpurile personalizate WooCommerce din magazinul dvs.? Lasă un comentariu și anunță-ne!