Cum să creați bare laterale filtrate pentru paginile dvs. Divi WooCommerce

Dacă ați încercat vreodată să adăugați bare laterale WooCommerce filtrate la paginile pe care le-ați creat cu generatorii de pagini, probabil ați observat că filtrele nu apar pe paginile dvs. Nu contează ce constructor de pagini utilizați, filtrele pur și simplu nu vor fi afișate.

Motivul este că aceste widget-uri nu sunt compatibile cu constructorii de pagini. În acest articol, vom analiza o modalitate ușoară de a crea bare laterale WooCommerce filtrate pentru paginile realizate cu Divi Builder sau orice alt constructor de pagini.

Barele laterale standard WooCommerce

WooCommerce include mai multe widget-uri filtrabile.

• Filtrați produsele după atribut
• Filtrați produsele după preț
• Filtrați produsele după evaluare

Aceste widgeturi funcționează excelent pe teme WordPress obișnuite, dar nu se afișează pe paginile realizate cu constructori de pagini.

Teme WordPress

Widgeturile filtrabile funcționează bine în paginile realizate cu teme WordPress obișnuite. The Twenty Seventeen le arată pe bara laterală fără probleme. Folosesc datele de eșantion WooCommerce care includ culori și prețuri. Filtrarea produselor după atribut și după preț sunt proeminente.

Iată Divi care afișează pagina implicită a magazinului WooCommerce fără a utiliza Divi Builder. Afișează widget-urile de filtru la fel ca orice temă normală.

WordPress Builders

Paginile realizate cu constructori nu afișează widget-urile de filtrare WooCommerce. Nu face nicio diferență dacă bara laterală este afișată în interiorul constructorului sau ca bara laterală standard. Iată câteva exemple.

Această pagină a fost construită cu Beaver Builder. Include bara laterală, dar filtrele nu se afișează. Am adăugat un widget text, astfel încât să puteți vedea bara laterală care se afișează fără widget-urile de filtrare. Am publicat pagina pentru a vizualiza live, dar nu a făcut nicio diferență.

Acesta a fost construit cu Elementor. Am adăugat bara laterală deasupra produselor. Afișează widgetul text, dar nu filtrele. De asemenea, am publicat pagina pentru a vizualiza live, dar nu a existat nicio diferență.

Iată Divi Builder care arată aceeași bară laterală. Utilizarea pluginului sau temei Divi Builder a avut același rezultat. Am publicat pagina pentru a vizualiza live, dar filtrele încă nu se afișau.

Se afișează filtrele WooCommerce în bare laterale Builder

Din fericire, există o modalitate ușoară de a afișa un filtru de produse WooCommerce în bara laterală, chiar dacă creați pagina produsului cu un constructor de pagini. Avem nevoie de un plugin numit WooCommerce Product Filter.

Themify - Filtru de produse WooCommerce

WooCommerce Product Filter este un plugin gratuit de la Themify care funcționează diferit de widget-urile standard de filtrare a produselor WooCommerce. Creați cu ușurință mai multe combinații de filtre. Creați formularul cu ajutorul constructorului de formulare drag and drop. Setați-l pe un aspect vertical sau orizontal, alegeți numărul de coloane și stilizați-l pentru a se potrivi site-ului dvs. web. Afișează rezultatele căutării live și include o mulțime de opțiuni. Este intuitiv de utilizat și funcționează cu toți constructorii de teme.

Crearea unui nou filtru de produse

Instalați pluginul din depozitul WordPress. În meniul Tabloul de bord, accesați Filtre produse > Filtre produse > Adăugați un nou . Veți obține un modal cu tot ce aveți nevoie pentru a crea filtrul. Parcurgeți setările pentru a vă crea codul scurt. În loc să aibă trei widget-uri de filtrare, acest filtru poate crea mai multe tipuri de filtre personalizate pentru a crea orice număr de widget-uri.

Dați-i un titlu care descrie filtrul. Alegeți dintr-un aspect vertical sau orizontal, dacă doriți să afișați câmpuri goale, sortarea produselor, numărul de produse și produsele care nu mai sunt în stoc. Alegeți dacă să afișați sau nu paginarea și alegeți între defilare standard, infinită sau încărcați mai multe.

Introduceți numărul de produse pe pagină. Alegeți dacă doriți să activați grupurile de câmpuri, să derulați până la rezultat, alegeți între logica ȘI SAU pentru taxonomii și dacă rezultatele se afișează pe pagina curentă sau pe o pagină nouă. Dacă alegeți o pagină nouă, veți putea selecta pagina dintr-o listă. De asemenea, puteți alege dacă filtrul se afișează sau nu pe noua pagină.

După ce ați făcut selecțiile, va trebui să creați formularul. Aceasta va determina modul în care filtrul va apărea în bara laterală. Trageți fiecare dintre elementele de formular dorite în câmpul din partea de jos a ecranului de creare a codului scurt.

Fiecare element deschide un nou set de caracteristici. Fiecare este diferit, dar majoritatea au opțiuni similare. Iată o privire la Categorie.

