Cum să adăugați filtre de produs WooCommerce AJAX

Doriți să creați filtre de produse AJAX pentru site-ul dvs.? Ai venit la locul potrivit. În acest articol, vă vom arăta cum să adăugați filtre de produse WooCommerce pentru a îmbunătăți experiența de cumpărături în magazinul dvs.

Înainte de a arunca o privire asupra procesului de creare și adăugare a filtrelor de produse, să înțelegem mai bine ce sunt filtrele de produse AJAX și de ce aveți nevoie de ele.

Ce sunt filtrele de produs AJAX?

Filtrele de produse ajută utilizatorul să-și găsească rapid produsul dorit prin stabilirea cerințelor și prin filtrarea tuturor rezultatelor nedorite. De exemplu, dacă un client dorește un tricou albastru, va selecta un tricou ca tip de produs și filtrul de culoare albastră pentru a renunța la toate celelalte produse și culori. În mod similar, pot exista filtre pentru dimensiune, greutate, preț, evaluare medie și așa mai departe.

Termenul AJAX se referă la o tehnică de dezvoltare web care permite ca pagina să fie actualizată asincron pentru cantități mici de date. Acest lucru permite site-ului să aplice modificări minore unei pagini web în timp ce rămâne pe aceeași pagină, ceea ce înseamnă că nu este necesară reîmprospătarea. În schimb, cu tehnici mai vechi, întreaga pagină web a trebuit să fie reîncărcată de fiecare dată când a existat vreo modificare minoră care afectează experiența utilizatorului și consumă mai multe resurse de server.

De ce ar trebui să utilizați filtre de produs?

Acum întrebarea care se pune aici este de ce ar trebui să utilizați filtre de produse în magazinul dvs.? Mai simplu spus, aveți nevoie de filtre de produse pentru a îmbunătăți experiența de cumpărături a clienților dvs. și pentru a-i ajuta să găsească ceea ce caută. Aproape fiecare magazin online cu un număr mare sau o varietate de produse utilizează filtre de produse. Amazon, eBay și Zara sunt exemple bune în acest sens.

Prin utilizarea filtrelor, cumpărătorii pot elimina cu ușurință toate rezultatele nedorite și pot obține o selecție numai a produselor de care sunt interesați. Acest lucru are ca rezultat o mai bună satisfacție a clienților, ceea ce duce la mai multe conversii și vânzări.

Pe de altă parte, fără filtrele de produse AJAX, clienții pot avea dificultăți în a afla produsele pe care le doresc. Cumpărăturile online ar trebui să fie rapid și ușor, așa că dacă procesul durează prea mult, clienții vor părăsi magazinul dvs. și vor merge pe un alt site care oferă o experiență mai bună.

Deoarece probabil că nu doriți să vă pierdeți clienții, filtrele de produse ar trebui să fie o parte importantă a strategiei dvs. de afaceri online.

Deci, acum le cunoașteți importanța, să vedem cum puteți activa filtrele de produse în magazinul dvs. WooCommerce.

Cum să adăugați filtre pentru produse WooCommerce

În acest tutorial, vă vom arăta două moduri diferite de a adăuga filtre de produse în magazinul dvs.

1. Filtre de produse WooCommerce implicite
2. Folosind un plugin terță parte

Să aruncăm o privire la ambele metode.

1. Filtre de produse WooCommerce implicite

În mod implicit, WooCommerce oferă câteva filtre de bază pentru produse. Dacă aveți un magazin relativ mic, fără o mare varietate de produse, este posibil să descoperiți că filtrele implicite sunt suficiente pentru nevoile dvs.

Pentru a adăuga aceste filtre în magazinul dvs., mergeți la Tabloul de bord WP Admin și navigați la Aspect > Widgeturi. Acolo veți găsi o listă cu toate widget-urile disponibile pentru site-ul dvs.

