Cum să personalizați pagina produsului WooCommerce

Căutați modalități de a vă personaliza magazinul și de a îmbunătăți experiența clienților? Avem articolul potrivit pentru tine! În acest ghid, vă vom arăta cum să vă personalizați pagina produsului WooCommerce pentru a vă ajuta să vă creșteți ratele de conversie și să vă creșteți vânzările.

De ce să personalizați pagina produsului WooCommerce?

Designul paginii dvs. de produs este o parte integrantă a experienței de cumpărături a clientului dvs. în magazinul dvs. online. Produsele dvs. sunt partea cea mai unică și distinctivă a magazinului dvs. WooCommerce. Prin urmare, ar trebui să vă personalizați pagina produsului și să vă asigurați că vă evidențiază produsele și serviciile. Aceasta include secțiuni convenabile ale paginii produsului, cum ar fi secțiuni suplimentare cu detalii, diagrame de mărimi, diferite previzualizări ale imaginilor pentru variațiile de produs, opțiuni suplimentare de comandă și multe altele. Și asta înseamnă doar adăugarea de conținut. Puteți, de asemenea, să reordonați aceste secțiuni, să le eliminați pe cele implicite, să le reproiectați și multe altele.

Indiferent de ceea ce faci, obiectivul tău principal ar trebui să fie să-ți îmbunătățești experiența clienților în magazinul tău WooCommerce. Acest lucru vă va ajuta în mod natural să vă creșteți vânzările. Dacă site-ul dvs. este ușor de navigat și utilizatorii pot găsi cu ușurință ceea ce caută, este mai probabil să cumpere, să revină și să vă recomande magazinul. De exemplu, puteți adăuga butoane de achiziție directă pentru a-i ajuta să cumpere rapid, să includeți diagrame de comparație pentru a-i ajuta să aleagă produsul potrivit sau să adăugați carusele de variante unice pentru a afișa toate opțiunile pentru variantele unui singur produs.

Există, de asemenea, elemente interesante de generare de clienți potențiali pe care le puteți adăuga pentru a îmbunătăți vânzările produsului dvs. personalizând pagina produsului. Aceasta include adăugarea de produse similare pentru vânzări suplimentare, articole de upsell/downsell și multe altele.

Acum să aruncăm o privire la diferitele opțiuni pe care le aveți pentru a vă edita pagina produsului în WooCommerce.

Cum să personalizați pagina produsului WooCommerce

Există 3 moduri principale de a personaliza pagina produsului WooCommerce :

1. Cu pluginuri
2. Din punct de vedere programatic
3. Cu creatori de pagini

Toate aceste metode au argumente pro și contra. În acest ghid, vă vom arăta pe toate, astfel încât să puteți alege cea mai potrivită pentru dvs.

1. Cum să personalizați pagina produsului WooCommerce folosind plugin-uri

Există mai multe plugin-uri pentru a edita pagina produsului în WooCommerce. Să aruncăm o privire la unele dintre cele mai bune.

1) Finalizare directă pentru WooCommerce

Direct Checkout este pluginul perfect pentru a simplifica procesul de cumpărare și pentru a face experiența de cumpărături a clienților dumneavoastră ușoară. Vine cu multe opțiuni pentru a vă personaliza pagina produsului prin adăugarea de butoane de cumpărare rapidă și redirecționări ingenioase pentru adăugarea în coș.

În acest fel, puteți permite cumpărătorilor dvs. să vă achiziționeze rapid articolele și să vă creșteți ratele de conversație. Acest instrument vă permite, de asemenea, să vă personalizați produsul și pagina de plată prin adăugarea de opțiuni de vizualizare rapidă la categoriile de produse și paginile de arhivă, făcând procesul de vizualizare și cumpărare a articolelor mai convenabil pentru clienții dvs.

În plus, Direct Checkout include personalizarea AJAX a butonului de adăugare în coș pentru a accelera procesul de cumpărare și pentru a elimina necesitatea reîncărcării paginii atunci când utilizatorii adaugă un articol în coșul lor. În plus, puteți sări peste pagina coșului de cumpărături și să vă redirecționați clienții de pe pagina produsului la finalizarea comenzii cu un singur clic.

Caracteristici cheie

