Cum să editați și să personalizați paginile dvs. de produse WooCommerce

Publicat: 2023-02-14

Pagina produsului este crucială pentru procesul de vânzare. Este locul în care cumpărătorul decide să continue și să cumpere articolul sau să plece fără garanție de returnare. Scopul dvs. ca proprietar de magazin online este de a atrage vizitatorii site-ului către paginile dvs. de produse, apoi de a le face să parcurgă pașii finali de Adăugați în coș și de finalizare a comenzii.

În acest scop, este esențial ca paginile dvs. de produse să facă cea mai bună treabă posibilă de a promova articolul vândut. Șablonul implicit de produs WooCommerce este curat și profesionist, oferindu-vă o bază solidă pentru pagina dvs. pe care o puteți construi folosind metodele de mai jos.

Cum să optimizați șablonul de pagină de produs WooCommerce

Există mai multe moduri în care vă puteți personaliza paginile sau șablonul de produse WooCommerce. Unele metode sunt incluse în WooCommerce. Pentru alții, veți avea nevoie de o extensie. De asemenea, puteți utiliza Editorul de site sau puteți face personalizări manual. Să aruncăm o privire mai atentă la fiecare opțiune.

Cum să vă personalizați pagina produsului WooCommerce folosind funcțiile încorporate

Multe optimizări ale paginilor de produse se pot face fără suplimente sau codare. Fotografiile de înaltă calitate, descrierile informative și informațiile cheie despre produse fac mai ușor pentru vizitator să se simtă confortabil cumpărând produsul.

Activați recenziile și evaluările pentru a spori încrederea. Configurați produse similare, vânzări încrucișate și vânzări suplimentare pentru a crește dimensiunea medie a comenzii și pentru a facilita descoperirea de articole noi pentru clienți. Includeți mărturiile clienților în descrierile produselor sau filele dvs. pentru dovezi sociale.

Odată ce ați optimizat conținutul paginii, vă puteți îmbunătăți și mai mult paginile de produse utilizând extensiile WooCommerce, editând șablonul de pagină de produs cu Editorul de site și personalizându-le manual cu cod și cârlige.

Cum să vă personalizați pagina produsului folosind extensiile WooCommerce

O extensie este un plugin WordPress creat special pentru a oferi funcționalități suplimentare magazinelor WooCommerce. Mai jos sunt câteva extensii WooCommerce pe care le puteți folosi pentru a furniza informații suplimentare despre produse, pentru a îmbunătăți experiența de cumpărături și pentru a vă extinde pagina dincolo de funcțiile implicite. Puteți găsi și mai multe extensii pentru personalizare ulterioară în biblioteca oficială de extensii WooCommerce.

1. Varianta avansată de produs pentru WooCommerce

Produsele variabile sunt articole cu opțiuni precum dimensiunea și culoarea - alegeri pe care cumpărătorul le face înainte de a verifica. Pe partea frontală, WooCommerce afișează un meniu drop-down pentru fiecare atribut (cum ar fi dimensiunea sau culoarea) cu o listă de variații disponibile de mai jos (cum ar fi Mic, Mediu sau Mare).

exemplu de produs variabil

Pentru o abordare mai vizuală, Advanced Product Variation pentru WooCommerce vă permite să prezentați variații ale produselor cu mostre (culori, imagini și text), galerii și tabele. Puteți chiar să includeți videoclipuri în mostrele dvs.

adăugarea de mostre la variațiile de produs

Variantele sunt afișate pe pagina Produs sau pe pagina principală a Magazinului, în funcție de setările pe care le configurați. Puteți crea mostre utilizând imaginile produselor existente și imaginile prezentate.

exemplu de pagină de produs cu mostre de variație

De asemenea, puteți personaliza aspectul galeriei de produse, mutându-l din poziția implicită de sub imaginea prezentată în partea stângă.

opțiuni pentru poziționarea în galerie

Aflați mai multe despre Variația avansată a produsului pentru WooCommerce.

2. WooCommerce Tab Manager

Filele din pagina produsului WooCommerce apar sub butonul Adăugați în coș și vă permit să prezentați informații suplimentare, păstrând în același timp elemente cheie precum titlul și prețul deasupra paginii.

exemplu de file în WooCommerce

Aceste informații suplimentare pot include materiale și ingrediente ale produsului, greutăți și dimensiuni, diagrame de mărimi, tabele de prețuri, timpi de livrare, taxe de expediere, videoclipuri explicative — orice care va ajuta clientul să se simtă încrezător în achiziția lor.

