Cum să editați pagina de coș WooCommerce folosind ProductX

Publicat: 2022-06-22

WooCommerce creează automat Coș și toate celelalte pagini esențiale. Și dacă vrei să editezi? Sau doriți să creați și să personalizați pagina de coș WooCommerce de la zero?

Dacă utilizați WooCommerce de ceva timp, este posibil să știți deja că WooCommerce nu oferă multe opțiuni de personalizare. Puteți modifica designul paginii WooCommerce schimbându-vă tema. Cu toate acestea, încă nu puteți obține opțiunile complete de editare. Deci asta să faci? Cum se editează pagina coșului WooCommerce?

Dacă doriți să editați pagina de coș WooCommercrce, urmați pașii de mai jos:

  • Pasul 1. Instalați pluginul ProductX WooCommerce Blocks
  • Pasul 2. Activați Addon WooCommerce Builder
  • Pasul 3. Creați un nou șablon de coș WooCommerce
  • Pasul-4. Personalizați pagina coșului WooCommerce
  • Pasul-5. Editați pagina coșului WooCommerce
Conținutul ascunde
1 Ce este WooCommerce Cart Page?
2 Cum să editați pagina de coș WooCommerce
2.1 Pasul-1. Instalați pluginul ProductX WooCommerce Blocks
3 Pasul -2. Activați Addon WooCommerce Builder
4 Pasul-3. Creați un nou șablon de coș WooCommerce
4.1 Pasul-4. Personalizați pagina coșului WooCommerce
4.1.1 Adăugați bara de progres Expediere gratuită
4.2 Adăugați tabelul de coș
4.2.1 Adăugați totalul coșului
4.2.2 Afișați produse de vânzare încrucișată
4.3 Pasul-5. Editați pagina coșului WooCommerce
4.4 Opțiuni de editare a tabelului coș
4.5 Opțiuni de ediție a Coșului Total
4.6 Opțiuni de ediție a blocului de livrare gratuită
5 Concluzie

Ce este WooCommerce Cart Page?

Pagina WooCommerce Cart, cunoscută și sub denumirea de coș de cumpărături este pagina în care toate produsele dorite ale cumpărătorilor sunt afișate pe un tabel de coș cu prețuri și cantitate. Din această pagină, cumpărătorii scot produse, măresc sau micșorează cantitatea și cumpără produsul accesând pagina de finalizare a comenzii.

Cum se editează pagina coșului WooCommerce

Acum că, știți ce este pagina coșului de cumpărături și de ce ar trebui să o edităm. Acum, este timpul să explicăm cum să editați pagina coșului WooCommerce. Pentru asta, vom crea un șablon personalizat de pagină de coș WooCommerce utilizând suplimentul WooCommerce builder al pluginului ProductX.

Sună dificil și confuz? De fapt, nu este cazul dacă urmați corect pașii de mai jos. Deci, fără să facem mai departe, să începem.

Pasul 1. Instalați pluginul ProductX WooCommerce Blocks

După cum am menționat deja, vom folosi addonul WooCommerce Builder pentru ProudctX pentru a edita pagina implicită de coș a WooCommerce. În primul rând, trebuie să instalăm pluginul ProductX. Pentru asta:

Install ProductX
Instalați ProductX
  • Accesați secțiunea Plugin din tabloul de bord WordPress.
  • Introduceți numele pluginului „ProductX” în bara de căutare.
  • Instalați și activați pluginul ProductX.

Pasul 2. Activați Addon WooCommerce Builder

WooCommerce Builder este un supliment pentru ProductX. Ajută la crearea de șabloane pentru pagini personalizate de magazin, arhive, cărucioare și pagini cu un singur produs. Pentru a începe să folosim șablonul, trebuie să-l pornim. Pentru asta:

Turn on WooCommerce Builder Addon
Activați Addon WooCommerce Builder
  • Accesați secțiunea ProductX
  • Faceți clic pe „Suplimente” pentru a accesa secțiunea Toate suplimentele
  • Din lista Toate suplimentele, activați Builder Addon

Pasul 3. Creați un nou șablon de coș WooCommerce

După ce activăm suplimentul pentru constructor, putem începe să construim șabloane woocommerce personalizate. De exemplu, vom crea un șablon de coș WooCommerce. Pentru asta:

Create a New WooCommerce Cart Template
Creați un nou șablon de coș WooCommerce
  • Accesați secțiunea Builder din ProductX.
  • Faceți clic pe Adăugați nou.
  • Adăugați numele șablonului.
  • Selectați Coș din fila Tip șablon.
  • Faceți clic pe salvare și începeți editarea șablonului.

Asta e tot, noul șablon de coș WooCommerce este gata. Cu toate acestea, dacă accesați pagina coșului, aceasta va fi goală. Pentru că nu am adăugat nimic la șablon. Trebuie să adăugăm elementele și să le personalizăm în funcție de nevoile noastre.

Pasul-4. Personalizați pagina coșului WooCommerce

Acum că ați creat șablonul personalizat de pagină de coș, este timpul să-l personalizați. Generatorul de pagini de coș ProductX vine cu trei noi blocuri WooCommerce cu opțiuni de personalizare. Prin care putem personaliza pagina noastră de coș WooCommerce în funcție de nevoile noastre. Deci, să începem să adăugăm blocurile la șablonul de coș.

drag and drop cart builder

Adăugați bara de progres Livrare gratuită

ProductX oferă, de asemenea, un bloc de bară de progres împreună cu toate celelalte blocuri. Dar ce reprezintă această bară de progres?

Probabil știți că WooCommerce ne permite să adăugăm o opțiune de livrare gratuită în funcție de o sumă minimă de comandă. Astfel, cumpărătorii se pot bucura de transport gratuit prin îndeplinirea criteriilor.