• Este un instrument excelent pentru a simplifica procesul de cumpărare și pentru a crește ratele de conversie
• Vine cu o mulțime de opțiuni pentru a personaliza atât produsul, cât și pagina de plată
• Butoane convenabile de achiziție rapidă cu un singur clic pentru a le adăuga la paginile produselor
• Butoanele AJAX activate pentru Adăugare în coș și redirecționări pentru adăugare în coș
• Opțiune de a personaliza câmpurile de plată, precum și de a adăuga opțiuni de vizualizare rapidă la arhivele și categoriile de produse

Preț

Acesta este un plugin freemium. Are o versiune gratuită și trei planuri premium care încep de la un preț promoțional de 19 USD (plată unică). Cu toate acestea, puteți folosi următorul cod și obțineți o reducere de 10% :

 direct_ck10

2) WooThumbs

WooThumbs este un alt instrument excelent care vă permite să vă afișați produsele WooCommerce în cel mai interesant mod. Pluginul vă oferă o modalitate alternativă de a vă configura galeriile și imaginile de produse și permite un alt domeniu de personalizare a paginilor dvs. de produse.

În plus, puteți adăuga opțiuni convenabile pentru a facilita navigarea prin imaginile produselor și pentru a îmbunătăți vânzările magazinului. Aceasta include adăugarea de miniaturi glisante, modele unice de galerie pe care le puteți personaliza pentru a se potrivi cu tema dvs., opțiuni de zoom integrate pentru imaginile dvs. și o mulțime de opțiuni suplimentare de galerie de imagini. În cele din urmă, puteți include, de asemenea, galerii de imagini unice pentru variațiile de produse, precum și să încorporați videoclipuri în galeriile de produse pentru mai multe conversii de vânzări.

Caracteristici cheie

• Tone de opțiuni extinse pentru personalizarea galeriilor de imagini ale produselor
• Opțiuni pentru alunecarea miniaturilor, precum și opțiuni de zoom pentru imaginile produselor
• Galerii de imagini flexibile pentru variații de produs pentru a adăuga galerii de imagini unice pentru fiecare variantă de produs

Preț

WooThumbs este un plugin premium care începe de la 79 USD pe an și are o perioadă de încercare gratuită de 14 zile.

3) Suplimente de produs

Product Add-Ons este un plugin esențial dacă sunteți în căutarea unor modalități de a organiza experiența de cumpărături a clienților dvs. prin intermediul paginilor de produse. Acest instrument este conceput pentru a vă ajuta să vă îmbunătățiți conversiile de vânzări, oferind în același timp mai multe opțiuni clienților dvs. Vă permite să adăugați opțiuni unice de pagină de produs, cum ar fi selecții bazate pe imagini pentru produse, casete de selectare suplimentare pentru produse, precum și texte personalizate pentru mai multă personalizare a produsului.

Mai mult, puteți include opțiuni unice de preț personalizate pentru a face pagina de produs mai versatilă. În cele din urmă, puteți adăuga și opțiunea de a percepe taxe fixe sau procente pentru mai multe opțiuni de servicii pentru magazinul dvs. WooCommerce. Pentru mai multe informații despre cum să adăugați taxe în magazinul dvs., consultați acest ghid.

Caracteristici cheie

• Adăugări suplimentare de pagini de produs, cum ar fi selecții bazate pe imagini, text personalizat, exemple de imagini și multe altele.
• Opțiuni suplimentare de extensie pentru produse, cum ar fi casete de selectare personalizate și introduceri de text.
• Opțiuni pentru a adăuga taxe fixe, taxe procentuale sau chiar pentru a adăuga prețuri personalizate pentru opțiuni suplimentare, cum ar fi donații, sfaturi și multe altele

Preț

Product Add-Ons este un plugin premium care vă va aduce înapoi 49 USD pe an.

4) Prețuri specifice pentru client WISDM

Dacă căutați modalități de a vă face magazinul și opțiunile de preț mai inteligente și mai convenabile, atunci acest plugin este cu siguranță unul pe care ar trebui să îl verificați. WisdmLABS vă oferă un plugin unic de prețuri care vă permite să setați prețuri personalizate pentru diferiți clienți, utilizatori și grupuri. Aceasta înseamnă că puteți seta prețuri personalizate pentru utilizatorii cu roluri diferite, clienți anumiți sau abonați.

Dar asta nu este tot. Prețul specific pentru clienți WISDM are alte opțiuni inteligente de preț, cum ar fi furnizarea de coduri de reducere și oferte pentru categorii sau cantități de produse și chiar adăugare de reduceri în bloc pentru anumite niveluri pentru achiziții multiple.

