O prezentare generală a noului plugin WooCommerce Blocks

Când instalați sau actualizați WooCommerce, acesta include un nou plugin numit Blocuri WooCommerce. Aceasta adaugă blocuri noi editorului de blocuri WordPress care vă permit să adăugați produse WooCommerce la paginile și postările dvs. În acest articol, vom arunca o privire asupra blocurilor WooCommerce și vom vedea ce pot face.

Plugin WooCommerce Blocks

WooCommerce Blocks este un nou add-on pentru WooCommerce care adaugă 7 blocuri la Gutenberg:

1. Produs recomandat
2. Produse alese manual
3. Produsele cele mai bine vândute
4. Produse de top
5. Cele mai noi produse
6. Produse la vânzare
7. Produse după categorie

Fiecare dintre blocuri se afișează într-o grilă reglabilă și sunt sortabile sau filtrabile. Grilele vă permit să specificați numărul de coloane din aspect. Alegeți între 1 și 6 coloane ajustând un control glisant. Mai multe dintre blocuri vă permit, de asemenea, să reglați numărul de rânduri. 4 este valoarea implicită pentru toate blocurile cu coloane sau rânduri. Nu include paginarea, deci numărul pe care l-ați setat este tot ceea ce va fi afișat.

Filtrele vă permit să alegeți categoriile. Unele includ o funcție de sortare, care vă permite să sortați după noutate, preț, evaluare, vânzări, titlu sau comandă de meniu.

Blocurile includ, de asemenea, fila standard Gutenberg Advanced cu câmpuri CSS personalizate.

Activați blocul Produse

Când actualizați sau activați WooCommerce, veți vedea noul plugin în lista dvs. de pluginuri. Dacă nu o vedeți aici, puteți căuta blocuri WooCommerce în fila Adăugare nouă sub Plugins.

Puteți activa blocul din lista de pluginuri sau făcând clic pe butonul din partea de sus a tabloului de bord WordPress.

Utilizarea blocurilor WooCommerce

Noua filă numită WooCommerce este adăugată la lista blocurilor disponibile din editorul Gutenberg. În interiorul acestei file se află setul de 7 blocuri WooCommerce. Fiecare dintre blocuri are o pictogramă care se potrivește cu ceea ce fac, astfel încât să le puteți recunoaște dintr-o privire.

Pe măsură ce adăugați blocurile la pagină, simbolurile apar pe pagină, unde puteți face clic pentru a le adăuga rapid.

Să ne uităm la fiecare bloc.

Produs recomandat

Produsul recomandat vă permite să alegeți un singur produs din listă pentru afișare. Puteți alinia textul, edita suprapunerea și edita imaginea. De asemenea, are câmpul Clasă CSS suplimentară.

Acest bloc are cele mai multe personalizări disponibile dintre toate blocurile WooCommerce. Setați orientarea textului cu butoanele text din partea de sus. Dând clic pe Editare se deschid personalizările pentru suprapunere. Aici puteți alege produsul, afișa descrierea, afișa prețul, alege culoarea suprapunerii și setați opacitatea acestuia.

Puteți alege o culoare de utilizat sau puteți alege o culoare personalizată făcând clic pe cercul multicolor. Aici puteți introduce codul hexagonal, codul RGB sau puteți regla culoarea cu glisorul și selectorul de culori. Îmi plac ajustările suprapunerii. Pentru a regla textul sau butonul va trebui să utilizați CSS.

Produse alese manual

Produsele selectate manual vă permit să selectați produsele care vor fi afișate. Le puteți căuta din blocul în sine sau din coloana din dreapta. Setați numărul de coloane de la 1 la 6. Comandați după noutate, preț, evaluare, vânzări, titlu sau comandă de meniu.

Selectarea produselor le adaugă la aspectul din grilă.

Produsele cele mai bine vândute

Produsele cele mai bine vândute nu vă permit să alegeți nimic din bloc, dar puteți efectua toate personalizările dvs. în setările din dreapta. Aici puteți selecta numărul de coloane și rânduri (alegeți de la 1 la 6 pentru fiecare), filtrați în funcție de categorie și reglați CSS.

În acest exemplu, am ales 6 coloane, 2 rânduri și categoria Îmbrăcăminte.

Produse de top