Dacă aveți WooCommerce activat, veți găsi filtrele implicite de produse în lista de widget-uri. Doar faceți clic și trageți widgetul dorit de filtru în oricare dintre zonele widget acceptate de tema dvs. În cazul nostru, vom adăuga filtrele de produse în bara laterală.

Acesta este literalmente tot ce trebuie să faceți pentru a adăuga filtrele implicite de produse WooCommerce în magazinul dvs.

Filtre de produs implicite

În mod implicit, există trei tipuri de filtre de produs: preț, atribut și evaluare medie.

• Filtrați după preț: adaugă un glisor pe care îl puteți utiliza pentru a filtra produsele în funcție de intervalul de preț
• Filtrați după atribute : vă permite să filtrați articole în funcție de atributele lor, cum ar fi dimensiunea, greutatea, culoarea și multe altele. Rețineți că va trebui să adăugați un widget separat pentru fiecare atribut
• Filtrați după evaluarea medie: după cum sugerează și numele, puteți filtra produsele în funcție de evaluarea medie

Deoarece filtrele implicite ale produselor WooCommerce sunt preconfigurate, nu trebuie să le configurați. Doar trageți-le într-o zonă de widget și asta este tot. Cu toate acestea, opțiunile lor sunt destul de simple, așa că nu oferă multe opțiuni de personalizare pentru a edita fonturi, forme sau glisoare.

Chiar dacă filtrele implicite pentru produse WooCommerce vor face treaba pentru majoritatea utilizatorilor de acolo, există o capcană. De fiecare dată când un client selectează un filtru, întreaga pagină trebuie să se reîncarce pentru ca modificarea să fie aplicată. După cum vă puteți imagina, acest lucru este enervant pentru utilizatori și le afectează experiența de cumpărături. De aceea ar trebui să adăugați filtre de produs AJAX .

Din păcate, WooCommerce nu acceptă filtre AJAX în mod implicit, așa că trebuie să vă bazați pe pluginuri terțe.

2. Utilizarea unui plugin terță parte

Există mai multe instrumente pe care le puteți folosi pentru a adăuga filtre de produse WooCommerce. Pentru acest tutorial, vom folosi Advanced AJAX Product Filters dezvoltate de BeRocket . Acesta este un instrument bogat în funcții freemium, care asigură o experiență fluidă pentru utilizator.

Pluginul este specializat în filtre de produse AJAX și oferă o mare varietate de filtre cu stil personalizat pentru a se potrivi cu aspectul magazinului dvs. De asemenea, permite filtre individuale și de grup și vă puteți seta preferințele generale care vor fi valabile pentru ambele tipuri de filtre.

Acum să vedem cum puteți adăuga acest plugin în magazinul dvs. WooCommerce.

Pasul 1: Instalați pluginul

În primul rând, trebuie să instalați pluginul. Pentru aceasta, accesați Tabloul de bord WP Admin și navigați la Plugin-uri > Adăugați nou.

Căutați filtrele avansate de produs AJAX de la BeRocket. Faceți clic pe butonul Instalare pentru a instala pluginul și apoi activați -l.

După aceea, accesați BeRocket > Filtre de produse unde veți putea să vă setați preferințele pentru filtre. Acestea nu sunt setări tehnice, ci mai degrabă preferințe generale și opțiuni de personalizare pe care le puteți configura după cum doriți. Puteți selecta numărul de valori ale atributelor, puteți ascunde valorile și multe altele.

Acum că ați instalat și configurat pluginul, să vă creăm primul filtru.

Pasul 2: Creați un filtru de produs nou

Pentru a crea un filtru de produs, mergeți la Tabloul de bord WP Admin și accesați BeRocket > Filtre.

Pe pagina de setări, apăsați butonul Adăugare filtru .

Va apărea o nouă pagină de setări și va trebui să completați toate detaliile pentru a crea un filtru. Există mai multe secțiuni pe care trebuie să le completați, așa că haideți să le aruncăm o privire una câte una.