În plus, puteți seta reguli de reducere la coș pentru anumite sume. În acest fel, puteți integra abonamentele site-ului dvs. web și puteți atrage utilizatorii să cheltuiască mai mult pe magazinul dvs., oferindu-le oferte personalizate.

Caracteristici cheie

• Opțiuni pentru a seta prețuri specifice pentru clienți individuali, abonați și roluri de utilizator.
• Oferiți reduceri și oferte de vânzare cumpărătorilor și cumpărătorilor în vrac
• Stabiliți reguli de preț pentru categoriile de produse, precum și stabiliți reduceri și oferte la nivelul întregului magazin

Preț

Acesta este un instrument premium care începe de la 80 USD pe an.

5) Elex WooCommerce Solicitați o cotație

Dacă conduceți un magazin WooCommerce unde vindeți produse în vrac sau doriți să oferiți prețuri diferite în funcție de ceea ce doresc clienții, atunci acest plugin vă poate economisi mult timp. WooCommerce Request a Quote adaugă un buton ingenios „Solicitați o cotație” pe care clienții dvs. îl pot folosi pentru a trimite o cerere de cotație pentru dvs.

Puteți apoi să răspundeți oricărei solicitări de cotație cu o estimare bună a prețurilor și să vă satisfaceți clienții fără nicio bătaie de cap. Acest lucru face procesul de solicitare și acceptare a ofertelor mai ușor și mai flexibil.

În cele din urmă, puteți accepta, de asemenea, comenzi pentru produse care nu sunt în stoc fără probleme și puteți adăuga ajustări de preț pentru utilizatorii care ar putea cumpăra produsele dvs. în diferite dimensiuni în vrac.

Caracteristici cheie

• Buton Solicitați o cotație pentru a utiliza pentru comandă
• Verificarea plăților și notificări ale administratorului
• Opțiuni simple pentru a răspunde, accepta sau respinge ofertele clienților
• Opțiuni pentru activarea cererilor de cotații de la anumite roluri

Preț

WooCommerce Request a Quote este un plugin premium care începe de la 59 USD (plată unică).

Dacă sunteți în căutarea mai multor plugin-uri pentru a edita pagina produsului, aruncați o privire la această postare.

Personalizați pagina produsului cu Direct Checkout

Acum să aruncăm o privire la modul în care puteți edita pagina produsului în WooCommerce folosind Direct Checkout. Acest instrument freemium are peste 60.000 de descărcări în depozitul WordPress și vă va ajuta să vă creșteți conversiile. Versiunea gratuită are funcții de bază, așa că pentru a vă duce pagina produsului la următorul nivel vă recomandăm unul dintre planurile premium care încep de la doar 19 USD (plată unică).

Să aruncăm o privire la câteva dintre lucrurile pe care le puteți face cu Direct Checkout pentru a vă personaliza pagina produsului.

1. Adăugați butonul de cumpărare rapidă

Una dintre cele mai interesante opțiuni pe care le oferă acest instrument este posibilitatea de a adăuga un buton de cumpărare rapidă. În acest fel, procesul de checkout este mult mai rapid.

În loc să adăugați produsul în coș, mergeți la pagina coș și apoi la pagina de finalizare a comenzii, clienții dvs. vor putea cumpăra în doar câteva clicuri. Și cea mai bună parte este că este foarte ușor de configurat.

După instalarea și activarea pluginului, accesați WooCommerce > Direct Checkout > General , activați redirecționarea și setați următoarele opțiuni:

• Adăugat la redirecționare coș : Da
• Adăugat în coș redirecționare către : Checkout

Salvează modificările și gata! Acum, când utilizatorii apasă butonul de cumpărare rapidă, vor sări peste pagina coșului de cumpărături și vor merge direct la pagina de plată.

Pentru mai multe informații despre achizițiile rapide, aruncați o privire la ghidul nostru despre cum să adăugați un buton de cumpărare rapidă în magazinul dvs.

2. AJAX adauga in cos

Adăugarea AJAX în coș este o altă caracteristică excelentă a WooCommerce Direct Checkout. Funcția de adăugare în coș AJAX permite clienților să includă produse în coșul lor fără a fi nevoie să reîncarce întregul site. Acest lucru îmbunătățește experiența utilizatorului și vă va ajuta să creșteți vânzările. În plus, deoarece paginile nu trebuie să se reîncarce de atâtea ori, reduce lățimea de bandă și încărcarea serverului.