Dă-i un titlu. Puteți ascunde titlul dacă doriți. Alegeți dacă să afișați sau nu numărul de produse, ierarhia categoriilor și să includeți copii. Afișați filtrul ca casetă de selectare, linkuri, butoane radio, casetă derulantă sau selectare multiplă. Alegeți logica, setați ordinea de sortare și alegeți aspectul cu numărul de coloane. Setați culorile textului. De asemenea, puteți alege ce categorii să includeți sau să excludeți.

Dacă alegeți culoarea, pictogramele vor deschide un set de selectoare de culori, unde puteți seta culorile fiecărei categorii de produse în mod individual. Setați culoarea pentru fundal și text. Puteți alege culorile din selectoare sau puteți introduce codurile hexagonale în câmpuri.

De asemenea, puteți trage și plasa câmpurile în ordinea în care doriți. După ce ați creat filtrul, selectați Salvare .

Închideți modalul și veți vedea filtrul adăugat la listă. Acesta oferă numele, codul scurt și lista câmpurilor din filtru. Puteți edita, exporta sau șterge filtrul. Copiați codul scurt.

Adăugați un widget text în bara laterală și lipiți-l în codul scurt.

Filtrele se afișează acum în paginile magazinelor create cu constructori. Iată pagina cu Divi Builder.

Iată filtrul care apare pe pagina realizată de Beaver Builder în tema Twenty Sixteen.

Iată filtrul cu Elementor în tema Douăzeci și șaptesprezece. Acesta folosește un aspect orizontal.

Utilizarea Filtrului de produse Themify - WooCommerce cu aspect Divi

Divi are o mulțime de machete din care să alegeți. În acest exemplu, am adăugat un modul de text pe pagina Magazin de mobilă și am plasat codul scurt al filtrului în modulul de text. Aș fi putut alege modulul barei laterale, dar nu contează cu acest exemplu.

Acesta este aspectul vertical. Se încadrează frumos în designul aspectului.

Am setat butoanele pentru a se potrivi cu stilul aspectului. Din păcate, nu am putut ajusta butonul de căutare.

Iată aspectul orizontal. Acest exemplu folosește în continuare aspectul coloanei 3/2 pe care l-am ales pentru filtrul vertical.

Filtrele se deschid pe hover. Este receptiv, deci se afișează vertical pentru a se potrivi în coloană.

Pentru aceasta, am plasat filtrul sub modulul magazinului.

Iată filtrul de deasupra modulului magazin.

Indiferent dacă utilizați codul scurt într-un modul text sau într-o bară laterală, puteți adăuga un stil folosind fila Proiectare a modulului Divi. Aceasta înseamnă că puteți stiliza textul etichetei stilizând textul modulului. În acest exemplu, am setat textul la roșu, am mărit dimensiunea și l-am făcut cu majuscule.

Filtrarea produselor WooCommerce

Pentru a efectua căutarea, utilizatorul dă clic pe butoane, bifează casetele și glisați glisorul pentru a filtra ceea ce caută. De asemenea, pot introduce un titlu. Când sunt gata, fac pur și simplu clic pe butonul de căutare.

rezultatele cautarii

Rezultatele vor afișa modul în care l-ați configurat în setări. Pentru aceasta, l-am setat să le afișeze în partea de jos a paginii. Derulează automat la rezultate și oferă utilizatorului o funcție de sortare.

Dacă îl setați să se deschidă într-o pagină nouă, acesta va plasa rezultatele în partea de jos a paginii respective. În acest exemplu, am creat o pagină folosind antetul de pe pagina Magazinului de mobilă. Am deschis funcția de sortare pentru a afișa opțiunile de sortare.

Gânduri de sfârșit

Acesta este aspectul nostru de a crea bare laterale WooCommerce filtrate pentru pagina realizată cu Divi Builder. Pluginul este intuitiv și adaugă o mulțime de funcții de filtrare la produsele WooCommerce. Puteți crea câte filtre doriți și le puteți plasa pe orice pagină doriți. Puteți chiar să le coafați cu caracteristicile de stil Divi. Deoarece este un cod scurt, le puteți utiliza în bare sau module.

Aș dori să am mai mult control asupra modului în care sunt afișate rezultatele. De exemplu, ar fi util să plasați un shortcode unde va apărea rezultatul. Acest lucru ar permite ca rezultatele să fie plasate oriunde pe pagină, mai degrabă decât în ​​partea de jos. Acest lucru ar permite subsoluri personalizate, o zonă de rezultate într-o pagină etc. Aș dori, de asemenea, să mai am câteva opțiuni de stil. În principal, vreau să stilez butonul de căutare.

Themify - Filtrul de produse WooCommerce este o alegere excelentă dacă doriți un plugin gratuit pentru a adăuga un filtru de produse în paginile dvs. Divi Builder.

Vrem sa auzim de la tine. Ați încercat pluginul Themify - Filtru produs WooCommerce cu pagini de magazin realizate cu Divi Builder? Spuneți-ne despre experiența dvs. în comentarii.

Imagine prezentată prin Max Griboedov / shutterstock.com