Cum se creează vizualizarea listei de produse WooCommerce

Doriți să creați o vizualizare a listei de produse WooCommerce pe site-ul dvs. web? Sunt foarte populare pentru a afișa mai multe informații despre un produs clienților tăi pe pagina magazinului. Așadar, vă vom prezenta un tutorial pas cu pas pentru a trece la o vizualizare a listei de produse în acest tutorial.

Dar înainte de a trece prin procesul, să vedem de ce aveți nevoie pentru a crea o vizualizare a listei de produse.

De ce să creați o vizualizare a listei de produse în WooCommerce?

În mod implicit, produsele de pe pagina magazinului dvs. sunt afișate în stil grilă. Da, acestea depind în întregime de tema activă a site-ului dvs. web. Dar, în cazul majorității temelor, acestea sunt afișate cu o reprezentare în grilă cu un produs după altul ca plăci.

Dar într-o vizualizare de listă, produsele sunt afișate cu mult mai multe detalii. Fiecare produs este afișat unul după altul într -o listă verticală cu informații suplimentare, cum ar fi detaliile de livrare, descrierea produsului și multe altele. De exemplu , să comparăm vizualizarea grilă și vizualizarea listă a magazinului online Best Buy.

Vizualizarea grilă implicită a produselor de pe site este reprezentată după cum urmează:

Cu toate acestea, nu puteți comuta direct la vizualizarea listă a site-ului web. Dar dacă doriți să vizualizați mai multe produse, produsele vor fi afișate în vizualizarea listă cu următorul aspect:

Putem vedea clar că în vizualizarea listă sunt afișate mai multe detalii despre produs decât în ​​vizualizarea grilă. Clienții pot vedea cu ușurință detaliile de livrare, modelul produsului și numerele SKU, pot compara opțiunile și lista de dorințe și așa mai departe în vizualizarea listă. În timp ce în vizualizarea grilă, aceste informații nu pot fi adăugate, deoarece vor face ca site-ul web să pară aglomerat.

De fapt, dacă conduceți un magazin online cu produse angro, cataloage de produse sau un sistem de comandă la restaurant , vizualizarea listă este mai convenabilă pentru clienții dvs. Toate detaliile necesare pot fi furnizate clienților dumneavoastră într-o singură pagină. Prin urmare, nu vor trebui să facă clic pe paginile individuale ale produselor pentru a vedea informațiile suplimentare.

Cum se creează o vizualizare a listei de produse WooCommerce?

Cel mai simplu mod de a crea o vizualizare a listei de produse WooCommerce este utilizarea unui plugin . Pluginurile WordPress vă ajută site-ul să sporească funcționalitatea și flexibilitatea acestuia. În mod similar, ele pot fi folosite și pentru a vizualiza produsele dintr-o listă.

Deși există multe plugin-uri care vă permit să creați o vizualizare a listei de produse, iată câteva dintre cele mai bune:

Vizualizare grilă/listă pentru WooCommerce

Vizualizarea grilă/listă pentru WooCommerce este unul dintre cele mai bune plugin-uri gratuite pentru a crea o vizualizare a listei de produse. Este foarte simplu de utilizat și adaugă doar o comutare pentru a activa fie lista, fie vizualizarea grilă pe pagina magazinului dvs. WooCommerce.

Pluginul vă oferă, de asemenea, diverse opțiuni de personalizare a stilului de produse de listă și grilă. Vă oferă opțiuni avansate pentru a modifica butonul de comutare grilă/listă prin care puteți chiar să îi schimbați poziția. În mod similar, produsele pe pagină pot fi, de asemenea, modificate după bunul plac cu ajutorul acestui plugin.

Caracteristici cheie:

• Buton de comutare listă și grilă
• Personalizare avansată pentru butonul comutator
• Opțiuni produse pe pagină
• Shortcode prietenos
• Compatibilitate cu principalele plugin-uri WooCommerce