• Titlu: dați un titlu semnificativ filtrului, astfel încât să fie ușor de înțeles, de exemplu, dimensiunea, culoarea, evaluarea și așa mai departe
• Condiții: puteți seta condiții pentru a afișa filtrul pe anumite pagini, produse sau categorii. Puteți adăuga mai multe condiții și chiar și condiții imbricate. De asemenea, puteți ascunde filtrul pe anumite tipuri de dispozitive, cum ar fi mobil, filă sau desktop
• Tip widget: Aici trebuie să selectați tipul de filtru pe care doriți să îl creați. Există patru tipuri din care puteți alege: Filtru, Buton Actualizare produse, Buton Resetare produse și Zona de filtre selectate
• Atribute și valori: specificați atributul pentru filtrul curent
• Stil: stilați și personalizați filtrul. Veți avea mai multe aspecte din care să alegeți, cum ar fi caseta de selectare, meniul drop-down, caseta de culoare, glisor și multe altele
• Opțiuni necesare: furnizați toate opțiunile disponibile sub acest filtru. De exemplu, furnizați toate culorile disponibile pentru filtrul de culoare
• Adițional: această secțiune conține doar preferințe. Există mai multe opțiuni pe care le puteți seta în funcție de cerințele dvs

După ce ați completat formularul, faceți clic pe butonul Salvare filtru pentru a crea filtrul.

Gestionați-vă filtrele

Apoi puteți naviga la BeRocket > Filtre pentru a găsi toate filtrele create într-un singur loc. Din această pagină, puteți edita, activa, dezactiva și chiar elimina orice filtru dorit.

Felicitări! Acum ați creat primul filtru de produs WooCommerce folosind un plugin. În mod similar, puteți crea câte filtre aveți nevoie pentru a îmbunătăți experiența clienților.

Dar asta nu este! Ați creat un filtru individual pentru moment, dar puteți face un pas mai departe și puteți crea grupuri de filtre. Cu acest plugin, puteți îmbina filtrele cu atribute similare într-un singur grup. De exemplu, dimensiunea, greutatea și culoarea pot fi combinate pentru a crea un grup de filtre numit Atribute fizice . Grupurile de filtre sunt ușor de gestionat și păstrați bara laterală organizată în cazul în care aveți prea multe filtre.

Acum să vedem cum să adăugați grupuri de filtre de produse în WooCommerce folosind Advanced AJAX Product Filters.

Pasul 3: Creați un grup de filtre

În tabloul de bord WordPress, navigați la BeRocket > Grupuri și faceți clic pe butonul Adăugare grup de filtre pentru a crea un grup de filtre.

Pe pagina de setări, completați formularul Adăugați un nou grup de filtre exact așa cum ați făcut înainte pentru filtrele individuale. Acesta este ușor diferit, așa că haideți să aruncăm o privire asupra opțiunilor:

• Titlu: Nu există secrete aici, doar oferiți grupului dvs. de filtrare un titlu clar și semnificativ
• Condiții: Setați condițiile dacă doriți să afișați filtrul pe anumite pagini sau categorii. Puteți adăuga mai multe condiții, precum și condiții imbricate. De asemenea, puteți alege să ascundeți filtrul de pe un anumit dispozitiv
• Setări de grup: puteți alege ce filtre individuale doriți să adăugați la acest grup. Selectați filtrul dorit din meniul derulant și apăsați Adăugare filtru pentru a-l adăuga la grup. În mod similar, puteți adăuga câte filtre doriți

După ce ați terminat, faceți clic pe butonul Salvare din colțul din dreapta sus pentru a salva grupul de filtre.

Acum puteți naviga la BeRocket > Grupuri și puteți arunca o privire asupra tuturor grupurilor dvs. de filtre într-un singur loc. De asemenea, puteți gestiona, edita sau elimina grupuri din această pagină.

Acum că le-am creat, este timpul să afișăm aceste filtre pe front-end-ul magazinului.

Pasul 4: Afișați filtrele

În tabloul de bord WP Admin, accesați Aspect > Widgeturi.