Pentru a activa funcția de adăugare în coș AJAX, accesați WooCommerce > Cumpărare directă > Produse și activați opțiunea de adăugare AJAX în coș .

Dacă nu doriți să instalați pluginuri terță parte pe site-ul dvs. și aveți abilități de codare, puteți personaliza și pagina produsului WooCommerce în mod programatic. Să vedem cum se face.

2. Cum să personalizați pagina de produs WooCommerce în mod programatic

O altă alternativă este să editați pagina produsului în WooCommerce în mod programatic. Nu recomandăm această metodă pentru utilizatorii începători, dar dacă știți ce faceți și doriți să adăugați funcții personalizate pe pagina produsului fără vreun instrument suplimentar, aceasta este o opțiune excelentă.

Pentru aceasta, vom folosi coduri ingenioase construite în jurul WooCommerce Hooks . Dacă nu sunteți familiarizat cu acestea, consultați acest ghid complet despre cum să utilizați cârligele WooCommerce. Ghidul vă oferă, de asemenea, informații despre cum să personalizați fișierele șablon WooCommerce , care este o opțiune excelentă dacă doriți să vă editați magazinul.

Există multe lucruri pe care le puteți face dacă știți să codificați. Pentru această demonstrație, ne vom concentra asupra modului în care puteți elimina sau reordona elemente din Pagina dvs. de produs WooCommerce. Dacă doriți mai multe exemple de lucruri pe care le puteți face, puteți consulta ghidul nostru dedicat despre cum să editați pagina de produs WooCommerce în mod programatic.

NOTĂ : Deoarece vom edita câteva fișiere de bază înainte de a începe, asigurați-vă că creați o copie de rezervă completă a site-ului dvs. În plus, vă recomandăm să utilizați o temă pentru copii. Pentru a face acest lucru, îl puteți crea sau utiliza oricare dintre aceste plugin-uri.

Eliminarea elementelor din pagina produsului WooCommerce

Pentru a adăuga aceste coduri, deschideți editorul de teme WordPress în tabloul de bord WordPress accesând Teme > Editor de teme . Apoi, faceți clic pe fișierul Functions.php din lista de fișiere din coloana din dreapta. Aici, puteți adăuga propriile scripturi WooCommerce pentru a începe să vă personalizați magazinul.

WooCommerce îți oferă mai multe cârlige pentru a personaliza orice element din magazinul tău. Aceste cârlige funcționează cu elemente specifice, așa că trebuie să utilizați cârligul potrivit cu funcția potrivită și valoarea de prioritate potrivită pentru a elimina sau reordona aceste elemente. Puteți vizualiza toate cârligele și parametrii aferenti acestora pe această pagină sau fișierul content-single-product.php al plugin-ului WooCommerce.

Acum, să aruncăm o privire la modul în care puteți adăuga un script pentru a elimina meta, descrierea și stelele de evaluare a produsului de pe pagina produsului WooCommerce.

Pentru aceasta, pur și simplu lipiți următorul cod în fișierul functions.php :

 // elimină stelele de evaluare
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// elimină meta produs 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// elimină descrierea
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

Apoi, faceți clic pe Actualizare fișier , iar pagina dvs. de produs WooCommerce ar trebui să aibă aceste elemente eliminate.

Recomandarea elementelor paginii produsului WooCommerce

De asemenea, puteți reordona elementele paginii produsului WooCommerce folosind cârlige. În mod implicit, elementele WooCommerce au propria lor ordine de prioritate. Dacă nu sunteți familiarizat cu ele, puteți consulta această pagină.

Acum, pentru a reordona elementele, puteți doar să eliminați elementul și să le adăugați înapoi folosind cârligul add_action . Puteți adăuga apoi propria dvs. ordine de prioritate pe cârlig, astfel încât elementele să apară în ordinea preferată.

De exemplu, dacă dorim ca secțiunea de descriere să apară imediat după titlu, îi putem acorda o ordine de prioritate personalizată de 6. Deoarece titlul are o ordine de 5, aceasta va adăuga descrierea dvs. chiar sub el.

Pentru a face acest lucru, adăugați acest script în fișierul functions.php și faceți clic pe Actualizare fișier .

 // schimba ordinea descrierii
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 ); 