Preț:

Vizualizarea grilă/listă pentru WooCommerce este un plugin gratuit. Este disponibil în depozitul oficial de pluginuri WordPress.

Tabel cu produse WooCommerce

WooCommerce Product Table este un plugin premium care vă poate ajuta să creați o vizualizare a listei de produse. Inițial, este unul dintre pluginurile WooCommerce pentru a crea un tabel pe site-ul dvs. web. Dar poate fi modificat cu ușurință pentru a vă afișa produsele într-o vizualizare de listă tabelară.

Pluginul este foarte ușor de configurat și permite utilizatorilor să comande mai multe produse simultan. De asemenea, oferă o opțiune încorporată de căutare și sortare pentru vizualizarea listă. Aceasta poate fi o caracteristică foarte convenabilă pentru utilizatorii dvs., deoarece aceștia pot găsi foarte ușor produsele dorite.

Caracteristici cheie:

• Opțiunea de vizualizare a listei tabelare pentru produse
• Căutare instantanee de produse și opțiuni de sortare
• Comandă rapidă de o pagină
• Interfață ușor de utilizat
• Butoane rapide „Adăugați în coș”.

Preț:

WooCommerce Product Table este un plugin premium care începe de la 499 USD pe an. Include 20 de licențe de site cu o garanție de rambursare a banilor de 30 de zile și asistență prioritară.

Acum că ne-am uitat la câteva plugin-uri, să vedem și cum să le folosim. Dar înainte de a începe, vă rugăm să vă asigurați că ați configurat WooCommerce corect, fără a rata niciun pas și că utilizați una dintre temele compatibile WooCommerce.

Creați vizualizarea listei de produse WooCommerce folosind un plugin

Pentru a crea vizualizarea listei de produse WooCommerce, vom folosi vizualizarea Grid/List pentru WooCommerce în această demonstrație. Este gratuit, foarte ușor de utilizat și o soluție simplă pentru a crea o vizualizare de listă pentru produse.

Dar pentru a începe să utilizați orice plugin, mai întâi trebuie să îl instalați și să îl activați.

1. Instalați și activați pluginul

Pentru a instala pluginul, accesați Plugin-uri > Adăugați nou din tabloul de bord WordPress. Apoi, căutați cuvintele cheie pentru plugin și faceți clic pe Instalați acum după ce îl găsiți.

Instalarea va fi finalizată după un timp. În cele din urmă, activați pluginul după ce este instalat.

Dacă doriți să utilizați un plugin premium, va trebui să îl încărcați și să îl instalați manual. Vă rugăm să aruncați o privire la ghidul nostru detaliat pentru a instala manual un plugin WordPress pentru mai multe informații.

2. Configurați setările pluginului

Odată ce activați pluginul, puteți configura setările acestuia pentru a crea o vizualizare a listei de produse WooCommerce. Deschideți BeRocket > Vizualizare grilă/listă din tabloul de bord WordPress. Veți putea vizualiza toate opțiunile de personalizare pentru lista de produse aici.

Cele trei personalizări majore includ butoanele, numărul de produse și CSS personalizat.

2.1. Buton Opțiuni

Pluginul vă oferă o mulțime de personalizări pentru butoanele dvs. pentru a comuta grila sau vizualizarea listă pentru produse.

Opțiunile generale includ stiluri implicite de butoane pentru ecranul desktop și mobil de pe site-ul dvs. web. De asemenea, puteți adăuga un stil de buton fix pentru o pagină. În mod similar, puteți, de asemenea, să ajustați pozițiile butoanelor pentru a fi afișate pe pagina dvs. de la stânga, la dreapta, deasupra meniului sau paginației sau chiar sub meniu.

Împreună cu aceste opțiuni, puteți edita și lățimea maximă a mobilului, clasa personalizată și umpluturile pentru buton.