Localizați widget-urile AAPF Filters Single și AAPF Filters Group și trageți-le și plasați-le în zona de widget dorită. Rețineți că va trebui să adăugați widgetul pentru fiecare filtru separat. Selectați filtrul pe care doriți să-l adăugați la acest widget și faceți clic pe Salvare .

Bravo! Tu ai făcut-o. Filtrele sunt acum afișate pe front-end-ul magazinului dvs. în zona widget corespunzătoare.

Cu toate acestea, mai este ceva. aceasta nu este singura modalitate de a adăuga filtre de produse în magazinul dvs. WooCommerce. Dacă doriți să afișați filtrele în altă zonă în afară de zonele de widget-uri, puteți utiliza coduri scurte.

Pasul 5: Afișați filtrele în afara zonei de widget-uri folosind coduri scurte

Fiecare filtru are un cod scurt pe care îl puteți folosi pentru a-l afișa oriunde pe site-ul dvs. Accesați BeRocket > Filtre și veți găsi codurile scurte pentru fiecare filtru. Doar copiați codul scurt pentru filtrul pe care doriți să-l afișați.

După aceea, accesați pagina/postarea unde doriți să afișați filtrele, faceți clic pe pictograma + din stânga sus și căutați blocul de coduri scurte. Apoi selectați pictograma widget de cod scurt pentru a adăuga o zonă de cod scurt la pagina/postarea dvs.

Acum inserați codul scurt al filtrului pe care tocmai l-ați copiat în zona de coduri scurte și apăsați Actualizare/Publicare în colțul din dreapta sus pentru a face modificările live.

Asta e! Filtrele vor fi acum afișate în locația dorită. Puteți naviga la front-end pentru a vedea modificările.

Pasul 6: Identificați problemele cu filtrele

Mai stați puțin! Există o altă mică caracteristică a acestui plugin pe care ne-ar plăcea să o menționăm. Acest plugin de filtru pentru produse WooCommerce vă oferă un instrument la îndemână pentru a vă informa despre starea filtrelor dvs. active. Mai mult, vă spune dacă există probleme cu un anumit filtru și motivul din spatele acestuia, astfel încât să îl puteți remedia și să-l faceți să funcționeze în cel mai scurt timp.

Pentru a utiliza instrumentul de stare a filtrelor active, conectați-vă la administratorul WP și navigați la front-end unde sunt afișate filtrele. Pe bara neagră de sus, veți vedea fila Filtre de produse cu o pictogramă rachetă. Faceți clic pe această filă și va afișa toate informațiile utile.

Totul este gata! Felicitări! Acum puteți să creați, să actualizați și să afișați cu succes filtre de produse în magazinul dvs. WooCommerce și, de asemenea, să aveți grijă de eventualele probleme cu filtrele.

Concluzie

Una peste alta, filtrele de produse WooCommerce sunt o necesitate dacă aveți un număr mare de produse sau o gamă diversă de produse. Sunt foarte convenabile pentru clienți, deoarece îi ajută să găsească mai rapid produsele pe care le caută și să-și îmbunătățească experiența de cumpărături.

În calitate de proprietar de magazin, satisfacția clienților este de cea mai mare importanță și vă poate ajuta să vă creșteți vânzările. Pe de altă parte, dacă cumpărătorii tăi nu pot găsi rapid ceea ce își doresc, probabil că vor pleca și nu se vor mai întoarce.

În acest tutorial, am văzut cum puteți adăuga filtre de produse în magazinul dvs. WooCommerce și să vă asigurați că utilizatorii găsesc ceea ce își doresc.

Pe scurt, am învățat:

• Ce sunt filtrele de produs AJAX?
• Beneficiile filtrelor de produse WooCommerce
• Cum să adăugați filtre pentru produse WooCommerce
  • Filtre de produse WC implicite
  • Folosind un plugin terță parte

Ați încercat să adăugați filtre de produse în magazinul dvs.? Ce metodă ai folosit și cum a fost experiența ta? Anunțați-ne în secțiunea de comentarii de mai jos.