Doriți să aflați cum să creați o pagină de magazin personalizată? WooCommerce cu Elementor?

După cum probabil știți, Elementor Pro vine cu funcția de constructor WooCommerce care vă permite să creați un site web de e-Commerce personalizat cu WooCommerce fără codificare. Această caracteristică vă permite să creați pagini WooCommerce personalizate folosind editorul vizual Elementor care oferă o interfață intuitivă.

Vezi și: Cum se instalează Elementor pe WordPress

În momentul redactării acestui articol, puteți crea pagini personalizate pentru pagina magazinului, pagina produsului și paginile de arhivă a produselor (etichete și categorii). În curând, veți putea crea și pagini personalizate pentru pagina de plată și pagina coșului de cumpărături.

În acest articol, vă vom arăta cum să creați o pagină de magazin personalizată WooCommerce utilizând funcția de generare WooCommerce a Elementor Pro.

Pagina magazinului în sine este una dintre paginile implicite din WooCommerce. Această pagină acționează ca o vitrină pentru afișarea produselor dvs. Puteți accesa această pagină accesând yoursite.com/store. În mod implicit, pagina magazinului WooCommerce afișează numai produsele WooCommerce.

Prin crearea unei pagini de magazin personalizate utilizând Elementor Pro, puteți adăuga elemente pentru a vă face magazinul mai atractiv.

Cum se creează o pagină personalizată a unui magazin WooCommerce cu Elementor

Există cel puțin două widget-uri Elementor pe care le puteți utiliza pentru a crea o pagină personalizată a unui magazin WooCommerce: Produse de arhivă și Produse.

În acest exemplu, îl folosim pe acesta din urmă.

Funcția widgetului Produse este destul de similar cu cel al widgetului Postări. Diferența este că widgetul Produse este utilizat pentru a afișa produsele WooCommerce, în timp ce widget-ul Postări este utilizat pentru a afișa postări de blog.

Citiți și: Cum se importă sau se exportă modele în Elementor

Vă rugăm să rețineți că puteți găsi widgetul Produse numai atunci când pluginul WooCommerce este instalat și activat.

Pentru a începe să creați o pagină personalizată a magazinului WooCommerce utilizând Elementor Pro, accesați în primul rând à Șabloane -> Generator de teme pe tabloul de bord WordPress. Faceți clic pe fila Produse arhivă din pagina Theme Builder, apoi faceți clic pe buton adăuga o ARHIVĂ DE PRODUSE.

Dă-i modelului un nume și dă clic pe buton CREAȚI UN MODEL.

cum se creează o pagină personalizată pentru un magazin WooCommerce cu Elementor

Există trei șabloane de pagini de magazin personalizate din care puteți alege în cazul în care doriți să creați pagina de magazin personalizată dintr-un șablon. Dacă doriți să construiți pagina magazinului personalizat de la zero, puteți închide biblioteca de șabloane.

Vezi și: Cum se utilizează Color Sampler în Elementor

În acest exemplu, vom crea pagina magazinului personalizat de la zero. După cum sa menționat mai sus, vom folosi widgetul Produse pentru a afișa produsele.

Înainte de a adăuga widgetul Produse în caseta de editare, puteți defini aspectul adăugând secțiuni și coloane. Odată ce aspectul este gata, puteți trage pur și simplu widgetul Produse în caseta de editare.

După cum puteți vedea, widgetul Produse încarcă și afișează automat cele mai recente produse WooCommerce. Puteți modifica interogarea deschizând blocul Interogare sub filă Conținut din panoul de setări. Există cinci opțiuni dintre care puteți alege:

  • Interogare curentă - Interogare curentă
  • Ultimele produse - Ultimele produse
  • Vânzare - Vânzare
  • Recomandat - Recomandat
  • Selecție manuală - Selecție manuală

De asemenea, puteți seta ordinea în care sunt afișate produsele sau puteți exclude anumite

cum se creează o pagină personalizată pentru un magazin WooCommerce cu Elementor

Pentru a seta numărul de coloane și rânduri, puteți deschide blocul Conţinut sub filă Conţinut. Din acest bloc puteți activa și fișierul paginare.