În plus, există mai multe presetări și stiluri de butoane disponibile cu pluginul. Puteți selecta un buton prezent și îl puteți edita mai mult cu opțiunile detaliate de presetare. În plus, puteți modifica stilurile butoanelor cu lățimea, înălțimea, dimensiunea textului, înălțimea liniei și multe altele.

În plus, puteți personaliza, de asemenea, butonul normal, mouse-ul peste buton și stilurile de butoane selectate. Fiecare include ajustări pentru culoarea de fundal, lățimea și culoarea chenarului și opțiunile de umbră.

Faceți toate modificările necesare de care aveți nevoie și faceți clic pe Salvare modificări .

2.2. Opțiuni de numărare a produselor

De asemenea, puteți ajusta opțiunile de numărare a produselor folosind pluginul Grid/List View pentru WooCommerce atunci când creați o vizualizare a listei de produse. În primul rând, puteți fie să activați, fie să dezactivați utilizarea numărului de produse.

Dacă o activați, puteți adăuga în continuare intrări pentru produse pe pagină, valoarea numărului de produse și valoarea splitterului. Poziția numărului de produse poate fi, de asemenea, setată aici, împreună cu propriile opțiuni de buton și unde să le afișeze.

2.3. CSS/JavaScript personalizat

De asemenea, pluginul vă permite să adăugați CSS sau JavaScript personalizat atunci când vă creați vizualizarea listei de produse WooCommerce. Există casete de script desemnate pentru a adăuga CSS și JavaScript personalizat. JavaScript poate fi adăugat în diferite circumstanțe, cum ar fi înainte sau după lista sau setul de stiluri de grilă, cookie-uri, butoanele selectate pentru grilă/listă și așa mai departe.

De asemenea, puteți dezactiva fișierele CSS Font Awesome de aici sau puteți selecta o versiune Font Awesome.

După ce ați adăugat CSS-ul sau JavaScript personalizat necesar, nu uitați să salvați modificările .

Odată ce previzualizați pagina magazinului, veți putea vedea comutatorul pentru a comuta între vizualizarea grilă și lista. Numărul de produse este afișat și aici și descrierea produsului este, de asemenea, inclusă cu produsele.

Și așa cum se arată în demonstrația de mai jos, puteți trece la vizualizarea listei de produse făcând clic pe butonul de vizualizare a listei .

Clienții dvs. pot chiar să revină la vizualizarea grilă dacă este necesar. Ei pot face doar clic pe butonul de vizualizare grilă .

Asta e! Acesta este modul în care puteți crea o vizualizare a listei de produse WooCommerce și le puteți permite clienților să comute între vizualizarea grilă și lista.

Bonus: Activați modul Catalog în WooCommerce

V-am prezentat deja una dintre cele mai simple moduri de a crea o vizualizare a listei de produse WooCommerce. Sunt foarte utile pentru a vă prezenta produsele pe un site web de catalog. Cu toate acestea, pentru a vă ajuta să activați modul catalog în WooCommerce , vă vom oferi și un ghid simplu ca bonus.

Pentru a face acest lucru, va trebui să adăugați câteva fragmente de cod la fișierul functions.php de pe site-ul dvs., care este unul dintre fișierele de bază ale temei dvs. Așa că vă rugăm să creați o temă secundară pentru următorii pași și să faceți o copie de rezervă a site-ului dvs., astfel încât modificările dvs. să fie salvate atunci când actualizați tema WordPress. Dacă aveți nevoie de ajutor, puteți utiliza, de asemenea, unul dintre pluginurile pentru tema copil pentru WordPress pentru a crea o temă copil.

După ce activați tema copilului, accesați Aspect > Editor de fișiere temă și deschideți fișierul functions.php al temei dvs. Apoi, puteți începe să adăugați fragmentele de cod la sfârșitul editorului și să actualizați fișierul .

Fișierele cu teme depind de tema activă a site-ului dvs. Am folosit aici tema Divi, astfel încât editorul dvs. ar putea arăta puțin diferit.