Acestea sunt doar câteva exemple de ceea ce puteți face pentru a vă personaliza pagina de produs WooCommerce în mod programatic . Cu toate acestea, există multe alte lucruri pe care le puteți face. Dacă sunteți în căutarea inspirației, consultați ghidul nostru dedicat despre cum să editați pagina produsului folosind cod.

3. Editați Pagina produsului WooCommerce utilizând Page Builders

Creatorii de pagini sunt un răspuns universal la personalizarea paginilor dvs. WooCommerce. Aceasta nu include numai pagina de produs, ci și orice altă pagină de pe site. Creatorii de pagini WordPress au capacitatea suplimentară de a seta și de a utiliza șabloane de pagină WooCommerce. În acest fel, nu numai că puteți utiliza o mare varietate de elemente personalizate pentru a vă personaliza paginile de produse, ci și să folosiți șabloane și pagini pre-proiectate pentru a vă ușura viața.

Există o mare varietate de constructori de pagini compatibile cu WooCommerce pe care le puteți folosi. Chiar dacă funcționează similar, au unele diferențe, așa că vă recomandăm să consultați ghidurile noastre dedicate pentru a vă ajuta să vă personalizați paginile de produse.

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

Bonus: Personalizarea elementelor WooCommerce folosind CSS

De asemenea, puteți explora opțiunea de a vă personaliza elementele WooCommerce adăugând fragmente CSS la tema dvs. WordPress. Acest lucru vă permite să explorați idei precum personalizarea dimensiunilor fonturilor pentru titluri, cumpărați acum culorile butoanelor și multe altele.

Pentru a adăuga fragmente CSS la tema dvs. WordPress, accesați Aspect > Personalizare și faceți clic pe CSS suplimentar.

Aici, puteți adăuga fragmente CSS și personaliza orice element doriți. Există o mulțime de lucruri pe care le puteți edita, dar pentru a vă oferi câteva idei, vă vom lăsa câteva fragmente mai jos. Mai mult, puteți folosi acest selector de culori HTML pentru a găsi codul hexadecimal potrivit pe care să îl adăugați la codurile dvs. CSS de culoare.

 Modificați dimensiunea fontului pentru titlul produsului
.woocommerce div.product .product_title {
dimensiunea fontului: 42px;
}

Schimbați culoarea titlului produsului
.woocommerce div.product .product_title {
culoare: #AAb733;
}

 Schimbați culoarea butonului Cumpărați acum
.woocommerce div.produs .button {
fundal: #000000;
}

După ce ați adăugat fragmentele, nu uitați să faceți clic pe Publicați pentru a finaliza modificările.

Concluzie

Una peste alta, editarea paginii dvs. de produs este esențială pentru a îmbunătăți experiența de cumpărături a clienților dvs. și pentru a vă crește vânzările. În acest ghid, am văzut diferite moduri de a personaliza pagina produsului în WooCommerce:

• Folosind pluginuri dedicate
• Programatic, folosind cârlige și șabloane WooCommerce
• Folosind creatori de pagini precum Divi și Elementor

Fiecare dintre aceste metode are avantajele și dezavantajele sale, așa că alege-o pe cea care se potrivește cel mai bine abilităților și nevoilor tale. Dacă nu aveți abilități de codare, folosirea unui plugin este cea mai bună alegere. Există mai multe instrumente, dar dacă doriți ceva ușor de utilizat, eficient și prietenos cu bugetul, Direct Checkout este cel potrivit pentru dvs.

Pe de altă parte, dacă vă place să codificați și doriți să creați o soluție personalizată, vă puteți personaliza magazinul în mod programatic cu câteva scripturi. Opțiunile sunt nesfârșite și puteți face orice, așa că inspirați-vă din scripturile noastre și creați-vă propriile soluții.

Dacă sunteți în căutarea mai multor ghiduri pentru a vă personaliza magazinul, consultați următoarele postări:

• Cum să personalizați pagina de magazin WooCommerce
• Cum se editează pagina Contul meu
• Ghid complet pentru personalizarea butonului Adaugă în coș în WooCommerce
• Cum se adaugă taxe la checkout
• Cum să ascundeți produse similare în WooCommerce

Ce metodă ați folosit pentru a vă edita pagina produsului? Ați întâmpinat probleme când urmați acest ghid? Spune-ne în comentariile de mai jos și vom face tot posibilul să te ajutăm.