Hur jag ställde in WooCommerce produktfilter & slutade tappa kunder

Första gången jag lade till produktfilter i min WooCommerce-butik var en katastrof. De såg ut som om de var designade 1999, förvirrade mina kunder mer än de hjälpte, och värst av allt, de förstörde min kassasida. Jag var tvungen att ta bort dem inom några timmar.

Men jag visste att min butik behövde filter. När du har hundratals produkter letar kunderna efter ett sätt att snabbt begränsa sina val. Utan korrekt filtrering blir de överväldigade och lämnar, och tar sina pengar med sig.

Så jag rullade upp ärmarna och testade alla större WooCommerce-filtreringslösningar jag kunde hitta. Efter veckor av testning hittade jag de bästa plugins: lätta att installera, vackra att se på, och viktigast av allt, de hjälper kunderna att hitta (och köpa) vad de behöver.

I den här guiden kommer jag att dela med mig av hur jag ställde in mina WooCommerce-produktfilter så att du också kan sluta tappa potentiella kunder.

Varför lägga till WooCommerce produktfilter?

Produktfilter gör det enklare för kunder att hitta exakt vad de letar efter. Istället för att skrolla igenom långa produktlistor kan de begränsa resultaten efter pris, storlek, färg, betyg och mer — med bara några få klick.

Detta är viktigt eftersom dålig navigering ofta leder till avbrutna köp och förlorad försäljning. När besökare inte snabbt kan hitta vad de behöver, lämnar många av dem utan att köpa något.

Dessutom kan tillägg av filter till din WooCommerce-butik minska din avvisningsfrekvens avsevärt. Kunderna spenderar mer tid på att bläddra och slutför faktiskt sina köp.

Att lägga till produktfilter hjälper till att förbättra både shoppingupplevelsen och din butiks prestanda. Här är hur:

• ⏱️ Spara dina kunders tid – Shoppare kan snabbt begränsa hundratals produkter till några få bra alternativ på sekunder, vilket gör surfandet snabbare och mindre frustrerande.
• 📈 Öka försäljningen – När kunder snabbt hittar rätt produkt är de mer benägna att lägga den i kundvagnen och slutföra köpprocessen.
• 🧑‍💻 Öka visningstiden – Tydliga filter håller besökare utforskande i din butik istället för att de lämnar för att leta någon annanstans.
• 📱 Förbättra mobilshopping – Filter gör det mycket enklare för mobilanvändare att bläddra i din katalog utan oändlig scrollning på en liten skärm.
• 🌟 Bygg kundförtroende – En ren, välorganiserad butik visar att du bryr dig om shoppingupplevelsen, vilket hjälper till att bygga förtroende för ditt varumärke.

Med det i åtanke kommer jag att guida dig genom hur du lägger till WooCommerce-produktfilter. Här är allt jag kommer att täcka i den här guiden:

Metod 1: Lägg till ett WooCommerce-produktfilter i Amazon-stil (rekommenderas)

WPFilters är det bästa WooCommerce-filterpluginet – det är nybörjarvänligt och ser bra ut direkt ur lådan. Du behöver inte vara utvecklare för att ställa in det, och det ger din butik rena filter i Amazon-stil som gör det enklare för kunder att hitta vad de letar efter.

Dessutom fungerar det vackert med alla WooCommerce-teman, vilket gör det till ett säkert val oavsett vilket tema du använder.

För mer insikt i detta verktyg, se vår detaljerade WPFilters-recension.

Steg 1: Installera och aktivera WPFilters

För att komma igång med produktfiltrering behöver du installera WPFilters.

Först måste du registrera ett WPFilters-konto på SearchWP:s webbplats. SearchWP är företaget bakom WPFilters, och de erbjuder pålitligt stöd om du någonsin behöver hjälp.

Klicka på knappen Get WPFilters Now, välj en plan och följ stegen för att slutföra köpet.