Produsele cu cele mai bune evaluări adaugă, de asemenea, produsele pe măsură ce selectați blocul. Setările permit includ aspectul standard pentru 1-6 coloane și rânduri, filtrare după categorie și CSS. Acesta afișează setările implicite.

Cele mai noi produse

Cele mai noi produse adaugă automat produsele pe măsură ce selectați blocul. Setările includ aspectul standard, filtrul de categorii și CSS. În acest exemplu, am ales 5 coloane și 3 rânduri. Am lăsat filtrul de categorii în mod implicit, care include fiecare categorie.

Produse la vânzare

Produsele la vânzare încarcă automat toate produsele care sunt la vânzare. De asemenea, include opțiunile de aspect pentru coloane și rânduri, filtrul de produse și CSS. Aceasta adaugă o opțiune Comandă după, astfel încât să puteți comanda după noutate, preț, evaluare, vânzări, titlu sau comandă de meniu. În acest exemplu, am setat coloanele la 2 și rândurile la 4. Am lăsat categoria de produse la valoarea implicită.

Produse după categorie

Produsele pe categorii vă permit să alegeți categoriile din cadrul blocului și include un selector pentru a ajuta la rafinarea alegerilor. Pentru exemplul meu, avea doar o singură opțiune (Orice categorii selectate). De asemenea, include opțiunile de aspect, selectarea categoriilor, ordinea în funcție și setările CSS.

În acest exemplu, am selectat categoriile mele, am setat coloanele la 4, rândurile la 2 și am ordonat produsele în ordine alfabetică.

Exemple de pagini cu blocuri WooCommerce

Iată o privire la fiecare bloc din partea frontală. Am adăugat o etichetă pentru a le identifica. Le-am setat pe fiecare la un număr diferit de coloane, dar toate au un rând pentru a împiedica imaginea să scape de sub control. Puteți crea cu ușurință o pagină de magazin pentru fiecare categorie folosind aceste blocuri.

De exemplu, am creat o pagină doar pentru a prezenta accesorii. Am adăugat o imagine de copertă și un titlu și am setat blocul Produse după categorie pentru a afișa 3 coloane și 6 rânduri.

Creează o pagină curată, cu un design frumos și, desigur, arată doar produsele pentru categoria accesorii. Aceasta poate fi utilizată pentru a crea toate tipurile de pagini de produse.

Iată un scurt CTA care adaugă un bloc selectat manual și un bloc de text într-o coloană dublă.

Pagina este simplă, dar este funcțională.

Pentru această pagină, am adăugat cele mai bine vândute produse într-un aspect de postare pe blog. L-am setat la 4 coloane și 1 rând și am selectat Îmbrăcăminte ca categorie.

Postarea arată grozav. Înainte de publicare, aș adăuga probabil niște spațiu, o etichetă pentru produse și poate adăuga niște umplutură textului, dar este ușor de văzut potențialul.

Pentru aceasta, am adăugat un aspect cu două coloane și am adăugat un bloc de text și blocul Cele mai vândute produse cu 2 coloane și 2 rânduri.

Gânduri de sfârșit

WooCommerce Blocks este un plugin interesant. Blocurile sunt ușor de utilizat și oferă câteva instrumente utile de categorie, aspect și filtrare. Îmi plac glisantele de aspect pentru coloane și rânduri. Dacă doriți să faceți ajustări textului, butoanelor, suprapunerilor, etc., va trebui să utilizați CSS, dar cel puțin CSS personalizat este o opțiune. Blocurile sunt excelente pentru a crea pagini de vânzări sau pentru a adăuga produse în conținutul dvs.

Aș dori să mai văd câteva caracteristici de stil (în special pentru butoane, text și suprapuneri cu mouse-ul). Am tot dorit să personalizez așa cum aș face cu Divi (cred că Divi m-a stricat). Include câmpurile clasei CSS care îi vor ajuta pe cei care utilizează CSS. Chiar și fără multe personalizări, mi-a plăcut să folosesc blocurile. Dacă doriți să includeți produsele WooCommerce în paginile și postările dvs. Gutenberg, merită încercate WooCommerce Blocks.

Vrem sa auzim de la tine. Ați încercat blocurile WooCommerce? Spuneți-ne despre experiența dvs. în comentarii.

Imagine prezentată prin Jomic / shutterstock.com