Cum să personalizați pagina produsului WooCommerce în Divi

Utilizați Divi și doriți să editați pagina produsului pentru a vă crește ratele de conversie? Ai venit la locul potrivit! În acest ghid, vă vom arăta diferite moduri de a personaliza pagina produsului WooCommerce în Divi .

WooCommerce este cel mai bun instrument de comerț electronic. Pluginurile potrivite și o temă WordPress optimizată este primul pas pentru a avea un magazin WooCommerce de succes. Dar asta nu este suficient pentru a avea o afacere de succes. Pentru a vă duce magazinul la următorul nivel, ar trebui să personalizați cele mai importante secțiuni. Am văzut deja cum să editați pagina magazinului și pagina de finalizare a comenzii, așa că astăzi vă vom arăta cum să personalizați pagina produsului WooCommerce în Divi .

De ce să personalizați pagina produsului WooCommerce?

Pagina produsului este locul unde afișați articolele pe care le vindeți în magazinul dvs. Acesta poate face sau distruge afacerea dvs., așa că trebuie să vă faceți timp pentru a o optimiza pentru a vă crește ratele de conversie.

În mod implicit, pluginul WooCommerce vine cu un șablon personalizat de pagină de produs. Deci, indiferent dacă utilizați o temă simplă precum GeneratePress sau una complexă precum Avada, elementele și designul paginii de produs vor fi aceleași. De aceea, dacă doriți să faceți o impresie asupra clienților dvs., ar trebui să personalizați pagina implicită a produsului WooCommerce .

Schimbarea culorilor și a elementelor paginii produsului este un început bun, dar puteți face mult mai multe. O opțiune este să creați un șablon de pagină de produs nou cu un design personalizat. Cu un pic de PHP, HTML și CSS vă puteți reproiecta complet pagina produsului. Cu toate acestea, dacă utilizați Divi, există o opțiune mult mai bună.

Tema Divi vine cu propriul generator de pagini personalizate numit Divi Builder . Vă permite să personalizați cu ușurință pagina produsului WooCommerce și fiecare centimetru al site-ului dvs. fără a scrie o singură linie de cod. Să aruncăm o privire mai atentă la cum să o facem.

Cum să personalizați pagina produsului WooCommerce în Divi

Pentru această demonstrație, vom folosi pluginul Divi Builder pentru a face toate modificările paginii noastre de produs. Înainte de a începe, asigurați-vă că aveți Divi cu Divi Builder instalat pe site-ul dvs.

Activați Editorul vizual

Pentru a începe să vă personalizați pagina de produs WooCommerce în Divi cu Divi Builder, deschideți orice pagină de produs pe care doriți să o editați. Odată ce pagina se deschide, veți vedea un buton numit Activare editor vizual pe bara de administrare. Faceți clic pe acesta pentru a porni Divi Builder .

Acum că ați activat editorul vizual Divi, veți putea să selectați orice modul de pe pagina respectivă și să îl editați. Pentru a personaliza șablonul actual, puteți pur și simplu să editați modulele existente sau să adăugați altele noi. În secțiunea de module, veți vedea modulele bazate pe WooCommerce, cum ar fi:

• Adaugă in coș
• Informații suplimentare
• Pesmet
• Notificare coș
• Descriere
• Galerie
• Imagini
• Meta
• Preț
• Evaluare
• Produs înrudit
• Recenzii
• Stoc
• Filele
• Titlu
• Upsell

Puteți adăuga oricare dintre aceste module la pagina dvs. și o puteți face mai ușor de utilizat, făcând clic pe el. În plus, cea mai recentă versiune a constructorului Divi funcționează extrem de bine cu WooCommerce, astfel încât să puteți personaliza orice module cu ușurință. Să aruncăm o privire la unele dintre lucrurile pe care le puteți edita.

1. Afișați sau Ascundeți recenziile

Să începem cu ceva simplu. După cum puteți vedea mai sus, puteți afișa sau ascunde cu ușurință funcția de evaluare cu stele și puteți dezactiva numărul de recenzii ale clienților. Pur și simplu faceți clic pe elementul de revizuire și apoi apăsați pe pictograma Setări . Apoi accesați secțiunea Elemente și veți avea opțiunea de a afișa sau ascunde evaluarea cu stele și recenziile clienților.