Mai întâi, trebuie să eliminați butonul de adăugare în coș și apoi să ascundeți prețurile produselor. Prin urmare, trebuie să adăugați următoarele fragmente de cod în editor.

1. Eliminați butonul Adaugă în coș

Puteți folosi următorul script pentru a ascunde butonul de adăugare în coș pentru pagina magazinului și pagina de produs. Așa că lipiți-l în fișierul functions.php al temei dvs.

 remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

Această funcție va elimina pagina de adăugare în coș atât pentru pagina produsului WooCommerce, cât și pentru pagina magazinului.

Dacă doriți ca produsele să nu fie achiziționate , puteți adăuga și următorul fragment de cod.

 add_filter( 'woocommerce_is_purchasable', '__return_false');

De asemenea, va înlocui butonul de adăugare în coș cu un buton „Citește mai mult”.

2. Ascundeți prețurile produselor

Puteți ascunde prețurile produselor în diferite moduri în WooCommerce. Ele pot fi păstrate ascunse pentru toți utilizatorii sau pentru toată lumea, cu excepția administratorului.

Dacă doriți să ascundeți prețurile produselor pentru toți utilizatorii , utilizați următorul script:

 add_filter( 'woocommerce_get_price_html', 'QuadLayers_remove_price');
funcția QuadLayers_remove_price($preț){
întoarcere ;
}

Ca alternativă, dacă doriți să ascundeți prețurile pentru toată lumea, cu excepția administratorului , atunci utilizați următorul fragment:

 add_filter( 'woocommerce_get_price_html', 'QuadLayers_remove_price');
funcția QuadLayers_remove_price($preț){
if ( is_admin() ) returnează $preț;
întoarcere ;
} 

În plus, dacă este necesar, puteți ascunde produsele doar în pagina magazinului . Tot ce trebuie să faceți este să lipiți următorul fragment de cod în fișierul functions.php

 add_filter( 'woocommerce_after_shop_loop_item_title', 'remove_woocommerce_loop_price', 2 );
funcția remove_woocommerce_loop_price() {
if( ! is_shop() ) return; // Ascundeți prețurile doar pe pagina magazinului
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
}

Loc de muncă bun! Acum puteți crea o vizualizare a listei de produse WooCommerce și puteți activa corect modul catalog pe site-ul dvs. web. Dacă doriți metode alternative de afișare a modului catalog, avem un ghid detaliat pentru a activa modul catalog în WooCommerce. În mod similar, dacă aveți nevoie de mai multe informații pentru a elimina butonul de adăugare în coș sau pentru a ascunde prețurile în WooCommerce, le-am acoperit și noi.

Concluzie

Sperăm că puteți crea acum o listă de produse WooCommerce pentru magazinul dvs. online. Puteți utiliza cu ușurință un plugin dedicat pentru a le permite clienților să treacă la o vizualizare a listei de produse. Pluginurile le permit chiar să treacă înapoi la vizualizarea grilă, dacă este necesar, împreună cu o mulțime de alte opțiuni de personalizare.

De asemenea, v-am oferit câțiva pași de bază pentru a personaliza pagina magazinului, activați modul catalog pe site-ul dvs., unde puteți afișa și vizualizarea listei de produse. Dacă doriți să faceți modificări în mai multe pagini WooCommerce, puteți personaliza și pagina coșului de cumpărături, pagina categoriei sau chiar pagina de plată cu plugin-uri precum WooCommerce Checkout Manager.

Deci, puteți adăuga o vizualizare a listei de produse în magazinul dvs. online fără probleme? Ai incercat vreodata? Vă rugăm să ne anunțați în comentarii.

Între timp, iată mai multe dintre articolele noastre care v-ar putea interesa:

• Cum să personalizați Galeria de produse WooCommerce
• Schimbați mesajul Niciun produs în coș
• Cum să adăugați imaginea produsului la WooCommerce Checkout