Puteți juca cu panoul de setări până când obțineți cele mai bune setări pentru widgetul Produse. După ce ați terminat cu widgetul Produse, puteți adăuga mai multe widget-uri la pagina dvs.

Citiți și: Cum se folosește selectorul de culori în Elementor

După ce ați terminat de editat pagina, puteți face clic pe buton publier în partea de jos a panoului de setări.

Adăugați o condiție de afișare făcând clic pe buton adăugați o condiție. Deoarece doriți să creați o pagină de magazin personalizată, selectați opțiunea Magazin Pagină. Faceți clic pe butonul SALVAȚI ȘI ÎNCHIDEȚI pentru a salva schimbarea.

cum se creează o pagină personalizată pentru un magazin WooCommerce cu Elementor

Până acum, ați creat cu succes pagina magazinului personalizat WooCommerce folosind Elementor Pro. Poti pleca la site-ul dvs..com/store pentru a verifica rezultatul.

Personalizați widgetul Produse

Înainte de a vă publica pagina, puteți personaliza widgetul Produse pentru a-l face mai atractiv. Pentru aceasta, faceți clic pe widgetul din caseta de editare și navigați la filă Stil din panoul de setări. Există patru blocuri pe care le puteți deschide după cum urmează:

  • Produse

Puteți deschide acest bloc pentru a defini decalajul dintre coloane și rânduri. Din acest bloc puteți seta, de asemenea, tipografia (familia fontului, dimensiunea fontului etc.), precum și culoarea textului elementelor produsului, cum ar fi titlul produsului, prețul produsului, evaluarea produsului, produsul etc .... De asemenea, puteți seta marginea imaginii produsului,

  • Cutie

În acest context, Caseta se referă la containerul fiecărui produs. Puteți deschide blocul Cutie pentru a defini lățimea chenarului containerului, raza chenarului, umbra cutiei, culoarea de fundal, culoarea chenarului etc.

  • Paginație

Dacă activați opțiunea Paginație de la bloc Conţinut, puteți deschide blocul Paginație sub filă Stil pentru a personaliza paginarea. Puteți seta lucruri precum spațierea, culoarea chenarului, culoarea de fundal etc.

De asemenea, puteți defini diferiți parametri pentru fiecare stare (normal, îndreptat și activ).

  • Dirty Flash

Când adăugați un produs nou în WooCommerce, puteți seta un atribut de preț de vânzare pentru a le arăta vizitatorilor că produsul asociat este redus. Pentru a sublinia acest lucru, puteți afișa atributul de vânzare pe pagina magazinului, astfel încât produsele reduse să aibă o insignă de vânzare.

Puteți deschide blocul Dirty Flash pentru a personaliza insigna de vânzare. Puteți defini elemente precum culoarea textului, culoarea fundalului, tipografia, raza chenarului, dimensiunea (lățimea și înălțimea), distanța etc.

Până la urmă

WooCommerce Builder este una dintre caracteristicile oferite de Elementor Pro. Îți permite creați un site web platformă de comerț electronic personalizată și unică cu WooCommerce și fără codare. Nu este nevoie să instalați un WordPress temă care pretinde a fi conceput pentru WooCommerce. În schimb, puteți crea singur pagini WooCommerce personalizate folosind editorul vizual Elementor.

Citiți și: Cum se adaugă divizor pentru a crea secțiunea în Elementor

Până la versiunea 3.2.2, Elementor Pro vă permite să creați numai pagini personalizate de magazin, pagini personalizate cu un singur produs și pagini personalizate de arhivă a produselor. Dar Elementor a anunțat că în următoarea versiune a Elementor Pro, veți putea crea, de asemenea, o pagină personalizată de coș, o pagină personalizată de plată și o pagină personalizată a contului de client.

Obțineți Elementor Pro acum!

Concluzie

Aici ! Gata pentru acest articol care vă arată cum să creați o pagină personalizată pentru un magazin WooCommerce cu Elementor. Dacă aveți nelămuriri cu privire la modul de a ajunge acolo fanunțați-ne în comentarii.

Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...