När du har registrerat dig, logga in på ditt kontos instrumentpanel och ladda ner pluginets ZIP-fil. Du hittar den i ditt kontoområde för nedladdningar.

Nu är du redo att installera och aktivera plugin-programmet. Gå till Plugins » Lägg till Plugin i din WordPress-adminpanel.

På nästa skärm klickar du på 'Ladda upp plugin' för att öppna filuppladdaren.

Klicka sedan på knappen ‘Välj fil’, välj zip-filen på din lokala dator och klicka på ‘Installera nu’.

Glöm inte att klicka på 'Aktivera' för att slutföra installationsprocessen. Om du behöver hjälp, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

Efter aktivering startar WPFilters automatiskt en installationsguide för att hjälpa dig att komma igång. Klicka på knappen ‘Låt oss komma igång’.

Den här guiden kommer sedan att guida dig genom grundkonfigurationen och ansluta pluginet till din WooCommerce-butik.

Följ helt enkelt anvisningarna på skärmen i installationsguiden. Processen tar bara en minut eller två och säkerställer att allt är korrekt inställt för din butik.

Steg 2: Skapa ett nytt filterelement för dina WooCommerce-produkter

Nu när WPFilters är installerat är det dags att skapa ditt första filterelement. Ett filterelement är helt enkelt ett filtreringsalternativ som kunder kan använda, till exempel filtrering efter färg eller storlek.

För att komma igång, navigera till WPFilters » Elements i din WordPress adminpanel. Klicka sedan på knappen 'Lägg till ny' högst upp på sidan.

Först måste du ange ett namn för ditt filter.

Detta namn är endast för din referens i adminområdet. Men jag rekommenderar att välja något beskrivande som “Färg” eller “Filter” för enklare organisation.

Därefter väljer du typ av filterfält som bestämmer hur kunderna kommer att interagera med detta filter.

WPFilters erbjuder flera alternativ:

• Kryssruta – Låt kunder välja flera alternativ samtidigt
• Radio – Tillåt endast ett val åt gången
• Rullgardinsmeny – Visa alternativ i en rullgardinsmeny för att spara utrymme
• Rullgardinsmeny (flerval) – Typen av rullgardinsmeny som tillåter flera val
• Sök – Lägg till en sökruta där kunder kan skriva vad de letar efter
• Reglage – Perfekt för prisintervall eller numeriska värden
• Återställ – Lägg till en knapp för att rensa alla valda filter

För de flesta produktegenskaper, som färg, storlek eller märke, rekommenderar jag att använda kryssrutefunktionen. Det är det enklaste sättet för kunder att använda och låter dem kombinera flera val.

Efter att ha valt din filtertyp måste du lägga till en datakälla. Detta talar om för WPFilters vilken produktinformation som ska filtreras efter, till exempel produktkategorier, taggar eller anpassade attribut.

Klicka på datakälldropdownmenyn och välj det attribut du vill filtrera efter. Om du har konfigurerat produktegenskaper i WooCommerce kommer de att visas i den här listan.

Steg 3: Anpassa ditt WooCommerce-produktfilter

Med ditt filterelement skapat kan du nu anpassa hur det ser ut och beter sig i din butik. WPFilters ger dig flera alternativ för att få filtret att matcha ditt varumärke och förbättra användarupplevelsen.

Du kan börja med att justera inställningarna i avsnittet 'Behållare', där du kan:

• Visa titel – För att visa eller dölja filter namnet ovanför alternativen.
• Kollapsbar – Användbart om du har flera filter på en sida. Kunder kan expandera eller kollapsa varje filter för att hålla layouten ren.
• Visa mer/mindre – Begränsa antalet alternativ som visas till en början och låt kunderna expandera listan om de vill se mer. Detta hjälper till att förhindra att långa filterlistor tar över sidan.
• Horisontell – Visa filteralternativ i en rad istället för en kolumn. Detta fungerar bra för enkla filter med bara några få val, som storlekar.

Så här justerar jag mina 'Behållare'-inställningar:

Gå sedan till avsnittet 'Artikelinställningar'.

• Antal artiklar – Visar hur många produkter som matchar varje alternativ. Till exempel kommer kunder att se Blå (15) eller Röd (8), så de vet vad som finns tillgängligt innan de klickar.
• Tom – Döljer alternativ utan matchande produkter, vilket håller dina filter rena och undviker återvändsgränder.
• Hierarkisk – Grupperar relaterade alternativ tillsammans, vilket gör att kunder kan gå ner från en huvudkategori till underkategorier, vilket gör den perfekt för större butiker.

När du har justerat dessa inställningar klickar du på ‘Spara ändringar’ för att lagra din konfiguration.

WPFilters kommer sedan att uppdatera förhandsgranskningen i realtid inuti den här byggaren.

Om något inte ser helt rätt ut kan du gå tillbaka och justera inställningarna tills det är perfekt.

Steg 4: Bädda in filtret i din butik

Nu när ditt filter är klart är det dags att lägga till det i din webbutik. WPFilters ger dig flexibla alternativ för var du vill visa dina filter.

Du kan lägga till filter direkt på din butikssida där kunder bläddrar bland produkter, eller placera dem i din sidofält för enkel åtkomst på vilken sida som helst.

Låt mig visa dig båda metoderna så att du kan välja den som fungerar bäst för din butik.

Alternativ 1: Visa produktattributfilter på WooCommerce-butikssidan

Om du använder ett Blocktema (som Divi eller Twenty Twenty-Five) kan du helt enkelt öppna din butikssida i webbplatsredigeraren och dra Filterblocket på plats.

Först, i WPFilters visuella byggare, klickar du på knappen ‘ Bädda in ’.

Välj sedan metoden Gutenberg Block från de tillgängliga alternativen.

Därefter väljer du om du vill skapa en ny sida eller välja en befintlig.

Om du redan har en butikssida inställd, välj den helt enkelt från rullgardinsmenyn.

Klicka på ‘Let’s Go!’

Den visuella byggaren öppnar sedan din butikssida i blockredigeraren.

Klicka sedan helt enkelt på ikonen '+' för att lägga till ett WPFilters Element-block.

Från inställningspanelen för blocket, välj det filterelement du just skapade.

Du kommer att se det visas direkt i din innehållsredigerare.

Du kan upprepa denna process för alla WPFilters-element du har skapat.

När du är klar, klicka på ‘Spara ändringar’ eller ‘Uppdatera’ för att publicera ditt filter.

Det är allt – ditt WPFilters produktfilter är nu live på din butikssida och redo för kunder att använda:

Alternativ 2:  Visa produktattributfilter i sidofältet

Att lägga till filter i ditt sidofält är ett annat bra alternativ, särskilt om du vill att de ska vara synliga på flera sidor. Sidofältet håller dina filter tillgängliga utan att ta upp plats i ditt huvudsakliga innehållsområde.

För att lägga till ett filter i ditt sidofält, navigera till Utseende » Widgets i ditt adminområde. Detta öppnar widgetanpassaren, där du kan hantera ditt sidofältsinnehåll.

Härifrån kan du leta efter WooCommerce sidofält i listan över tillgängliga widgetområden. Klicka på det för att expandera sidofältet och se vilka widgets som finns där för närvarande.

Klicka sedan på plusikonen för att lägga till en ny widget, och lägg sedan till WPFilters Element-widgeten.

I panelen Elementinställningar som visas, välj ditt filter från rullgardinsmenyn.

Du kan lägga till flera filterwidgets för att ge kunderna flera filtreringsalternativ.

När du har valt ditt filter, klicka på ‘Uppdatera’ eller ‘Publicera’ för att spara dina sidofältsändringar.

Ditt filter kommer nu att visas på alla WooCommerce-sidor som visar den här sidopanelen:

Steg 5: Testa ditt WooCommerce-produktfilter