Cu această funcție, puteți atrage cumpărătorii să adauge mai multe produse în coșuri, rezultând o creștere a valorii medii a comenzii.

Cu toate acestea, WooCommerce nu ne lasă să afișăm suma minimă a comenzii pentru livrare gratuită. Dar vrei să-l afișezi corect? Nu vă faceți griji, ProductX v-a luat spatele. Puteți doar să adăugați suplimentul Free Shipping Progress Bar pentru a-l evidenția și a încuraja utilizatorii să cumpere produsul.

Deci, decideți unde doriți să adăugați blocul și faceți clic pe pictograma plus. Apoi selectați blocul barei de progres și acesta va fi adăugat la poziția dorită. De exemplu, îl adaug în partea de sus a paginii coșului. Dar, după cum am spus, îl puteți adăuga în orice poziție de pe pagina coșului.

Free Shipping Progress Bar
Bara de progres cu livrare gratuită

Adăugați masa de coș

În primul rând, trebuie să adăugăm masa de cărucioare. Pentru asta, ProductX oferă un bloc de masă pentru cărucioare. Pentru a adăuga acest bloc:

  • În timp ce editați șablonul de coș, faceți clic pe pictograma plus
  • Derulați în jos și faceți clic pe tabelul cărucior al blocului
Cart Table
Masa de carucior

După ce faceți clic pe bloc, acesta va fi adăugat automat cu un conținut fals. Nu vă faceți griji, conținutul va fi înlocuit cu informațiile exacte despre produs după adăugarea produselor în coș. Veți avea toate butoanele esențiale care sunt necesare pentru o pagină de coș inactiv. Și, desigur, puteți edita și toate elementele în funcție de nevoile dvs. Vom intra în asta într-un bi. Deocamdată, să continuăm personalizarea paginii.

Adăugați totalul coșului

După ce am adăugat masa de coș, am adăugat și totalul căruciorului, nu? Nu vă faceți griji ProductX oferă, de asemenea, blocarea totală a coșului. Pe măsură ce edităm șablonul folosind Gutenberg, putem organiza blocurile în funcție de nevoile noastre. De exemplu, voi adăuga blocul total al coșului urmând un aspect standard. De asemenea, îl puteți urmări dacă doriți.

  • Faceți clic pe pictograma Plus
  • Adăugați un bloc de coloană Gutenberg cu o rație de 70/30
  • Apoi adăugați blocul total al coșului în zona din dreapta a coloanei
Cart Total
Total coș

Acum, puteți vedea că pagina coșului urmează un standard. Cu toate acestea, îl puteți organiza și diferit.

Personalizarea paginii coș a fost finalizată. Acum faceți clic pe butonul de publicare. Adăugați câteva produse în coș și verificați vizualizarea în timp real a paginii coșului. Continuați să citiți postările de pe blog pentru a verifica modalitățile de editare a paginii coșului.

Afișați produse de vânzare încrucișată

După cum probabil știți, pagina implicită de coș WooCommerce afișează produse de vânzare încrucișată. Puteți face și pagina personalizată a coșului.

Cross Sell Product

Cu toate acestea, puteți adăuga și blocuri de produse ale PostX și sortați produsele ca vânzări încrucișate folosind funcția de interogare a produsului.

Pasul-5. Editați pagina coșului WooCommerce

Acum este timpul să discutăm despre partea principală a acestei postări de blog: cum să editați pagina de coș WooCommerce. Dezvoltarea ProductX a făcut o treabă grozavă activând opțiunile de editare a tuturor elementelor blocurilor de pagini de coș. Pentru că fără editarea opțiunii pagina personalizată a coșului nu are sens.

Deci, fără alte prelungiri, să începem să explorăm opțiunile de editare.

Opțiuni de editare a tabelului coș

Editing Options of Cart Table
Opțiuni de editare a tabelului coș

După adăugarea blocului de masă coș, veți vedea o opțiune de editare. În primul rând, puteți ascunde sau ascunde butonul din setările generale. Dacă ați activat orice buton. va exista un buton dedicat pentru acel buton de acolo, puteți personaliza toate elementele, inclusiv culorile textului, culorile de fundal, culorile hover, tipografie, umplutură etc.

Opțiuni de ediție a Coșului Total

Blocul Cart Total vine, de asemenea, cu tot felul de opțiuni de editare, inclusiv tipografie, culoarea textului, culoarea fundalului, culoarea hoverului, umplutura etc.

Editing Options of Cart Total
Opțiuni de editare ale Cart Total

Opțiuni de ediție a blocului de livrare gratuită

Opțiunile de ediție bloc de livrare gratuită încep cu activarea sau dezactivarea și ajustarea poziției liniei de progres. Apoi, puteți modifica și textul, culoarea, tipografia, raza chenarului, umplutura etc.

Editing Options Free Shipping Progress Barl
Opțiuni de editare Transport gratuit Progress Barl

Concluzie

Acesta este tot despre crearea și editarea paginii coșului WooCommerce. Acum, puteți începe să creați pagina de coș dorită cu stil și să încurajați cumpărătorii să adauge produse de vânzare încrucișată în coș. Nu ezitați să comentați mai jos dacă întâmpinați dificultăți în timp ce utilizați ProductX Cart Builder.

Vă place acest articol? Imprastie vestea
  • Best Post Grid Plugin

    Care este cel mai bun plugin Post Grid pentru WordPress

  • WooCommerce Call for Price

    Cum să configurați butonul WooCommerce Call for Price

  • Introducing ProductX Pro - A Gutenberg WooCommerce Blocks 1

    Vă prezentăm ProductX Pro – A Gutenberg WooCommerce Blocks

  • How to Add Featured Posts in WordPress

    Cum să adăugați postări recomandate în WordPress?