Cum să vă personalizați pagina de produs WooCommerce
Publicat: 2022-10-18Paginile de produse de pe orice site de comerț electronic sunt solicitate ca parte esențială. Pentru că conține toate detaliile referitoare la un produs într-o manieră ordonată cu informații suplimentare precum produse conexe etc.
Pagina implicită de produs WooCommerce este bună pentru vizualizarea rapidă a produsului de bază , adăugarea în coș și alte astfel de funcționalități de bază, dar acest lucru pur și simplu nu este suficient în mediul competitiv modern de comerț electronic. Pagina produsului joacă o funcție crucială în orice platformă de afaceri construită de WooCommerce, fiind una dintre cele mai importante pagini. Cu toate acestea, pagina implicită pur și simplu nu o taie.
Importanța personalizării paginilor de produse nu poate fi exagerată.
Prin personalizarea paginilor de produse, le oferiți clienților o experiență unică de cumpărături, care este, de asemenea, importantă pentru reținerea vizitatorilor și pentru creșterea numărului de vânzări.
În această postare, vă vom ghida prin procesul de utilizare a unui editor de pagini de produse WooCommerce și a widget-urilor WooCommerce personalizate pentru a crea pagini de produse atractive și multe altele.
Cuprins
Instrumente necesare pentru a personaliza pagina produsului WooCommerce?
În primul rând, trebuie să aveți cea mai recentă versiune de WordPress instalată pe serverul dvs. și, pe deasupra, trebuie instalat pluginul WooCommerce pentru a găzdui toate funcționalitățile paginii magazin/magazin.
De asemenea, aveți nevoie de o temă WordPress de comerț electronic bazată pe funcționalități și, nu în ultimul rând, veți avea nevoie de un plugin WooCommerce Elementor Shop Builder . Cu pluginul Elementor Shop Builder, veți putea controla și personaliza pe deplin paginile de magazin individuale și grila de produse ale pieței, lista de produse, blocurile de comparare a produselor etc.
Cum să personalizați pagina produsului WooCommerce
Sperăm că aveți deja instalată pe serverul dvs. o instalare funcțională a WordPress și o temă de comerț electronic funcțională. Acum, să trecem prin procesul pas cu pas de personalizare a paginii de produs, începând cu resurse și instrumente suplimentare WordPress necesare.
Pasul 1: Instalarea unui plugin Elementor WooCommerce Add-on
În acest exemplu live de personalizare a unei pagini de produs WooCommerce cu diverse elemente și mostre de variante ale produsului WooCommerce care ar trebui să fie prezentată clienților unei pagini de produs modern, vom folosi ceva similar cu compozitorul vizual al constructorului de pagini de produse WooCommerce – numit ShopReady.
Creatorul de magazine ShopReady Elementor este un instrument uimitor, cuprinzător, pentru crearea de site-uri web robuste pentru magazine de comerț electronic. Pluginul vine cu peste 105 widget-uri create profesional, cu funcții și instrumente specifice cazului de utilizare. De exemplu, cu acest plugin de comerț electronic, puteți crea un filtru funcțional de produs WooCommerce care este capabil să filtreze produsele cu preț, dimensiune, greutate, culoare, evaluare, transport etc.
Pentru a începe cu acest plugin de supliment WooCommerce, începeți prin a-l descărca. Pentru a face acest lucru, conectați-vă la tabloul de bord WordPress , accesați Și faceți clic pe butonul Instalare .
Așteptați până la instalarea cu succes a pluginului și faceți clic pe Activare .
Meniul ShopReady va apărea pe tabloul de bord WordPress. De aici, veți avea acces la toate widget-urile, modulele și conținutul prestabilit furnizate de pluginul de personalizare a paginii de magazin.
Din acest meniu simplu, puteți activa/dezactiva widget-uri, puteți crea șabloane și puteți introduce chei API pentru diferite funcții.
O altă caracteristică excelentă a acestui plugin este comutatorul său de monedă pentru capacitatea WooCommerce. Pentru a activa această funcție, va trebui să urmați instrucțiunile prezentate mai jos.
Pentru a adăuga cheia API pentru monedă creată de Exchangerate , faceți clic pe fila API.
Conectați-vă la tabloul de bord al contului de schimb valutar și copiați cheia API pentru a o obține. După ce ați lipit cheia API, accesați Tabloul de bord WordPress > ShopReady > API și faceți clic pe Pasul 2: Utilizați un șablon de pagină de produs prestabilit sau creați unul de la zero
Următorul pas este să începeți să lucrați la o pagină de produs, dar înainte de aceasta, va trebui să adăugați produse pe site-ul dvs. WooCommerce. Dacă nu știți cum să faceți acest lucru, puteți urma acest ghid despre – Cum să adăugați rapid un produs WooCommerce .
Acum, pentru a începe să personalizați o pagină pentru o prezentare a unui produs, utilizați ShopReady – WooCommerce Builder pentru a crea o pagină de produs simplă, accesând tabloul de bord al pluginului și făcând clic pe fila Șabloane . Activați categoria Șablon de produs și căutați configurarea Produs unic. Acum faceți clic pe pictograma de editare.
Și veți fi redirecționat către ecranul Editor Elementor . Acum, pentru a începe să personalizați pagina, faceți clic pe simbolul plus pentru a adăuga secțiuni Elementor. Există diferite tipuri de secțiuni Elementor pe care le puteți adăuga la pagina dvs. în funcție de modul în care doriți să arate pagina și ce widget-uri doriți să utilizați.
Pasul 3: Personalizarea paginii de produs WooCommerce cu widget-uri Elementor
- Adăugarea unui titlu de produs
Acum, deoarece ați plasat o structură de bază a secțiunii Elementor pentru pagina dvs. de produs WooCommerce, puteți începe prin a adăuga un titlu de produs. Pentru a face acest lucru, va trebui să glisați și să plasați widgetul Titlu produs pe pagina produsului.
Și pentru a afișa titlul corespunzător al produsului, faceți clic pe fila Conținut , iar sub aceasta veți găsi opțiunile de reîmprospătare a editorului . Selectați titlul de produs corespunzător din opțiunea Produs demonstrat .
Trebuie să adăugați sau să editați informațiile corespunzătoare despre produs din Tabloul de bord pentru produse WooCommerce pentru ca aceste date să arate titlul corespunzător al produsului.
- Adăugarea unei imagini recomandate la pagina produsului
În continuare, veți avea nevoie de galeria de imagini a produsului și de imaginea caracteristică pentru produsul dvs. În acest scop, puteți utiliza oricare dintre multiplele widget-uri de imagine furnizate de suplimentul All-in-one Elementor pentru comerțul electronic.
Pentru acest exemplu, vom folosi widget-ul ShopReady Thumbnail with Zoom, care face ceea ce sugerează titlul său. Cu acest widget, puteți arăta clienților dvs. o versiune WooCommerce cu mouse-ul pentru zoom a imaginii produsului dvs. atunci când trec cu mouse-ul peste imaginea produsului dvs.
La fel ca și înainte, puteți selecta imaginea corectă a produsului din opțiunea Produs demonstrat , fila Conținut .
- Adăugarea blocului pentru widgetul de prețuri
Un alt element important pe care trebuie să-l ai pe pagina de produse de comerț electronic este blocul de prețuri pentru produse. Pentru aceasta, va trebui să actualizați atributele produsului WooCommerce cu actualizările corecte și să utilizați widgetul ShopReady Price , care trebuie plasat sub titlul produsului.
Pentru a afișa prețul corect, selectați titlul produsului din opțiunea Produs demonstrativ , sub fila Conținut .
- Adăugarea descrierii produsului
Aveți, de asemenea, posibilitatea de a adăuga descrieri de produse extrem de personalizabile utilizând acest widget de suplimente pentru produs WooCommerce . Din fila de stil, veți avea opțiunea de a personaliza modul în care descrierea produsului va apărea pentru masă.
- Adăugarea funcției Adăugați în coș
Adăugarea în coș este o altă caracteristică foarte importantă pe care trebuie să o aveți, permițându-le clienților să aibă mai multe produse pe pagina lor de coș înainte de a trece la pagina de plată.
Pentru a avea o funcție robustă Adăugați în coș pe pagina magazinului dvs. de comerț electronic, puteți utiliza widget-ul ShopReady Adaugă în coș. Cu acest widget, puteți permite clienților să crească și să scadă cantitatea de produse din coș direct din blocul Adaugă în coș.
De asemenea, vă personalizați butonul de adăugare în coș Elementor din stilul produsului WooCommerce , tipografie, culoare, fundal, margine, umplutură etc.
- Adăugarea metadatelor la pagina de produs
Pentru a oferi clienților o experiență de cumpărături mai bună, ar trebui să implementați un filtru de produs WooCommerce folosind metadatele și atributele produsului pe care le-ați adăugat în timp ce adăugați produse la WooCommerce .
Pentru a prezenta aceste date pe pagina produsului, căutați widget-ul ShopReady Meta și plasați-l sub butonul de adăugare în coș.
Etichetele și metadatele produselor dvs. ar trebui să apară corect atunci când selectați titlul corect al produsului din opțiunea Produs demonstrat , din fila Conținut .
- Adăugarea butoanelor de distribuire pe rețelele sociale pe pagina de produs
Clienții tăi pot, de asemenea, să partajeze postările tale despre produse pe rețelele sociale chiar de pe pagina ta de produs WooCommerce, folosind un simplu buton de partajare pe rețelele sociale. Pe care îl puteți crea pur și simplu folosind widget-ul Elementor Social Share cu drag-n-drop.
Blocul poate fi personalizat cu orice pictograme de rețele sociale, text și linkuri care pot fi partajate, chiar din fila Conținut . Și poate fi, de asemenea, personalizat pentru a schimba aspectul blocurilor de distribuire socială din fila Elementor Style .
Și ați terminat cu elementele de bază ale personalizării paginii de produse WooCommerce.
Pasul 4: Adăugarea produselor înrudite pe pagina produsului WooCommerce
O modalitate excelentă de a crește vânzările online este să prezentați produse similare pe pagina produsului dvs., utilizând widget-ul Produs conexe de suplimente pentru produse WooCommerce. Cu ajutorul widget-ului ShopReady Related Products , puteți crea un bloc glisor uimitor de produs în secțiuni.
Pentru a utiliza widget-ul, trebuie doar să glisați și să plasați widget-ul sub blocul de produs unic și să selectați fiecare produs individual pe care doriți să îl prezentați în pagina dvs. unică de produs.
In concluzie
Sperăm că acest ghid informativ v-a ajutat să obțineți o înțelegere mai largă a personalizării șablonului de pagină de produs WooCommerce și a modului în care puteți utiliza aceste instrumente uimitoare pentru a vă condimenta site-ul de comerț electronic cu funcționalități mai bune.
Cu detaliile pop-up despre produse WooCommerce în tabelul de comparare a produselor, ShopReady poate oferi tot ceea ce necesită o piață de comerț electronic. Dacă aveți întrebări despre acest subiect, nu ezitați să contactați în secțiunea de comentarii de mai jos.