Innan du är klar, ta några minuter att testa dina filter. Öppna din butik i ett inkognitofönster så att du ser den på samma sätt som dina kunder gör.

Prova olika filterkombinationer för att säkerställa att resultaten uppdateras korrekt. Välj till exempel 'Grön' och kontrollera att endast matchande produkter visas.

Det är också en bra idé att testa varje attribut du har lagt till för att säkerställa att filtreringslogiken fungerar smidigt. Var också uppmärksam på produktantalet bredvid varje alternativ. De bör ändras när du tillämpar eller tar bort filter.

Om något ser konstigt ut, dubbelkolla dina produktegenskaper i WooCommerce. När allt fungerar smidigt är dina filter klara, och shoppingen i din butik har just blivit mycket enklare.

Metod 2: Lägg till ett enkelt WooCommerce-produktfilter (gratis metod)

Om du letar efter ett enklare alternativ till WPFilters, är Filter Everything ett bra alternativ. Jag valde detta plugin eftersom det är lättviktigt och erbjuder en gratisversion med alla viktiga filtreringsfunktioner.

Observera att Filter Everything fungerar och ser bättre ut på klassiska teman. Det stöder inte block, så du måste använda en kortkod, vilket vanligtvis är mindre flexibelt.

Steg 1: Installera och konfigurera plugin-programmet

Gå först till Plugins » Lägg till plugin i ditt WordPress adminområde.

På nästa skärm använder du sökfältet för att snabbt hitta pluginet Filter Everything.

Klicka sedan på 'Installera nu' och 'Aktivera' i sökresultaten för att slutföra processen.

För hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering, navigera till Filter Everything » Inställningar för att konfigurera några viktiga alternativ. Dessa inställningar styr hur dina filter beter sig på din butiks framsida.

Först kan du konfigurera mobilbeteendet och AJAX-inställningarna:

• Mobila enheter – Välj om filter ska vara kollapsade på mobilen eller visas som på datorn. Jag rekommenderar att hålla dem kollapsade och flytta dem till toppen, så att de är lättare att hitta och inte tar upp för mycket plats på mindre skärmar.
• AJAX – Välj om filter uppdaterar resultat omedelbart eller laddar om sidan efter varje val. Du vill aktivera detta så att produkter uppdateras omedelbart utan att hela sidan laddas om, vilket skapar en snabbare shoppingupplevelse.

Du kommer också att se 'HTML ID eller klass för inläggsbehållaren.' Detta talar om för plugin-programmet vilken del av sidan som ska uppdateras när filter tillämpas. Det är inställt på #primary som standard, och i de flesta fall kan du säkert lämna det som det är.

Slutligen, gå till avsnittet 'Övrigt' för att finjustera några visuella och avancerade alternativ:

• Widget Primärfärg – Det påverkar filterknappar och kryssrutor, så välj en färg som matchar ditt varumärkes färgschema.
• Filterbehållarens maxhöjd, px – Ställer in en maximal höjd för filterområdet. Om listan blir för lång blir den scrollbar istället för att trycka ner sidan.
• Integration av valda filter (chips) – Låter dig visa aktiva filter som små "chips". Du kan välja var de ska visas genom att lägga till ett platsnamn, till exempel before_main_content.
• Felsökningsläge – Visar hjälpsamma meddelanden om något inte fungerar, vilket kan vara användbart när du ställer in saker.

Så här ser det ut på min skärm:

När du har justerat dessa inställningar klickar du på ‘Spara ändringar’ för att lagra din konfiguration.

Steg 2: Skapa en filteruppsättning

Nu är det dags att skapa en filteruppsättning, vilket helt enkelt är en grupp av flera filter som fungerar tillsammans. Du kan till exempel ha filter för kategorier, färger och storlekar i en enda uppsättning.

Gå till Filter Everything » Filter Sets i din WordPress-instrumentpanel. Det är här du organiserar och hanterar alla dina produktfilter.

Detta tar dig till filteruppsättningsbyggaren.