Pentru a crea încredere în rândul clienților dvs. online, vă recomandăm să afișați atât ratingul cu stele, cât și recenziile pe pagina produsului.

2. Modificarea galeriei

Nu este un secret pentru nimeni că o imagine valorează cât o mie de cuvinte. De aceea, pentru a vă crește ratele de conversie, este o idee bună să adăugați o galerie de produse în paginile dvs. de produse. WooCommerce include această caracteristică în mod implicit, așa că tot ce trebuie să faceți este să încărcați imaginile pe pagina produsului sau să le alegeți din pagina media.

După ce ați actualizat pagina produsului cu imaginile dvs., va arăta astfel:

Dacă dintr-un motiv oarecare doriți să afișați o singură imagine a fiecărui produs, cu Divi Builder puteți ascunde galeria oricărui produs. Pur și simplu dați clic pe galerie, apăsați pictograma Setări , mergeți la Elemente și veți avea opțiunea de a dezactiva galeria.

În plus, puteți ascunde imaginea prezentată și insigna de vânzări. Având în vedere cât de importante sunt imaginile la vânzare, vă recomandăm să adăugați cel puțin 3-4 poze cu fiecare dintre produsele dumneavoastră.

3. Modificarea imaginii prezentate

Un alt mod interesant de a personaliza pagina produsului WooCommerce în Divi este editarea imaginii prezentate . Prima impresie contează, așa că ar trebui să alegeți o imagine caracteristică atractivă pentru produsul dvs. Această imagine va fi vizibilă și pe pagina arhivei magazinului.

Când deschideți opțiunile de imagine prezentate folosind generatorul Divi, veți putea schimba imaginea prezentată și insigna de vânzare.

După cum am menționat anterior, vă recomandăm să afișați imagini atractive, deoarece pot avea un impact mare asupra ratelor de conversie.

4. Adaugă în coș Modificare buton

Pentru a adăuga produse în coș, utilizatorii trebuie să facă clic pe butonul Adăugați în coș. WooCommerce vine cu un câmp de cantitate cu butonul Adăugați în coș în mod implicit, astfel încât nu trebuie să creați un buton manual. În această secțiune, vă vom arăta cum puteți modifica butonul Adaugă în coș cu Divi Builder.

În secțiunea Elemente , veți vedea două opțiuni principale.

• Câmpul de cantitate
• Stoc

Dacă doriți să oferiți utilizatorului posibilitatea de a selecta cantitatea de produs, lăsați câmpul de cantitate așa cum este. Cu toate acestea, dacă vindeți cursuri online, de exemplu, este posibil să doriți să dezactivați opțiunea de cantitate pentru a elimina zgomotul de pe pagina produsului.

După cum puteți vedea, odată ce am dezactivat câmpul de cantitate, câmpul va dispărea. Pe această pagină de produs, nu avem o opțiune de a vedea opțiunea de stoc, dar dacă afișați stocul pe site-ul dvs., îl puteți activa sau dezactiva în același mod.

5. Aplicați modificări la Produsele conexe

Afișarea produselor legate de cumpărători este o modalitate excelentă de a vă crește vânzările. De obicei, WooCommerce afișează implicit produse similare pe baza categoriei primare a articolului. Cu toate acestea, dacă tema sau șablonul dvs. nu afișează produse similare, avem o soluție pentru dvs. Să vedem cum poți personaliza pagina produsului și să adaugi un nou rând cu elemente aferente cu Divi.

Mai întâi, adăugați un nou rând pe pagină. Pentru acest tutorial, vom adăuga un singur rând, dar puteți alege stilul care se potrivește mai bine magazinului dvs.

După aceea, adăugați modulul de produs asociat WooCommerce la rând, așa cum se arată mai jos.

Veți vedea că o secțiune de produs asociată va fi adăugată în pagină. Apoi, puteți personaliza aspectul și culoarea.

Dacă nu afișați produse similare, vă recomandăm să le încercați. Sunt ușor de configurat și vă pot ajuta să vă creșteți vânzările.

6. Adăugați o comutare

