Cum să vă personalizați pagina coșului WooCommerce pentru mai multe vânzări!
Publicat: 2024-11-08Rata medie a coșului abandonat este de 70%. Adică fiecare șapte din zece dintre clienții magazinului dvs. care și-au configurat coșul de cumpărături nu își finalizează achiziția — pagina dvs. de coș WooCommerce scurge bani!
Puteți remedia acest lucru personalizându-l. Adăugarea mărcii dvs., a ofertelor de upsell, a cupoanelor de reducere și a elementelor de consolidare a încrederii sunt modalități excelente de a face clienții încrezători în deciziile lor. Această postare vă prezintă cel mai simplu mod de a personaliza o pagină de coș WooCommerce, care durează mai puțin de o oră. Sunteți gata să reduceți rata de abandon al coșului de cumpărături? Să mergem!
- 1 De ce să vă personalizați pagina coșului WooCommerce?
- 2 metode de personalizare a paginii coșului WooCommerce
- 2.1 1. Utilizarea blocurilor WooCommerce
- 2.2 2. Utilizarea unui WooCommerce Builder precum Divi
- 3 De ce Divi este perfect pentru personalizarea unei pagini de coș WooCommerce?
- 3.1 1. Aspecte frumoase ale paginilor de coș pentru a economisi timp
- 3.2 2. Modulele Native WooCommerce ale Divi pentru a adăuga funcționalități
- 3.3 3. Divi Theme Builder pentru a proiecta un șablon de cărucior universal
- 3.4 4. Instrumente de marketing încorporate pentru optimizarea paginilor coșului
- 3.5 5. Site-uri rapide Divi pentru a genera rapid un șablon de coș
- 4 Personalizarea unei pagini de coș WooCommerce cu Divi
- 4.1 1. Creați un șablon de pagină de coș
- 4.2 2. Personalizați șablonul coș
- 4.3 3. Salvați modificările și previzualizați pagina coșului
- Alte 5 moduri de a vă optimiza pagina coșului WooCommerce
- 6 instrumente pentru a personaliza paginile coșului WooCommerce
- 7 Divi + WooCommerce este soluția supremă de comerț electronic
- 8 întrebări frecvente despre personalizarea paginilor coșului WooCommerce
De ce să vă personalizați pagina coșului WooCommerce?
Când clienții tăi sunt în coșul lor, sunt vulnerabili. Ei examinează produsele adăugate și au îndoieli cu privire la decizia lor. În această etapă, clienții tăi au nevoie de un ghiont din partea ta pentru a-i ajuta să simtă diferite emoții pentru a genera încredere și a finaliza achiziția. Cu toate acestea, dacă pagina dvs. de coș arată simplă ca cea de mai jos (un șablon de coș WooCommerce implicit nepersonalizat cu o temă bloc instalată), ei nu vor simți nimic și ar putea pleca.
Dar, personalizând această pagină WooCommerce Cart, puteți induce aceste emoții pentru a reduce ratele coșului abandonat:
- Urgență : atunci când derulați o reducere sau oferiți reduceri uriașe, vă puteți personaliza coșul de cumpărături astfel încât un cronometru cu numărătoare inversă să arate timpul limitat pentru care se aplică reducerile. Acest lucru creează urgență și încurajează clientul să finalizeze achiziția.
- Încredere : prin adăugarea de elemente de consolidare a încrederii, cum ar fi garanții, politici de rambursare a banilor și mărturii , îi faceți pe cumpărători să se simtă încrezători în ceea ce privește achiziția lor.
- FOMO : prin crearea secțiunilor Produse cele mai vândute, Produse la vânzare și Cumpărați împreună , le evocați clienților teama de a pierde, astfel încât aceștia adaugă mai multe articole în coș înainte de a finaliza achiziția.
- Satisfacție : Afișând cupoane de reducere exclusive, clienții tăi se simt mulțumiți și mulțumiți de achiziție și de banii economisiți.
O pagină de coș WooCommerce nepersonalizată nu poate induce aceste emoții, ceea ce îi face pe oameni să se îndoiască de alegerile lor și, în cele din urmă, să-și abandoneze cărucioarele. Personalizarea acestuia vă permite să evocați aceste emoții pentru a reduce rata de coș abandonat, pentru a crește vânzările și pentru a crea o impresie durabilă a mărcii.
Metode de personalizare a paginii coșului WooCommerce
Vă puteți personaliza pagina coșului WooCommerce în mod diferit, în funcție de ușurință, capacitățile de personalizare și funcționalitatea extinsă. Să ne uităm la cele mai comune moduri:
1. Utilizarea blocurilor WooCommerce
Când instalați WooCommerce, acesta generează automat șabloane relevante, cum ar fi coș, casă și magazin. Pentru a edita o pagină de coș, accesați Pagini > Coș > Editați. (Dacă ați instalat o temă de blocare, o puteți personaliza și folosind Editorul site-ului. Accesați Aspect > Editor > Șabloane > Coș .)
Acum îl puteți personaliza folosind blocurile Gutenberg și WooCommerce. Ștergeți codul scurt al coșului WooCommerce .
Faceți clic pe pictograma plus și căutați blocul Cart WooCommerce, nu Mini-Cart (este pentru afișarea unui buton, astfel încât cumpărătorii să-și poată accesa rapid coșul.)
Adaugă-l. Noua pagină de coș arată mai bine și include elemente suplimentare precum „Poate fi interesat”.
Adăugarea blocului Coș creează, de asemenea, un aspect Coș gol cu produse suplimentare și un link Parcurgere magazin . Comutați la Coș gol din Coș umplut.
Deoarece acesta este un bloc întreg, nu îi puteți personaliza setările, cum ar fi fonturile sau culorile. Cu toate acestea, puteți adăuga mai multe blocuri Gutenberg și WooCommerce, cum ar fi Toate recenziile , pentru a afișa mărturii și Cele mai noi produse pentru a afișa cele mai recente versiuni ale magazinului dvs.
Pentru a personaliza setarea unui bloc, faceți clic pe el și faceți modificări în bara laterală din dreapta.
Blocurile WooCommerce fac personalizarea prietenoasă pentru începători, dar puteți face modificări doar într-o anumită măsură. Pentru personalizare avansată și funcționalitate extinsă, ar trebui fie să editați codul personalizat (nu este o idee bună să atingeți fișierele de bază ale site-ului web dacă nu sunteți o persoană tehnică) sau să utilizați extensii WooCommerce (bine atâta timp cât adăugați câteva pentru instalare). prea multe plugin-uri ar putea încetini site-ul dvs.)
2. Utilizarea unui WooCommerce Builder precum Divi
O altă metodă (mult mai bună) de a personaliza paginile coșului de cumpărături este utilizarea unui constructor WooCommerce precum Divi. Este un generator fără cod, drag-and-drop, care vă permite să personalizați paginile prin mutarea elementelor. De asemenea, obțineți multe pagini de coș pre-proiectate și machete de magazin online care pot fi importate pe site-ul dvs. cu un singur clic. Să nu uităm de sute de WooCommerce Divi și module de conținut nativ care fac adăugarea de funcționalități fără efort. Deci, nu numai că nu trebuie să atingeți o singură linie de cod, dar vă salvați și site-ul de balonare instalând multe extensii terță parte pentru a adăuga funcționalitate.
Divi este dotat cu instrumente care vă economisesc timp și vă simplifică munca de 10X. De exemplu, Divi Quick Sites va proiecta un întreg magazin online cu pagini de marcă pentru dvs. în două minute. Și Divi AI pentru a crea un aspect al paginii, o copie a site-ului și imagini care se potrivesc cu vocea mărcii tale.
Începeți cu Divi
De ce este Divi perfect pentru personalizarea unei pagini de coș WooCommerce?
Divi este un constructor WooCommerce favorit al multor proprietari de magazine online datorită ușurinței sale de utilizare, caracteristicilor încorporate pentru funcționalitate extinsă și capacităților de personalizare nelimitate care le permit să creeze pagini uimitoare de coș și magazine online complete. Iată câteva dintre caracteristicile sale cheie care îl fac perfect pentru site-urile WooCommerce:
1. Aspecte frumoase ale paginilor de coș pentru a economisi timp
Divi are sute de modele de magazine online și coșuri de cumpărături prefabricate pentru a vă economisi bătălia de a construi pagini de la zero. Acestea sunt proiectate profesional de experții Divi (care sunt și designeri profesioniști de site-uri web), astfel încât nu trebuie să vă faceți griji cu privire la stilarea paginilor dvs. Importați cu un singur clic și sunteți gata să faceți modificările necesare și să publicați.
2. Modulele Native WooCommerce ale Divi pentru a adăuga funcționalități
Divi are diverse elemente WooCommerce și Cart care economisesc instantaneu timp prin adăugarea de funcționalități site-ului tău. De exemplu, Woo Cart Products listează toate produsele adăugate de clienți în coșul lor . Woo Cart Totals afișează frumos suma totală cu alte detalii precum informațiile de expediere.
3. Divi Theme Builder pentru a proiecta un șablon universal de cărucior
Cea mai bună parte a utilizării Divi este că puteți crea și personaliza șabloane dinamice, cum ar fi coșul (care se modifică în funcție de alegerile utilizatorului) la nivel de site web cu Divi Theme Builder , astfel încât atunci când faceți modificări în șablon, acesta se reflectă și asupra toate paginile coșului.
Acest lucru este uimitor, deoarece nu vă limitați la câteva blocuri WooCommerce și setări de personalizare de bază. În schimb, puteți să vă proiectați paginile dinamice folosind Divi Builder și să obțineți acces la toate funcțiile de personalizare și modulele de conținut. Trebuie doar să creați un șablon de coș și să-l personalizați pentru a face modificări uniforme la nivelul întregului site și pentru a le afișa pe toate paginile coșului stabilite de diferiți utilizatori.
4. Instrumente de marketing încorporate pentru optimizarea paginilor coșului
Divi are instrumente de marketing incredibile ca funcții încorporate pentru a vă ajuta să creșteți ratele de conversie ale paginii dvs. de produs. De exemplu, Divi Leads vă permite să efectuați teste împărțite și să alegeți un câștigător între două elemente. Deci, puteți testa două pagini de coș, una cu un cod de cupon de reducere pop-up și alta cu un formular implicit de înscriere prin e-mail și să vedeți care dintre ele are o rată de conversie mai bună. Sau testați diferite mărci, mesaje, stil de imagine sau orice doriți. De asemenea, beneficiați de analize de urmărire a conversiilor încorporate, astfel încât nu trebuie să investiți în platforme CRO terțe.
În mod similar, Condiții vă permite să creați oferte promoționale situaționale pentru a convinge cumpărătorii să finalizeze achiziția. De exemplu, atunci când un client își părăsește coșul fără a finaliza o achiziție, puteți afișa un cupon de reducere irezistibil ca banner pop-up.
De asemenea, obțineți pluginuri premium precum Bloom pentru a crea opțiuni de e-mail cu conversie ridicată și Monarch pentru a comercializa și a genera mai mult trafic. Nu uitați să verificați multe alte funcții încorporate, cum ar fi un banner lipicios pentru anunțuri de vânzare, un cronometru pentru a crea urgență, formulare de contact încorporate pentru a colecta mărturii ale clienților și o piață Divi plină cu instrumente și mai uimitoare pentru faceți paginile coșului și magazinul online nelimitate.
5. Site-uri rapide Divi pentru a genera rapid un șablon de coș
Dacă nu-ți place să petreci timp construind pagini de site sau dacă ai nevoie de o bază pentru a-ți face sucul creativ, Divi este perfect pentru tine. Folosind Divi Quick Sites, puteți genera un întreg site web în mai puțin de două minute. Divi Quick Sites instalează și configurează și WooCommerce dacă activați opțiunea Shop . Aceasta înseamnă că, în timp ce vă creați magazinul online, veți obține șabloane de pagină relevante, inclusiv șabloane de pagină de magazin de marcă, produse, achiziții și coș.
Trebuie doar să introduceți titlul magazinului dvs. online, sloganul și sigla și să verificați paginile pe care doriți să le creați, inclusiv pagina Magazin .
Odată ce site-ul dvs. este gata, puteți accesa cu ușurință coșul (și alte șabloane) în Divi Theme Builder și puteți face modificări la nivelul întregului site folosind generatorul de glisare și plasare al Divi.
Obțineți Divi + WooCommerce
Personalizarea unei pagini de coș WooCommerce cu Divi
Acest tutorial este axat pe personalizarea unei pagini de coș WooCommerce, dar dacă vă construiți magazinul online cu WooCommerce pentru prima dată, ar trebui să începeți cu ghidul nostru despre crearea unui magazin de comerț electronic.
Dar înainte de a începe tutorialul nostru, aveți nevoie de tema Divi instalată și activă în magazinul dvs. online.
Abonamentul Divi costă 89 USD anual, sau îl puteți obține pentru o plată unică de 249 USD pe viață. Odată ce ați achiziționat Divi, conectați-vă cu acreditările de membru Elegant Themes și descărcați fișierul Divi.zip. Încărcați folderul zip în tabloul de bord WordPress: Aspect > Teme > Adăugați nou . Activează-ți licența Divi și gata.
Iată un tutorial video pas cu pas despre instalarea și activarea Divi:
Obțineți Divi + WooCommerce
Acum că puteți folosi Divi pentru a construi și personaliza pagina coșului WooCommerce, să începem tutorialul nostru:
1. Creați un șablon de pagină de coș
După cum sa explicat mai devreme, Divi's Theme Builder vă permite să personalizați șablonul de pagină de coș la nivel de site, astfel încât modificările să apară pe diferite cărucioare configurate de diverși utilizatori.
Pentru exemplul nostru, vom folosi șablonul Coș Theme Builder generat folosind Divi Quick Sites pe care tocmai le-am creat mai sus. Dar puteți crea un șablon de coș nou sau puteți crea propriul dvs. șablon. Pentru a face acest lucru, accesați Divi > Theme Builder și faceți clic pe Adăugați un șablon nou.
Alegeți Coș ca sursă de utilizat pentru această modificare a aspectului.
Acum, puteți accesa generatorul de tragere și plasare al Divi pentru a proiecta un șablon de pagină de coș folosind modulele Divi Theme Builder și WooCommerce.
Opțional: puteți, de asemenea, să importați un șablon de coș prestabilit sau să utilizați opțiunea Build with AI pentru a cere Divi AI să genereze un șablon unic de coș de la zero.
Amintiți-vă că nu trebuie să construiți de la zero dacă nu știți de unde să începeți. Puteți genera oricând un șablon de coș de marcă cu Divi Quick Sites.
2. Personalizați șablonul de coș
În general, paginile de coș sunt simple pentru a nu distrage atenția clienților de la cumpărare, dar puteți adăuga anumite elemente pentru a-i împiedica să-și abandoneze cărucioarele. De exemplu, un cod de cupon de reducere pop-up i-ar încuraja să finalizeze achiziția și să economisească bani. Afișarea mărturiilor despre produse sau a unei garanții de rambursare a banilor ar convinge clienții îndoielnici să aibă încredere în achiziție.
Să începem prin a ne asigura că avem elementele necesare unei pagini optimizate pentru coș.
Utilizarea modulelor WooCommerce Cart de la Divi
Divi vine cu module WooCommerce native care vă ajută să adăugați cu ușurință funcționalități magazinului dvs. online, fără să atingeți codul. De exemplu , modulul Woo Cart Products creează o listă frumoasă cu toate produsele pe care clienții le adaugă în coș. Include, de asemenea, o coloană pentru aplicarea codurilor de cupon și un buton dezactivat (evidențiat cu gri) care devine activ numai atunci când clienții au adăugat produse în coșul lor. Modulul Woo Cart Totals afișează prețul total de achiziție cu informații suplimentare, cum ar fi adresa de expediere și un buton Continuare la finalizare .
Șablonul de coș generat de Divi Quick Sites include deja elementele necesare, așa că nu va trebui să vă faceți griji cu privire la ce să includeți. În schimb, să încercăm să adăugăm o secțiune „Poate fi interesat de” pentru a încuraja clienții să adauge mai multe articole în coșul lor . Pentru a face acest lucru, trebuie să adăugați elementul Woo Product Upsell . Asigurați-vă că activați pictograma Afișați insigna de vânzare pentru a crea urgență.
Pentru a personaliza setările unui modul, plasați cursorul peste acesta și faceți clic pe pictograma roată (setări). Acum, comutați între Conținut (pentru a modifica conținutul elementului), Design (pentru a edita fonturi, culori, dimensiune și multe altele) și Avansat (pentru a edita CSS personalizat, adăuga condiții etc.).
De asemenea, puteți crea o secțiune de garanție a banilor înapoi ca aceasta pentru a oferi mai multă credibilitate paginii noastre de coș. Pentru a crea unul, adăugați elementele Titlu, Paragraf, Butoane și Pictogramă . Puteți utiliza Divi AI pentru a genera o copie persuasivă pentru cardul dvs. de garanție.
Utilizarea conținutului dinamic al Divi pentru a extrage date specifice produsului
Un alt lucru grozav despre WooCommerce și modulele native ale Divi este că sunt dinamice, ceea ce înseamnă că extrag automat date de la anumite produse, fără a fi necesar să le introduceți manual. Acest lucru este eficient mai ales atunci când clienții dvs. configurează coșul și selectează produsele. De asemenea, puteți modifica setările de conținut dinamic în anumite elemente pentru a personaliza și mai mult experiența utilizatorilor.
De exemplu, puteți afișa un cronometru cu numărătoare inversă specifică produsului, cu o reducere considerabilă pentru a vă încuraja clientul să adauge produsul în coș. Pentru a face acest lucru, să creăm mai întâi un cronometru cu numărătoare inversă și să personalizăm setările de conținut dinamic.
Odată ce decideți cât timp doriți să afișați cronometrul cu numărătoarea inversă (este o idee bună să faceți 10-15 minute pentru a crea FOMO de a pierde o reducere uriașă), trebuie să creați o secțiune de produs Adaugă în coș . Utilizați Woo Product Name, Woo Product Description, Woo Adaugă în coș și alte module Woo pentru a crea o secțiune irezistibilă.
Puteți oferi un anumit produs sau cel mai recent produs la o reducere uriașă. Selectați produsul pe care doriți să-l oferiți, iar Divi va trage automat informații relevante.
Divi oferă mai multe module puternice pentru îmbunătățirea paginilor coșului WooCommerce. Cronometrul de numărătoare inversă creează urgență pentru vânzări pe timp limitat, conducând la achiziții mai rapide. Crucea Woo Vinde modulul evidențiază produse conexe sau complementare de adăugat la achiziție. Există multe altele, așa că joacă-te cu alte module, folosește Divi Leads pentru a rula teste și creează un șablon unic de coș WooCommerce care face cu adevărat conversie.
Începeți cu Divi
Utilizarea condițiilor Divi pentru a adăuga un cod de cupon de reducere
Funcția puternică a Divi, Condiții, vă permite să optimizați paginile coșului pentru diferite situații. De exemplu, dacă un client își umple coșul, dar decide să plece, puteți configura o promoție pentru coș abandonat cu un cod de cupon de reducere pentru a-l încuraja să finalizeze achiziția. Sau plasați strategic produse cu reduceri folosind modulul Woo Product Upsell pentru a apărea ori de câte ori clienții au câteva produse în coș sau vizitează pagina coșului.
Opțiunile Divi’s Conditions pot ajuta la construirea unor experiențe unice de cumpărături. De exemplu, puteți afișa diferite secțiuni ale paginii de produs utilizatorilor conectați față de utilizatorii invitați. Dacă unele dintre produsele dvs. sunt epuizate, puteți afișa o altă reducere pentru a încuraja utilizatorii să adauge mai multe în coșul lor.
3. Salvați modificările și previzualizați pagina coșului
Odată mulțumit de designul dvs., faceți clic pe butonul Salvați din dreapta jos a Divi Builder.
Începeți cu Divi
Adăugarea unui formular pop-up pentru e-mail (opțional)
De asemenea, puteți utiliza pluginul Bloom de la Divi pentru a crea un pop-up de înscriere prin e-mail cu cupoane de reducere exclusiv pentru abonații de e-mail. Bloom vine cu multe tipuri de afișare diferite, inclusiv un pop-up care poate fi activat pe baza anumitor declanșatori pe care le puteți alege. De exemplu, puteți afișa fereastra pop-up dacă un utilizator este inactiv pe pagina produsului sau după o anumită perioadă de timp. Puteți chiar să declanșați o fereastră pop-up personalizată pe pagina de mulțumire după ce efectuează o achiziție. Acesta ar fi un moment minunat pentru a oferi o reducere pentru a vă alătura listei de e-mail, astfel încât să puteți obține mai multe vânzări.
Începeți cu Divi + Bloom
Mai multe moduri de a vă optimiza pagina de coș WooCommerce
În afară de personalizarea șablonului de coș WooCommerce cu Divi, iată câteva plugin-uri esențiale și extensii WooCommerce care vă vor ajuta să vă optimizați și mai mult paginile coșului:
- Bloom: pentru a reduce tarifele pentru coșul de cumpărături abandonate, colectați clienți potențiali direct de pe paginile produselor dvs., oferind reduceri speciale sau actualizări în schimbul înscrierilor prin e-mail.
- Divi Mini Cart: Afișează un buton unic de coș pe alte pagini WooCommerce pentru a le permite clienților să-și acceseze cu ușurință pagina coșului.
- Aspecte Divi Woo: obțineți machete frumoase de coș, produse și WooCommerce cu o opțiune de import cu un singur clic.
- Piața Divi: găsiți mai multe teme, extensii și machete personalizate uimitoare pentru copii pentru a vă îmbunătăți paginile coșului.
- WooCommerce One Page Checkout: Îmbunătățiți ratele de conversie permițând clienților să finalizeze procesul de plată pe o singură pagină.
- Cantități Min/Max pentru WooCommerce: Clienții își pot personaliza coșul de cumpărături adăugând o opțiune de cantitate minimă și maximă la fiecare produs.
- Vânzările forțate pentru WooCommerce: adăugați automat produse în coș pe care clienții doresc să le cumpere în funcție de interacțiunea utilizatorului.
- Notificări despre coș pentru WooCommerce: Adăugați notificări personalizate despre coș pentru a oferi informații relevante care ar putea ajuta la creșterea vânzărilor.
- Vânzări de coș pentru WooCommerce: adăugați oferte de vânzare în plus și de vânzare încrucișată la pagina dvs. de coș WooCommerce.
Instrumente pentru personalizarea paginilor coșului WooCommerce
Sarcină | Instrument sugerat | |
---|---|---|
1 | Personalizați paginile WooCommerce fără codare | Divi WooCommerce Builder |
2 | Adăugați produse, opțiuni de plată și construiți un magazin online | WooCommerce |
3 | Generați descrierea produsului, titluri, imagini și aspecturi întregi | Divi AI |
4 | Comprimați imaginile produsului fără a compromite calitatea | EWWW |
5 | Permiteți clienților să partajeze produse pe rețelele sociale | Monarh |
6 | Creați formulare de e-mail irezistibile pentru a-i încuraja pe utilizatori să se înscrie pentru lista dvs. de e-mail | Floare |
7 | Afișează pictogramele coș pe toate paginile WooCommerce | Divi Mini Cart |
8 | Obțineți modele de coș WooCommerce frumos create cu un singur clic | Aspecte Divi Woo |
9 | Găsiți mii de machete și extensii WooCommerce | Piața Divi |
10 | Optimizați paginile de produse pentru SEO și stimulați cumpărători organici | RankMath SEO |
11 | Creați un proces de plată pe o pagină în WooCommerce | Finalizare pe o pagină |
12 | Setați cantitățile minime și maxime pentru achizițiile de produse | Cantități minime maxime pentru WooCommerce |
13 | Forțați să adăugați produse relevante în coșurile clienților dvs | Force Sells pentru WooCommerce |
14 | Afișați notificări personalizate pe cărucioarele clienților | Notificări despre coș pentru WooCommerce |
15 | Creați vânzări suplimentare WooCommerce pentru a încuraja mai multe adăugări în coșuri | Coș de vânzare pentru WooCommerce |
Divi + WooCommerce este soluția supremă de comerț electronic
Divi + WooCommerce este o combinație puternică perfectă pentru construirea de magazine de comerț electronic. Personalizarea Divi perfecționează funcționalitatea de comerț electronic a WooCommerce, astfel încât să puteți crea pagini captivante de coș, să optimizați pentru conversii și să oferi experiențe de cumpărături excepționale.
Începeți cu Divi