Klicka på knappen ‘Lägg till ny filteruppsättning’ för att börja bygga din första uppsättning.

Därefter kan du ge den ett beskrivande namn.

Detta är endast för din referens, men jag rekommenderar att du använder ett beskrivande namn, som “Produktfilter” eller helt enkelt “Filter”, för enklare organisation.

Välj sedan den inläggstyp du vill filtrera – sidor, inlägg, produkter eller anpassade inläggstyper.

Eftersom du arbetar med WooCommerce-produkter, välj ‘Produkt’ från rullgardinsmenyn och klicka på ‘Lägg till filter’.

Nu kommer du att ställa in ditt första individuella filter inom denna uppsättning:

• Filtrera efter – välj ‘Produktkategorier’ från rullgardinsmenyn. Detta talar om för plugin-programmet att filtrera dina produkter baserat på deras tilldelade kategorier.
• Filtertitel – Använd något som Kategorier eller Produktkategorier, vad som passar din butik bäst.
• Variabelnamn för URL – detta fält fylls i automatiskt med något som categories. Det hjälper till att skapa rena, SEO-vänliga URL:er när kunderna använder dina filter.
• Visa i widget – en rullgardinsmeny fungerar bra för kategorier eftersom produkter kan tillhöra många kategorier, och det gör också underkategorier lättare att upptäcka.

Du kan lägga till fler filter i denna uppsättning genom att klicka på ‘Lägg till filter’ igen. Jag rekommenderar att lägga till filter för pris, färg, storlek eller andra produktattribut som din butik använder.

När du har lagt till alla filter du behöver, klicka på ‘Publicera’ för att göra din filteruppsättning aktiv.

Steg 3: Lägg till filter i din WooCommerce-butik

Med din filteruppsättning skapad är du redo att visa den i din WooCommerce-butik. Filter Everything ger dig flexibla alternativ för var du kan placera dina filter.

Låt mig visa dig hur du lägger till filter direkt i din sidofält för enkel åtkomst, eller i innehållet på din butikssida med hjälp av Gutenberg-block.

Alternativ 1: Visa enkelt produktfilter i sidofältet

Att lägga till filter i din sidopanel är snabbt och fungerar utmärkt om du vill att de ska vara synliga på flera WooCommerce-sidor. Sidopanelen håller dina filter tillgängliga utan att ta upp värdefullt innehållsutrymme.

Navigera till Utseende » Widgetar i din WordPress-instrumentpanel. Detta öppnar widget-anpassaren där du hanterar allt ditt sidopanelsinnehåll.

I widgetpanelen, sök efter ditt WooCommerce-sidopanelsområde.

Klicka sedan på '+' -knappen för att lägga till widgeten Filter Everything – Filter.

Widgetinställningarna öppnas automatiskt. Sedan kan du välja vad som ska visas:

• Titel – Visar filtertiteln högst upp i widgeten.
• Antal inlägg som hittats – Visar hur många produkter som matchar de valda filtren.
• Valda termer (Chips) – Visar de aktiva filtren som små chips, så att kunderna kan se vad som är tillämpat med en blick.
• Horisontellt layout – Visar filtren i en rad istället för en kolumn, vilket fungerar bra för kompakta layouter.

Här är vad du kommer att se på skärmen:

Du kan experimentera med dessa inställningar för att passa din butiksdesign.

När du är klar, klicka på 'Uppdatera' för att publicera din widget.

Det var allt!

Dina filter kommer nu att visas i sidopanelen på alla sidor som visar detta sidopanelsområde.

Alternativ 2: Visa enkel produktfilter på WooCommerce-butikssidan

För att lägga till filter direkt på din butikssida använder du kortkoden [fe_widget] kortkod inuti Gutenberg-redigeraren.

Om du har mer än 1 produktuppsättning måste du dock lägga till dess ID i den kortkoden, till exempel [fe_widget id="123"]. Du hittar detta ID-nummer bredvid namnet på din uppsättning på sidan Filter Everything » Filter Sets.