Cu WooCommerce Tab Manager, puteți redenumi, reordona și elimina filele implicite — Descriere lungă, informații suplimentare și recenzii — și puteți personaliza această secțiune prin crearea propriilor file globale, la nivel de categorie și specifice produsului.

exemplu de file personalizate în WooCommerce

Utilizați pluginul pentru a seta o ordine implicită de file care poate fi înlocuită la nivel de produs. Cu o interfață drag-and-drop, nu este nevoie să modificați fișierele teme sau să intrați în cod.

interfață backend pentru crearea de noi file

Dacă aveți deja file personalizate prin alte plugin-uri, WooCommerce Tab Manager le detectează, oferindu-vă opțiunea de a le afișa sau ascunde. Un avantaj major al acestui plugin este că conținutul din filele dvs. este inclus în rezultatele căutării pe site.

Aflați mai multe despre WooCommerce Tab Manager.

3. Întrebări frecvente despre produse

Întrebările frecvente sau Întrebările frecvente sunt o modalitate ușor de organizat și de a prezenta informații despre produse vizitatorilor dvs. Cu extensia Întrebări frecvente despre produse, puteți adăuga o filă dedicată Întrebări frecvente pentru fiecare produs, cu întrebări și răspunsuri nelimitate.

Pluginul funcționează cu toate tipurile de produse și adaugă o secțiune de întrebări frecvente atunci când creați sau editați o pagină de produs.

Caseta de întrebări frecvente pentru un produs individual

În partea din față, întrebările frecvente sunt afișate în stil acordeon cu animație.

Aflați mai multe despre Întrebări frecvente despre produse.

4. Produse compozite

Cu produse compozite, clienții dvs. pot construi kituri sau produse configurabile.

Pentru fiecare produs compozit, veți permite clienților să aleagă între selecții predeterminate din inventarul existent. Puteți atribui taxe suplimentare anumitor selecții și puteți permite ca anumite categorii să fie opționale.

exemplu de kit de produs configurabil

De exemplu, un colier poate conține opțiuni pentru lanț (argint, aur), piatră (rubin, granat, smarald) și un farmec opțional (mai multe variante de formă).

Pentru fiecare dintre elementele de bază ale kit-ului - lanț, piatră și farmec - puteți selecta SKU-uri din care clientul le poate alege sau îi puteți lăsa să aleagă orice opțiune dintr-o întreagă categorie de produse.

Logica condiționată vă permite să afișați sau să ascundeți opțiuni pe baza opțiunilor anterioare (de exemplu, cămașa roșie nu este disponibilă în anumite dimensiuni), iar urmărirea la nivel de componente acceptă gestionarea avansată a inventarului. Dacă aveți un număr mare de opțiuni, puteți crea vizualizări cu sortare, filtrare și paginare pentru cumpărături mai ușoare.

Aflați mai multe despre produsele compozite.

5. Suplimente de produs

Extensia Product Add-Ons le permite cumpărătorilor să-și personalizeze și să-și actualizeze achizițiile prin suplimente gratuite și plătite.

Suplimentele ar putea include garanții, materiale de calitate superioară, opțiuni de livrare prioritare sau personalizări precum monograma și gravura personalizate. Dacă oamenii vă cumpără adesea produsele ca cadouri, puteți adăuga o opțiune de împachetare sau un câmp de mesaj cadou.

Organizațiile nonprofit ar putea permite cumpărătorilor să includă o donație în achiziția lor și să facă donația în onoarea cuiva adăugând un nume și un mesaj.

Dacă aveți rezervări WooCommerce, Product Add-Ons vă permite să creați opțiuni pentru servicii suplimentare (clătire după tunsoare) sau upgrade VIP pentru locuri și acces speciale. De asemenea, funcționează cu abonamente WooCommerce, astfel încât să puteți oferi suplimente pentru produsele dvs. de abonament.

Suplimentele dvs. pot include câmpuri personalizate afișate ca casete de text, meniuri derulante, casete de selectare, selecții bazate pe imagini și introduceri de preț personalizate pentru articole precum sfaturi și donații. Aceste câmpuri pot fi aplicate întregului catalog sau atribuite anumitor produse.

adăugarea de câmpuri suplimentare la o pagină de produs

După ce ați configurat suplimentele, acestea apar pe paginile produselor deasupra butonului Adăugați în coș, în ordinea pe care o alegeți.

