Cum se creează un design personalizat al paginii de categorie WooCommerce
Cercetați o alternativă la designul implicit al paginii de categorie WooCommerce din tema dumneavoastră WordPress? Crearea unui design personalizat pentru categoriile de produse WooCommerce vă permite să oferiți o experiență de cumpărături optimizată, ceea ce poate avea un efect pozitiv asupra rezultatelor magazinului dumneavoastră.
Cu pluginul potrivit, crearea propriului layout personalizat al paginii de categorie WooCommerce nu trebuie să fie dificilă. Asta este ceea ce vă vom arăta în această postare. Vom acoperi modul în care puteți crea un aspect personalizat bazat pe tabel pentru categoriile dvs. din WooCommerce. Acest lucru vă permite să controlați exact ce informații se afișează și modul în care cumpărătorii vor interacționa cu produsele dumneavoastră.
Iată un exemplu din ceea ce veți construi în acest post:
Vom începe cu câteva dintre beneficiile acestei abordări de tip tabel. Apoi, vom trece la un ghid pas cu pas despre cum să o faceți în propriul magazin WooCommerce cu pluginul WooCommerce Product Table.
Beneficiile utilizării unui aspect de tabel pentru paginile de categorie
În timp ce designul exact al aspectului paginii de categorie a magazinului dvs. de comerț electronic depinde de tema dvs. WordPress, designul paginii de categorie a majorității temelor arată cam așa:
Acest aspect este bun pentru unele situații, dar limitează numărul de produse pe care le puteți afișa. De asemenea, restricționează cantitatea de informații pe care o puteți oferi despre fiecare produs (deși adăugarea de butoane de vizualizare rapidă a produselor este o modalitate de a atenua acest lucru).
Woo Multistore au scris despre importanța proiectării paginii de categorie WooCommerce într-un mod care să stimuleze conversiile. O dispunere în tabel vă ajută să depășiți neajunsurile prin afișarea mai multor produse și informații într-o dispunere compactă care sfârșește prin a folosi mai puțin spațiu, precum și prin adăugarea unor funcții suplimentare de navigare, cum ar fi căutarea și filtrarea.
Aceasta înseamnă că puteți afișa mai multe produse/detalii ale produselor dvs. în fața ochilor cumpărătorilor, ceea ce vă asigură că vă pot vedea întregul catalog și vă crește șansele ca aceștia să facă o achiziție.
Vă veți vedea, de asemenea, beneficii SEO cu motoarele de căutare, deoarece puteți afișa mai mult conținut personalizat pe o pagină complet personalizată (sau și pe paginile de destinație). Acest lucru vă permite să afișați produse care sunt relevante și apoi să adăugați și text contextual. Toate acestea ar trebui să fie răsplătite cu poziționări mai bune.
În timp ce acest tip de layout poate fi benefic pentru toate tipurile de magazine de comerț electronic, este deosebit de util pentru:
- Magazine cu ridicata
- File digitale (videoclipuri, fișiere audio, cărți electronice, etc.)
- Restaurante
- Cataloage de produse
- …multe altele!
Cum să creați un design personalizat al paginii de categorie WooCommerce cu WooCommerce Product Table
Un alt beneficiu al utilizării unui layout de tabel pentru designul paginii dvs. de categorie WooCommerce este că puteți configura totul fără a avea nevoie de cunoștințe tehnice speciale.
Pentru a face acest lucru, veți utiliza pluginul WooCommerce Product Table. Acest plugin vă listează produsele WooCommerce într-un aspect de tabel flexibil pe care îl controlați, împreună cu posibilitatea de a adăuga filtre, căsuțe de căutare, paginare și multe altele.
De asemenea, puteți utiliza pluginul pentru a afișa doar produsele din anumite categorii sau subcategorii. WooCommerce Product Table oferă două modalități de a face acest lucru:
- Puteți activa în mod centralizat aspectul tabelului de produse pe toate paginile categoriilor de produse. (Ideal dacă doriți să vă personalizați toate paginile de categorii de produse.)
- Alternativ, puteți utiliza un cod scurt pentru a vă crea manual propriile pagini de categorii WooCommerce. (De exemplu, dacă doriți să folosiți tabelul pentru a lista doar produsele din anumite categorii.)
Mai jos, vă vom arăta cum să configurați WooCommerce Product Table pentru a realiza ambele opțiuni.
Configurați WooCommerce Product Table
După ce ați instalat și activat pluginul WooCommerce Product Table, veți dori să configurați setările sale implicite.
Aceasta vă permite să controlați ce informații sunt afișate în tabelul de produse și cum funcționează totul, cum ar fi dacă să afișați sau nu anumite atribute ale produsului sau cum va funcționa funcționalitatea de adăugare la coș.
Pentru a începe, mergeți la WooCommerce → Setări → Produse → Tabele de produse → Tabele de produse pentru a accesa setările pluginului de categorie.
Merită să parcurgeți toate setările disponibile și să le alegeți pe cele care se potrivesc situației dvs. unice. Cu toate acestea, vom acoperi doar elementele de bază care sunt esențiale pentru a vă proiecta pagina de categorie WooCommerce.
În primul rând, găsiți setarea Columns (Coloane) în secțiunea Table content (Conținut tabel). Aici veți controla ce informații apar în tabelul dvs. Pe lângă afișarea informațiilor de bază despre produs, puteți afișa și atributele produsului, câmpuri personalizate și multe altele.
Puteți găsi o listă completă de opțiuni pentru coloane aici, dar această configurație este o versiune de bază bună care va funcționa pentru majoritatea magazinelor:
image, name, description, price, buy
Mai jos, veți găsi secțiunea Coloana Adaugă în coș, care vă permite să controlați butoanele de adăugare în coș.
Pentru a atrage achizițiile în masă, puteți adăuga căsuțe de selectare care permit cumpărătorilor să adauge în masă mai multe produse în coșul lor. Sau, puteți, de asemenea, să adăugați pur și simplu un buton separat de adăugare la coș pentru fiecare produs (sau ambele!):
După ce ați terminat, asigurați-vă că salvați modificările.
După ce ați configurat setările produsului, aveți două moduri de a vă crea categoriile WooCommerce actuale. Ne vom uita la acestea în continuare.
2a. Activați tabelele de produse pe toate paginile de categorie
WooCommerce Product Table vine cu o opțiune pentru a adăuga automat aspectul tabelului de produse la toate paginile de categorie. Aceasta este cea mai simplă opțiune și durează doar o secundă pentru a fi configurată.
În pagina de setări a pluginului, bifați pur și simplu căsuța „Arhivele categoriilor de produse”:
Aceasta va activa la nivel global aspectul tabelar pentru toate categoriile, înlocuind aspectul implicit care a venit cu tema dvs.
Aflați mai multe despre această metodă.
2b. Utilizați un cod scurt pentru a vă crea propriul design al paginii de categorii WooCommerce
Puteți utiliza, de asemenea, un cod scurt pentru a lista produsele WooCommerce pe categorii. Această opțiune este perfectă dacă nu doriți să folosiți aspectul tabelului de produse pe TOATE categoriile dvs.
Adaugați pur și simplu codul scurt al pluginului la o pagină WordPress obișnuită și specificați categoriile din care doriți să listați produsele. Repetați procesul de câte ori doriți – o dată pentru fiecare categorie.
Cu această metodă, în esență, creați o nouă pagină de categorie de produse WooCommerce pentru fiecare categorie de produse pe care doriți să o afișați, mai degrabă decât să reproiectați pagina de categorie WooCommerce la nivel global.
Puteți fie să continuați să folosiți paginile de categorie existente împreună cu noul dvs. aspect de tabel. Sau puteți să înlocuiți pur și simplu linkurile către fiecare pagină de categorie de produse existentă cu noile dvs. pagini de categorie alimentate de tabel. (Sfat: Dacă nu mai folosiți paginile de categorie încorporate, redirecționați-le către cele noi în care folosiți tabele de produse.)
Pentru a începe, mergeți la Pages → Add New pentru a crea o pagină WordPress de bază. Apoi, adăugați codul scurt [product_table] la pagină. De asemenea, puteți adăuga un titlu al categoriei utilizând câmpul de titlu obișnuit.
În mod implicit, codul scurt va afișa toate produsele dvs. WooCommerce.
Cu toate acestea, puteți utiliza parametrul de cod scurt categoria pentru a filtra produsele din anumite categorii și/sau subcategorii. Puteți, de asemenea, să combinați mai multe categorii sau să creați condiții, cum ar fi ca un produs să trebuiască să se afle în mai multe categorii sau subcategorii pentru a fi afișat.
De exemplu, pentru a filtra produsele din categoria „scaun”, ați putea folosi următorul cod scurt:
[product_table category="chair"]
Dacă doriți să adăugați o imagine a categoriei sau un nume de categorie, puteți face acest lucru și deasupra codului scurt folosind editorul obișnuit al WordPress.
După ce publicați pagina, ar trebui să vedeți noul design al paginii dvs. de categorie WooCommerce:
Pentru a crea pagini pentru categorii WooCommerce suplimentare, repetați procesul pentru fiecare categorie sau subcategorie de produse pe care doriți să o afișați.
Faceți ca categoriile WooCommerce să fie mai ușor de căutat cu ajutorul filtrelor
Dacă doriți să adăugați mai multe instrumente de căutare și filtrare la categoriile WooCommerce, aveți două opțiuni:
- Puteți adăuga opțiuni de căutare, sortare și filtrare prin intermediul setărilor WooCommerce Product Table. Acestea vor apărea deasupra sau dedesubtul tabelului dvs. de produse.
- WooCommerce Product Table include widget-uri pe care le puteți folosi pentru a adăuga filtre în bara dvs. laterală.
Puteți alege metoda preferată sau este, de asemenea, complet în regulă să folosiți ambele abordări în același timp. Acest lucru va permite cumpărătorilor dvs. să își aleagă metoda preferată.
Pentru a adăuga opțiuni de căutare, sortare și filtrare direct în aspectul tabelului, mergeți la WooCommerce → Setări → Produse → Tabele de produse. Apoi, derulați în jos până la secțiunea Controale tabel și configurați opțiunile în funcție de preferințele dvs.:
Puteți afla mai multe în acest articol de ajutor.
Pentru a utiliza widgeturile de filtrare, puteți merge la Appearance → Widgets. Acolo, veți găsi patru widgeturi noi cu prefixul „Product Table:”. Puteți adăuga toate widgeturile, sau puteți alege doar filtrele specifice pe care doriți să le includeți:
Iată un exemplu de cum ar putea arăta ambele seturi de filtre:
Cum să creați un design personalizat al paginii de categorie WooCommerce cu ajutorul codului
Dacă vă pricepeți la PHP, HTML și CSS, este de asemenea posibil să creați un design personalizat al paginii de categorie WooCommerce folosind codul, fără un plugin WooCommerce.
Voi dori să lucrați cu fișierul archive-product.php din tema dvs. sau tema copil. De asemenea, puteți utiliza aceeași abordare pentru a vă edita paginile cu un singur produs prin intermediul fișierului single-product sau prin alte părți ale magazinului dumneavoastră.
Din păcate, deoarece va trebui să editați direct codul din fișierele șablon ale temei dumneavoastră pentru a face fiecare modificare, această metodă nu este accesibilă celor care nu sunt dezvoltatori. Vă recomandăm să apelați la Codeable dacă aveți nevoie de ajutor sau să rămâneți la metoda mai simplă de dispunere a tabelelor de mai sus.
Creați astăzi un design personalizat al paginii de categorie WooCommerce!
Crearea unui design personalizat al paginii de categorie WooCommerce vă permite să utilizați o modalitate mai prietenoasă pentru cumpărători de a vă afișa produsele.
Prin utilizarea unui layout de pagină de categorie bazat pe tabele, puteți afișa mai multe produse, împreună cu mai multe detalii despre fiecare produs.
De asemenea, puteți adăuga o mulțime de opțiuni utile de căutare și filtrare pentru a-i ajuta pe cumpărătorii dvs. să găsească produse.
Prin conectarea mai eficientă a cumpărătorilor cu produsele de care sunt interesați, puteți vinde mai multe produse și puteți crește veniturile magazinului dvs.
Pentru a utiliza un design de tabel pentru categoriile dvs. din WooCommerce, puteți utiliza pluginul WooCommerce Product Table. Configurarea este ușoară și nu veți avea nevoie de cunoștințe tehnice speciale pentru a începe să funcționați, așa cum ați face-o dacă ați dori să editați direct fișierul șablon de arhivă.
Începeți astăzi și creați o modalitate mai eficientă pentru cumpărători de a naviga prin categoriile de produse în magazinul dvs. WooCommerce.