För att lägga till ditt produktfilter, navigera till Sidor » Alla sidor för att öppna din butikssida i blockredigeraren.

I Gutenberg-redigeraren, klistra in kortkoden du kopierade tidigare i ett vanligt styckesblock.

Om du vill se hur det ser ut kan du helt enkelt förhandsgranska din sida. De bör visas exakt där du placerade kortkodsblocket.

När du är nöjd med placeringen klickar du på 'Uppdatera' eller 'Publicera' för att spara dina ändringar.

Dina produktfilter är nu live på din butikssida:

Bonustips: Lägg till smart WooCommerce-produkt sökning

Nu när du har lagt till produktfilter finns det ytterligare en funktion som kan ta din webbutiks navigering till nästa nivå: smart produktsökning.

Medan filter hjälper kunder att bläddra efter specifika attribut, låter en smart produktsökningsfält dem skriva exakt vad de letar efter. Denna kombination ger shoppare flexibiliteten att hitta produkter hur de än föredrar.

Smart WooCommerce-produktsökning går utöver WordPress grundläggande sökning. Den förstår produktattribut, kategorier, SKU:er och till och med partiella matchningar för att snabbt visa relevanta resultat.

Om någon till exempel söker efter ”blå sneakers” kommer en smart sökning att visa alla blåfärgade skor i din sneakerkategori. En vanlig WordPress-sökning kan missa produkter om den exakta frasen inte finns i titeln.

Att lägga till både filter och smart sökning innebär att du täcker alla dina baser. Dina kunder kan handla hur de känner sig bekväma, vilket innebär fler slutförda köp för dig.

För att ställa in detta, kolla in vår detaljerade guide om hur man gör en smart WooCommerce-produktsökning. Den guidar dig genom hela processen steg för steg.

Vanliga frågor om att ställa in WooCommerce-produktfilter

Om du fortfarande har frågor om att använda produktfilter i WooCommerce, bör dessa snabba svar hjälpa.

Finns det ett pålitligt och SNABBT plugin för produktfiltrering?

Ja, WPFilters är ett av de mest pålitliga och snabbaste plugins för WooCommerce produktfiltrering. Det är byggt specifikt för hastighet och använder AJAX-teknik för att uppdatera resultat utan att ladda om sidan, vilket håller din butik igång smidigt.

Bästa gratis produktfilter för WooCommerce?

Gratisversionen av Filter Everything är ett bra alternativ. Den stöder grundläggande filter som kategorier, priser och attribut utan att sakta ner din webbplats. Den enda nackdelen är att den fungerar bäst på klassiska teman.

Hur filtrerar man WooCommerce-produkter efter anpassade attribut?

Först måste du skapa dina attribut under Produkter » Attribut och tilldela dem till dina produkter. Använd sedan ett WooCommerce-filterplugin som WPFilters för att visa dessa attribut som filter på din butikssida.

Hur skapar man en WooCommerce-butikssida med flera filter?

Du kan lägga till flera filterwidgets i din butiks sidofält, eller använda ett produktfilterplugin som låter dig kombinera filter som pris, kategori, betyg och attribut i en panel.

Vad är produktfilterkoden i WooCommerce?

WooCommerce inkluderar inte en enda kortkod för avancerade filter. De flesta filtreringsfunktioner kommer från widgets eller plugins, som genererar sina egna kortkoder eller block som du kan placera var som helst på din webbplats.

Nästa steg för att slutföra din WooCommerce-butiksinställning

Nu när dina WooCommerce-produktfilter är inställda kan du vilja titta på dessa relaterade guider för att förbättra din WooCommerce-butik ytterligare:

• Ultimata WooCommerce SEO-guiden
• Hur man anpassar WooCommerce-produktsidor
• Hur man säljer produktpaket i WooCommerce
• Hur man enkelt skapar enkäter efter köp i WooCommerce
• Bästa produktgallerier för WooCommerce

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.