Pagina de produs beanie cu opțiunea de a adăuga ambalaj cadou

Aflați mai multe despre suplimentele de produs.

Personalizați-vă pagina produsului folosind Editorul de site

Cu temele de bloc, puteți personaliza aspectul paginii dvs. de produs prin editarea șablonului de pagină de produs unic în Editorul site-ului. În administratorul WordPress, accesați Aspect → Editor .  

Alegeți „Răsfoiți toate șabloanele” din meniul drop-down din centrul de sus a paginii. Alegeți șablonul Produs unic din lista care apare.

găsirea șablonului unic de produs

Aspectul implicit al paginii conține antetul, subsolul și blocul WooCommerce Single Product, care afișează informații despre produs, preț și elemente de imagine.

Ar trebui să faceți o copie de rezervă a site-ului înainte de a modifica șablonul de pagină de produs. Anumite modificări — de exemplu, ștergerea accidentală a blocului Produs unic și salvarea — vor face imposibil pentru vizitatori să cumpere sau să cumpere.

Șablon de produs unic WooCommerce afișat cu blocuri implicite

Cum să editați șabloanele pentru antetul și subsolul paginii de produs unic

Fila Șablon din Setări (pictograma roată din dreapta sus) conține linkuri pentru a gestiona antetul și subsolul. Faceți clic pe oricare dintre opțiuni pentru a gestiona acea parte a șablonului de pagină. De asemenea, puteți face clic direct într-o zonă a șablonului pentru a începe editarea. Rețineți că orice modificări efectuate aici vor fi aplicate tuturor produselor care utilizează șablonul.

În antet, puteți edita titlul site-ului și linkurile din meniul principal de navigare și chiar puteți adăuga noi blocuri pentru a vă personaliza pagina produsului în mod specific. Utilizați acest spațiu pentru a adăuga imagini, text și multe altele pentru a spori puterea de vânzare a paginii dvs. de produs. Puteți adăuga o notă promoțională sau de politică sau un banner pentru a informa cumpărătorii despre o vânzare curentă sau despre cum să obțină livrare gratuită pentru comenzile de peste o anumită sumă.

Puteți face ceva similar cu subsolul paginii produsului. De exemplu, adăugați o mărturie a unui client sau informații despre o politică de garanție a satisfacției.

Cum să personalizați corpul produsului unic

Blocul Produs unic afișează un avertisment îndrăzneț în partea de sus, „Nu eliminați acest bloc! Eliminarea acestui bloc va provoca efecte nedorite asupra magazinului dvs..” Luați acest mesaj în serios!

Bloc WooCommerce Single Product

Cu toate acestea, puteți adăuga blocuri noi în jurul blocului Produs unic pentru a personaliza complet designul paginii de produs.

Utilizați pictograma + pentru a adăuga elemente deasupra sau dedesubtul blocului Produs unic, apoi includeți orice bloc doriți să personalizați pagina.

Folosiți un bloc Paragraf pentru a include oferte curente („Cheltuiți 100 USD sau mai mult pentru transport gratuit”), o garanție de satisfacție sau orice lucru care îi va ajuta pe vizitatori să ia decizia de a cumpăra. Adăugați un bloc video care oferă o privire din culise asupra proceselor dvs. Sau includeți anumite produse recomandate pe care doriți să le promovați. Cerul este limita aici!

adăugarea de blocuri suplimentare la pagina individuală a produsului

Și pentru fiecare bloc, puteți edita setări cum ar fi culoarea de fundal, tipografia și spațierea pentru a le face cu adevărat al dvs.

Personalizați manual pagina produsului (folosind cod și cârlige)

Pentru opțiuni avansate — fără costul sau întreținerea pluginurilor — puteți edita și personaliza manual pagina produsului folosind cod și cârlige.

Înainte de a face orice modificare la fișierele dvs., este important să vă faceți timp pentru a face copii de rezervă pentru WooCommerce. Dacă utilizați Jetpack VaultPress Backup, acest lucru se face automat pentru dvs., în timp real. Așadar, dacă vreuna dintre modificările dvs. provoacă să cadă site-ul dvs., puteți restabili o copie de rezervă în doar câteva clicuri, chiar dacă nu aveți acces la tabloul de bord WordPress.

