Un ghid pentru utilizarea blocurilor Gutenberg pentru magazinul dvs. WooCommerce

Introducerea editorului Gutenberg în WordPress a contribuit în mare măsură la remodelarea identității WordPress. De la a fi un sistem de bază de management al conținutului cu caracteristici pentru adăugarea media și opțional, pluginuri pentru diverse nevoi, acum este, în plus, un editor WYSIWYG bogat, centrat pe media și un generator de pagini web, fără compromisuri la flexibilitatea pe care a oferit-o întotdeauna. De fapt, blocurile pe care le oferă Gutenberg măresc flexibilitatea de a construi pagini în modul în care doriți.

Cel mai bun avantaj pe care îl oferă Gutenberg față de editorul anterior (numit și editor TinyMCE) este că elimină nevoia de a ști cum să codificați sau nevoia de a înțelege structura WordPress pentru a ști cum să adăugați mai multe funcționalități site-ului dvs. WordPress sau WooCommerce. magazin. Dacă, totuși, vă simțiți mai confortabil cu vechiul editor WordPress, puteți oricând să instalați acest plugin gratuit cunoscut sub numele de Editorul clasic de către colaboratorii WordPress, care vă oferă opțiunea de a dezactiva complet Gutenberg sau de a comuta între vechiul editor și Gutenberg. . Gutenberg oferă, de asemenea, un bloc Editor clasic pentru ca utilizatorii să folosească funcționalitățile editorului clasic din Gutenberg! Sună prea frumos pentru a fi adevărat? Să ne aprofundăm în această postare sau mai degrabă într-un ghid de utilizare a blocurilor Gutenberg pentru magazinul tău WooCommerce!

Blocurile Gutenberg pot fi accesate prin orice pagină WordPress. Când adăugați o pagină nouă sau editați o pagină existentă în WordPress, puteți vedea un simbol „+” în timp ce treceți cu mouse-ul în zona de conținut din stânga sus a ecranului.

Există diferite tipuri de blocuri pe care Gutenberg le oferă pentru diferite utilizări:

În timp ce blocurile pot fi folosite pentru a construi o varietate de pagini, în calitate de administrator WooCommerce sau manager de magazin, ați dori să vă concentrați cel mai mult pe pagina Acasă sau Magazin. Prin urmare, în scopul acestui tutorial, să creăm o pagină de pornire pentru magazinul dvs., care este concepută pentru a vă crește vânzările! Vom folosi cel mai mult blocurile WooCommerce pentru asta. Aceste blocuri au fost mai devreme parte a unui plugin de caracteristici de la Automattic și au fost îmbinate în WooCommerce versiunea 3.5.

Blocurile WooCommerce conțin diferite caracteristici sau „blocuri” legate în principal de afișarea produselor pe pagina dvs., pe care le puteți utiliza pentru a vă construi magazinul. Mai jos este lista blocurilor disponibile sub blocurile WooCommerce:

• Produse pe categorii
• Cele mai noi produse
• Produs recomandat
• Cele mai vândute produse
• Produse la vânzare
• Produse alese manual
• Produse de top
• Produse după atribut

Să începem cu adăugarea unui produs recomandat în partea de sus a paginii noastre de pornire. Acesta poate fi orice produs pe care doriți să-l evidențiați utilizatorilor / publicului dvs.

Am adăugat un produs cunoscut sub numele de „Abonament la magazin”. De îndată ce un produs este adăugat, imaginea, descrierea și prețul acestuia sunt afișate. Puteți alege să le ascundeți folosind opțiunile din bara laterală din dreapta. Se adaugă și un buton „Cumpără acum”; culoarea, textul și adresa URL către care indică sunt toate atribute editabile.

Culoarea de suprapunere este o caracteristică interesantă care vă permite să setați culoarea și opacitatea imaginii produsului pe care ați ales-o să fie produsul recomandat în acest caz:

De asemenea, puteți adăuga o clasă CSS la această imagine. În mod similar, butonul Cumpără acum poate fi, de asemenea, editat:

În continuare, să adăugăm câteva noi sosiri și cele mai bune vânzări ale magazinului, astfel încât atât vizitatorii noi, cât și cei care revin, vor avea ceva de luat din această pagină.

Pentru aceasta, vom adăuga mai întâi un bloc cunoscut sub numele de Heading găsit sub Common Blocks:

Odată ce este adăugat un titlu corespunzător, cum ar fi „Noi Sosiri”, putem continua și adăuga blocul respectiv pentru același. Pentru ambele scopuri, vom folosi blocuri WooCommerce cunoscute sub numele de Cele mai bine vândute produse și Cele mai noi produse . Aceste blocuri pot fi găsite din nou sub blocuri WooCommerce. Să adăugăm blocul Cele mai noi produse .

Puteți vedea că blocul Cele mai noi produse atrage cele mai recent produse adăugate din magazinul dvs. WooCommerce. Puteți alege să afișați câte produse doriți pentru acest bloc setând numărul de rânduri și coloane de afișat, precum și să filtrați produsele după categorie folosind opțiunile din bara laterală din dreapta:

În acest fel, am adăugat un alt rând după rândul Produs recomandat pentru noile sosiri:

Apoi, să adăugăm cele mai bine vândute produse într-un mod similar (după adăugarea blocului Titlu pentru el):

Acum că am creat aceste rânduri atât pentru vizitatorii noi, cât și pentru vizitatorii recurenți, să adăugăm și un rând care afișează produsele care sunt în vânzare pentru a atrage mai multe vânzări. Vom face acest lucru folosind din nou blocul On Sale sub WooCommerce Blocks (după ce folosim blocul Heading pentru a adăuga un titlu):

Există multe alte blocuri pe care le puteți adăuga sub blocuri WooCommerce în funcție de cerințele dvs. Să adăugăm acum toate produsele pe pagina Magazin. Pentru aceasta, puteți alege blocul Produse după Categorie .

De multe ori, veți găsi toate aceste blocuri și în categoria de blocuri Cele mai utilizate , dar în scopul acestui tutorial, am selectat acele blocuri din categoria în care au fost alocate. Puteți lega toate titlurile la paginile lor respective, cum ar fi pagina de reduceri, pagina de cele mai bune vânzări etc., pentru ca clienții să vadă lista completă de produse din acea secțiune.

Pe pagina noastră Magazin/Acasă, putem adăuga un buton care spune Răsfoire magazin, care va trimite către pagina Magazin.

Pentru a adăuga un buton, trebuie să alegem dintre blocul Elemente de aspect.

Vom lega acest buton la pagina Magazin.

În mod similar, puteți crea butoane sub toate celelalte blocuri pe care le-am creat, cum ar fi blocul „Cele mai bine vândute”, blocul „On Sale” etc. și puteți crea pagini separate pentru toate acestea și puteți lega butoanele la paginile respective.

Pentru a crea pagini separate pentru tipuri separate de produse (cel mai bine vândute sau produse de vânzare), puteți utiliza shortcode-uri care vor afișa acest tip specific de produse pe paginile respective. În această postare, am vorbit despre cum puteți afișa diferite categorii de produse pe pagina de pornire (sau orice pagină) folosind diverse shortcodes.

Asa arata pagina noastra pana la urma:

Acum, doar faceți clic pe Personalizare (pe front-end, la previzualizarea paginii) pentru a o face prima pagină și sunteți gata! Acesta este cât de ușor este să creezi pagini principale atractive pentru magazinul tău WooCommerce folosind Gutenberg. Explorează și experimentează cu diferitele blocuri pe care Gutenberg le oferă pentru a-și folosi funcțiile la maximum!