Comutatoarele sunt o modalitate excelentă de a afișa informații pe pagina produsului, păstrându-l curat. În Divi, puteți adăuga o comutare folosind modulul Comutare. În această secțiune, vom arăta cum să adăugați un modul de comutare sub descrierea produsului.

Să începem prin a trece cu mouse-ul peste descrierea produsului și a face clic pe butonul +. Apoi, căutați Comutare în bara de căutare și deschideți modulul de comutare.

Pentru a adăuga comutatorul, aveți nevoie de două lucruri principale.

• Titlu
• Corp

Pentru această demonstrație, vom folosi numele produsului ca titlu de comutare și descrierea produsului ca corp de comutare. Pentru a face acest lucru, pur și simplu faceți clic pe pictograma bazei de date din dreapta și veți vedea diferite tipuri de conținut în baza de date. Pentru titlu, vom alege titlul Produs/Arhivă ca titlu , dar puteți selecta tipul de conținut care se potrivește cel mai bine nevoilor dvs.

Acum să facem același lucru pentru corp. Apăsați pictograma bazei de date și alegeți opțiunea Descriere produs din meniu.

Odată ce salvați acest lucru, veți vedea un modul de comutare simplu pe pagina produsului dvs. pe care utilizatorii îl pot apăsa pentru a vedea mai multe informații despre produs.

Divi vă permite, de asemenea, să adăugați și alte elemente personalizate, cum ar fi titluri și descrieri, precum și fonturi, culori și așa mai departe. Vă recomandăm să vă jucați și să personalizați pagina de produs cu comutatoarele.

Pagina produsului WooCommerce Pro-Tip

Înainte de a încheia acest ghid, avem un sfat rapid pentru tine.

Actualizați tema și pluginul în mod regulat

Pentru a vă asigura că aveți întotdeauna acces la cele mai recente funcții pe care Divi le are de oferit, vă recomandăm să păstrați tema Divi, pluginul Divi Builder și nucleul WordPress actualizate la cea mai recentă versiune stabilă disponibilă.

Cel mai simplu mod de a face acest lucru este să activați actualizările automate din panoul tematic Divi.

Tot ce trebuie să introduceți este numele dvs. de utilizator Elegant Themes și cheia API pe care le puteți găsi în tabloul de bord al contului dvs. Elegant Themes. Odată ce le-ați introdus, salvați modificările și veți primi actualizări automate.

Utilizare pe întregul site

Cu noile module Divi Builder, veți putea adăuga secțiuni și personaliza oricare dintre paginile sau postările dvs. Tot ce trebuie să faceți este să activați editorul vizual, să adăugați elementele dorite și să selectați modulele pe care doriți să le utilizați. De exemplu, dacă scrieți o recenzie personalizată a produsului dvs., luați în considerare adăugarea unui buton Adaugă în coș la postarea de recenzie, astfel încât utilizatorii să o poată accesa imediat.

Bonus: Alte metode de a edita pagina produsului WooCommerce

Dacă sunteți în căutarea altor modalități de a vă personaliza pagina de produs, aruncați o privire la acest ghid în care veți învăța cum să utilizați pluginuri, creatori de pagini și fragmente de cod pentru a edita pagina produsului.

Concluzie

În rezumat, personalizarea paginii de produs WooCommerce cu Divi vă poate ajuta să vă creșteți vânzările și să vă creșteți ratele de conversie. Vestea bună este că o poți face fără a scrie o singură linie de cod.

Cu Divi Builder, puteți edita cu ușurință pagina produsului din magazinul dvs., fără pluginuri suplimentare pentru generatorul de pagini. În acest ghid, v-am arătat cum să afișați sau să ascundeți recenziile, imaginile prezentate și galeriile de imagini și cum să personalizați butonul Adăugați în coș și secțiunea de produse aferente. Acestea sunt doar câteva dintre lucrurile pe care le puteți face, așa că vă încurajăm să vă jucați cu Divi Builder și să faceți alte modificări.

Experiența de creare a paginii prin glisare și plasare vă va ajuta să personalizați cu ușurință fiecare centimetru din magazin, chiar dacă nu aveți abilități de codare.

Ce modificări ați făcut magazinului dvs. folosind Divi? Ați avut probleme în urma tutorialului nostru? Anunțați-ne în secțiunea de comentarii de mai jos!