Și veți dori, de asemenea, să utilizați o temă copil pentru a face aceste modificări. În caz contrar, atunci când vă actualizați tema sau WooCommerce în viitor, s-ar putea să vă pierdeți toate personalizările. O altă opțiune este să utilizați un plugin precum Code Snippets, care vă permite să adăugați cod personalizat site-ului dvs. în fragmente pe care le puteți activa și dezactiva după cum este necesar.

Personalizați paginile produselor WooCommerce folosind cârlige

Cârligele permit proprietarilor de site-uri să adauge cod și să personalizeze pagini fără pericolele asociate cu editarea fișierelor de bază. Există două tipuri de cârlige: acțiuni și filtre. Acțiunile vă permit să introduceți cod în anumite puncte, în timp ce filtrele vă permit să manipulați și să returnați o variabilă.

De exemplu, puteți folosi acțiuni pentru a adăuga un nou câmp de plată, apoi puteți utiliza filtre pentru a modifica etichetele sau substituenții câmpurilor de plată existente. Puteți găsi lista de hook-uri WooCommerce disponibile aici.

Iată câteva exemple de modificări pe care le puteți face paginilor dvs. de produse folosind cârlige:

  • Modificați textul butonului Adăugați în coș. De exemplu, ai putea spune „Donează acum”.
  • Personalizați pesmeturile WooCommerce. Schimbați separatorul de pesmet, îndepărtați complet pesmet etc.
  • Eliminați, redenumiți și reordonați filele de produse. Adăugați o filă Ingrediente, de exemplu, sau includeți un videoclip într-una dintre file.

Personalizați paginile produselor WooCommerce folosind CSS

CSS este un limbaj de codare folosit pentru a controla elementele de design (spre deosebire de JavaScript, care controlează acțiunile). Îl puteți folosi pentru a modifica designul paginilor dvs. de produse. Odată ce ați învățat elementele de bază ale CSS, puteți personaliza totul, de la culori și fonturi până la dimensiunile elementelor individuale.

Puteți adăuga cu ușurință codul CSS accesând Aspect → Personalizare → CSS suplimentar în tabloul de bord WordPress. De exemplu, dacă doriți să schimbați culoarea fontului titlurilor produselor dvs., ați folosi următorul cod, înlocuind codul hexadecimal al culorii cu al dvs.:

 .woocommerce div.product .product_title { color: #222222; }

Dacă doriți să schimbați culoarea butonului Cumpărați acum, ați folosi acest cod, înlocuind din nou codul hexadecimal cu culoarea dorită:

 .woocommerce div.product .button {   background: #000000; }

Puteți vedea mai multe exemple în acest articol de la WooCommerce.

Cum să creșteți viteza de încărcare a paginii de produs

Site-urile de încărcare rapidă sunt importante atât pentru vizitatori, cât și pentru motoarele de căutare. Oamenii nu vor să aștepte și motoarele de căutare nu vor să trimită oamenii către site-uri cu performanțe slabe.

Literal, fiecare secundă contează - o întârziere de o secundă a timpilor de încărcare poate reduce ratele de conversie cu 20%!

Jetpack Boost este soluția de top pentru optimizarea vitezei și a performanței site-ului web pentru WordPress. Are un proces de configurare rapid și ușor - nu este nevoie de dezvoltator - și se mândrește cu rezultate care depășesc primele cinci plugin-uri de performanță într-un test direct.

După ce instalați pluginul gratuit, puteți efectua un audit și puteți obține un raport despre scorurile actuale ale performanței site-ului dvs. Acestea vor servi drept repere pe care le puteți folosi pentru a măsura îmbunătățirile aduse Core Web Vitals, valori pe care Google le folosește pentru a evalua experiența utilizatorului site-ului dvs. și performanța tehnică.

Un tablou de bord simplu facilitează configurarea opțiunilor de optimizare prin activări cu un singur clic. Acest lucru vă oferă flexibilitatea de a testa modulele de performanță individual și de a configura Jetpack Boost pentru a se potrivi perfect în orice scenariu.

Setări Jetpack Boost

Pentru mai multe moduri de a vă accelera paginile de produse, consultați Nouă moduri de a accelera un magazin WooCommerce.

Întrebări frecvente despre personalizarea paginilor de produse

Mai ai întrebări? Aruncă o privire la răspunsurile la unele dintre cele comune de mai jos.

Care este cel mai bun mod de a personaliza o pagină de produs WooCommerce?

Nu există o singură modalitate cea mai bună. Cel mai bun mod pentru tine depinde de nivelul tău de confort cu diferitele abordări.

Editorul site-ului vă pune toată puterea în mâinile dvs., permițându-vă să glisați și să plasați elemente pentru a vă crea propria pagină de produs personalizată, fără a fi nevoie să editați niciun cod. Aceasta este o soluție excelentă atât pentru începători, cât și pentru utilizatorii avansați!

Dacă sunteți în căutarea unei funcționalități suplimentare specifice, extensiile WooCommerce sunt o opțiune excelentă. Sunt verificate și aprobate de WooCommerce și oferă comercianților opțiuni avansate de personalizare fără cod personalizat.

Personalizarea manuală și codificarea oferă cea mai mare flexibilitate, dar necesită și cele mai multe cunoștințe tehnice. În comparație cu utilizarea blocurilor sau extensiilor, această metodă are cele mai mari șanse de a provoca o problemă sau chiar de a distruge site-ul.

Ar trebui să fac o copie de rezervă a site-ului meu înainte de a edita șablonul de pagină de produs?

Da. Spre deosebire de pagini și postări, șabloanele de site nu au un istoric al revizuirilor. Faceți o copie de rezervă a site-ului înainte de a face actualizări ale șablonului de pagină de produs, astfel încât să puteți face o restaurare rapidă dacă există vreo problemă.

Jetpack VaultPress Backup este un plugin de backup WordPress în timp real, ceea ce înseamnă că site-ul tău nu este doar copiat de rezervă într-un program zilnic sau atunci când faci o copie manuală. În schimb, este salvat automat de fiecare dată când faceți o modificare a site-ului dvs., un client plasează o comandă sau un vizitator lasă un comentariu. Când se întâmplă ceva important? Este salvat!

Magazinele de comerț electronic nu își pot permite să piardă date, mai ales atunci când aceste date reprezintă comenzile clienților din lumea reală. Nu vă mulțumiți cu soluții care vă salvează site-ul doar ocazional sau necesită o interacțiune îndelungată a serviciului pentru clienți pentru a restabili lucrurile atunci când există o problemă.

Cu Jetpack VaultPress Backup, vă puteți restaura site-ul cu un singur clic și puteți reveni rapid la online. Cu aplicația mobilă Jetpack, puteți restabili oricând și oriunde, chiar dacă site-ul este complet oprit.

Cea mai bună parte pentru proprietarii de magazine? Toate datele clienților și comenzile dvs. sunt protejate și rămân la curent.

Care sunt cele mai bune practici pentru personalizarea unei pagini de produs WooCommerce?

Indiferent de metoda pe care o utilizați pentru a edita și personaliza pagina de produs WooCommerce, urmați aceste bune practici pentru a vă proteja pe dvs., site-ul și clienții.

Mai întâi, faceți backup pentru site-ul dvs. de fiecare dată . Când adăugați sau actualizați codul site-ului, o singură eroare poate cauza probleme. Trebuie să fiți pregătit să restaurați site-ul cât mai curând posibil, fără a pierde o singură comandă. Jetpack VaultPress Backup este cea mai bună soluție de backup automată în timp real pentru WordPress.

Este făcut pentru dvs., așa că nici nu trebuie să vă faceți griji cu privire la salvarea site-ului înainte de a experimenta modificări.

Efectuați modificările codului în afara fișierelor tematice părinte . Când editați o temă sau un fișier plugin, acele modificări vor fi suprascrise și anulate data viitoare când tema sau pluginul este actualizat.

Există mai multe moduri de a adăuga cod pe site-ul dvs. fără a edita direct tema sau fișierele plugin. Puteți folosi pluginul Fragmente de cod pentru a adăuga, edita sau elimina elemente dintr-o pagină și pentru a vă stila site-ul prin câmpul CSS suplimentar din Personalizarea temei. De asemenea, puteți crea o temă copil. Lucrul important este să faceți modificările în care acestea să nu fie afectate de actualizările temei sau a pluginurilor.

Fii cu ochii pe viteza. Indiferent de modul în care vă personalizați paginile de produse, doriți să vă asigurați că viteza site-ului dvs. nu are de suferit. Cu Jetpack Boost, puteți îmbunătăți instantaneu domenii cheie care îmbunătățesc atât experiența utilizatorului, cât și percepția Google asupra calității site-ului dvs. Un site mai rapid înseamnă că clienții vor avea mai multe șanse să rămână, iar Google va fi mai probabil să vă recomande în rezultatele căutării. Un impuls rapid poate merge mult.