Hur man filtrerar WooCommerce-produkter (steg-för-steg-handledning)

Efter att ha arbetat med otaliga WooCommerce-webbplatsägare har vi lärt oss att framgångsrika onlinebutiker delar en viktig egenskap: de gör det enkelt för kunder att hitta exakt vad de vill ha.

Stora marknadsplatser som Amazon använder filter för pris, färg, storlek och sortering efter nya ankomster eftersom de förstår hur kunderna handlar.

Produktfiltrering är avgörande för att växa en e-handelsverksamhet. När kunder inte snabbt kan hitta vad de letar efter, lämnar de ofta utan att köpa.

Därför har vi skapat den här steg-för-steg-guiden för att hjälpa dig att lägga till effektiv produktfiltrering i din WooCommerce-butik.

Du kommer att lära dig hur du skapar attributbaserade filter som gör din butik enklare att navigera och roligare för shoppare.

Varför filtrera WooCommerce-produkter efter attribut?

Filter gör det superenkelt för kunder att bläddra bland produkter i din WooCommerce-butik.

De gör det möjligt för shoppare att begränsa sin sökning baserat på olika attribut, inklusive färg, prisintervall, tyg, storlek och mer.

Istället för att skrolla igenom hela din produktsamling kan användare helt enkelt bläddra bland de produkter de är intresserade av.

Att lägga till filter kan hjälpa till att förbättra användarupplevelsen, förbättra sökfunktionaliteten och minska avvisningsfrekvensen i din webbutik.

De kan också öka försäljningen genom att låta kunderna se alla tillgängliga alternativ för de produkter de är intresserade av, vilket hjälper dem att göra mer informerade köp.

Med det sagt, låt oss se hur du enkelt kan filtrera produkter i din WooCommerce-butik. Vi visar dig hur du filtrerar WooCommerce-produkter efter attribut och anpassade attribut:

Hur man filtrerar WooCommerce-produkter efter attribut

Om du letar efter ett snabbt och enkelt sätt att filtrera WooCommerce-produkter, då är den här metoden för dig. Vi kommer att visa dig hur du ställer in ett enkelt filter med attributinställningar med hjälp av ett WooCommerce-produktfilterplugin.

Först måste du installera och aktivera pluginet YITH WooCommerce Ajax Product Filter. För fler instruktioner, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till sidan YITH » Ajax Product Filter från WordPress-instrumentpanelen.

Härifrån klickar du på knappen '+ Skapa en ny förinställning' för att börja skapa en filterförinställning.

När du är där kan du börja med att skriva ett namn för filtret i rutan ‘Preset name’.

Tänk på att förinställningsnamnet inte kommer att visas i din butik och finns endast där för din referens.

Välj sedan helt enkelt ‘Horisontell’ som förinställd layout och klicka sedan på knappen ‘+ Lägg till ett nytt filter’ längst ner.

Om du använder gratisversionen av pluginet kommer detta alternativ inte att vara tillgängligt för dig. Istället kommer du att ha layouten ‘Default’ förinställning.

Du kan nu börja skapa ett filter för dina WooCommerce-produkter.

Skapa ett filter för WooCommerce-produkter

Först måste du skriva ett filter namn bredvid alternativet ‘Filter namn’.

Om du till exempel skapar ett filter som hjälper kunder att sortera produkter efter kategorier, kan du namnge det 'Filtrera efter kategori'.

Välj sedan parametrarna för filtret från rullgardinsmenyn 'Filter för'.

För att lära dig mer om skillnaderna mellan dessa alternativ kan du läsa vår guide om hur man lägger till etiketter, attribut och kategorier till WooCommerce.

Om du skapar ett filter för att sortera produkter efter olika prisintervall måste du välja alternativet ‘Prisintervall’. På samma sätt, om du vill sortera produkter efter popularitet eller genomsnittligt betyg, måste du välja alternativet ‘Sortera efter’.

Du kan också välja alternativet 'Taxonomi' om du vill filtrera produktetiketter, kategorier, färger, storlekar, material, stilar och mer.

Även om saker som färg och storlek är attribut, lagrar WordPress dem tekniskt sett som taxonomier, så du hittar dem under detta alternativ. För den här handledningen kommer vi att välja alternativet 'Taxonomi'.

När du har gjort det måste du välja från taxonomi-alternativen för filtret. Om du till exempel vill filtrera produkter efter färg, måste du välja det alternativet från rullgardinsmenyn.

Eftersom vi skapar ett filter för produktkategorier, kommer vi att välja alternativet 'Produktkategorier'.

Skriv sedan in alla produktkategorier på din webbplats i avsnittet ‘Choose terms’.

Därefter kan du välja hur du vill att filtret ska visas på din butiks framsida från rullgardinsmenyn 'Filtertyp'.

Du kan visa filtret som en kryssruta, rullgardinsmeny, text, färgväljare och mer. För den här handledningen väljer vi alternativet ‘Välj’ för att lägga till en rullgardinsmeny.

Därefter, växla omkopplaren 'Visa sökfält' om du vill aktivera en sökruta i rullgardinsmenyn.

Du kan också visa filtret du skapar som en växlingsknapp genom att aktivera omkopplaren 'Visa som växlingsknapp'. Då kan kunderna slå på och av filtret.

När du har gjort det, väljer du bara en standardordning för de filtrerade termerna från rullgardinsmenyn 'Sortera efter'. Filterkategorierna kommer att visas i den ordning du väljer.

Du kan sortera filterkategorierna med namn, antal termer eller slug. Du kan också välja 'Ordningstyp' för de filtrerade termerna i stigande (ASC) eller fallande (DESC) ordning.

Slutligen klickar du på knappen 'Spara filter' längst ner för att spara ditt filter.

Upprepa nu processen för att skapa flera filter.

När du har gjort det, gå tillbaka till toppen och byt till fliken 'Allmänna inställningar' för att konfigurera några inställningar.

Konfigurera allmänna inställningar

Här måste du börja med att välja ett alternativ för 'Filterläge'. Du kan välja om du vill tillämpa filter i realtid med hjälp av AJAX eller om du vill visa en knapp 'Tillämpa filter' på din webbplats.

Därefter måste du också välja mellan att visa en spara-knapp eller att visa filterresultaten omedelbart.

När du har gjort det väljer du om du vill visa filterresultaten på samma sida med AJAX eller om du vill ladda om resultaten på en ny sida.

Bläddra sedan ner till alternativet ‘Hide empty terms’ och slå på omkopplaren om du inte vill visa filtertermer som är tomma.

Till exempel, om du har lagt till en kategori 'Muggar' i din WooCommerce-butik, men den för närvarande inte innehåller några produkter, kommer den inte att visas i listan 'Filtrera efter kategori'.

Därefter kan du aktivera reglaget 'Dölj produkter som inte finns i lager' om du inte vill visa produkter som inte finns i lager i resultaten.

Du kan lämna de andra inställningarna som standard eller konfigurera dem efter eget tycke.

Efter att ha gjort dina val, klicka på knappen ‘Spara alternativ’ för att lagra dina ändringar och växla till fliken ‘Anpassning’ högst upp.

Konfigurera anpassningsinställningarna (endast premium-plugin)

Notera: Fliken 'Anpassning' är inte tillgänglig om du använder gratisversionen av pluginet.

Härifrån kan du välja färgen på din WooCommerce-filters etikettstil, färgen på texttermen, storleken på färgvärdet, färgen på filterområdet och mer.

Att lägga till färger kan hjälpa ditt WooCommerce-filter att se mer estetiskt tilltalande ut och matcha ditt e-handelsbutiks varumärke.

När du har gjort dina val, klicka på knappen 'Spara alternativ' och byt till fliken 'SEO' högst upp.

Konfigurera SEO-inställningarna

När du är där, växla omkopplaren ‘Aktivera SEO-alternativ’ för att aktivera inställningarna.

Nu kan du lägga till metataggar från rullgardinsmenyn att använda på dina filtrerade sidor. Detta kommer att förbättra din webbplats SEO.

För mer information kan du läsa vår artikel om WordPress metadata och metataggar.

Du kan också växla omkopplaren för att lägga till attributet 'nofollow' till dina filterlänkar. Detta lägger till en speciell tagg som talar om för sökmotorer att inte följa dessa specifika länkar.

Vi rekommenderar att du aktiverar detta. Det förhindrar Google från att slösa tid på att genomsöka hundratals temporära filtersidor så att de kan fokusera på att rangordna dina faktiska produktsidor istället.

När du är nöjd klickar du på knappen 'Spara alternativ' för att lagra inställningarna.

Lägg till WooCommerce-filtret på butikssidan

För att lägga till de filter du just har skapat på din huvudsakliga WooCommerce-butikssida, behöver du växla till fliken 'Filterinställningar' högst upp.

När du är där, kopiera helt enkelt kortkoden för filterförinställningen som du just skapade.

Öppna sedan helt enkelt din WooCommerce-butikssida i blockredigeraren från WordPress-instrumentpanelen. Detta är vanligtvis sidan med titeln 'Butik' där alla dina produkter listas.

När du är där, klicka på knappen Lägg till block '(+)' i det övre vänstra hörnet för att hitta Shortcode-blocket.

Klistra nu helt enkelt in kortkodspresettet för filtret som du kopierade i Shortcode-blocket.

Klicka slutligen på knappen ‘Publicera’ eller ‘Uppdatera’ för att spara dina ändringar.

Du kan nu besöka din WordPress-webbplats för att se WooCommerce anpassade attributfilter i aktion.

Hur man filtrerar efter ett nytt globalt attribut

Om du behöver filtrera produkter efter specifika detaljer som 'Material' eller 'Märke', bör du använda ett globalt attribut.

Ett globalt attribut skapas i din huvudsakliga WordPress-instrumentpanel och kan tilldelas många olika produkter. Detta kopplar ihop dem så att kunderna kan filtrera efter den specifika termen.

Detta skiljer sig från ett lokalt 'anpassat produktattribut' som skapas direkt på en enskild produktsida och inte enkelt kan användas för filtrering.

Skapa ett globalt attribut

För att skapa ett globalt attribut måste du besöka sidan Produkter » Attribut från WordPress-instrumentpanelen.

När du är där, börja med att ange ett namn och en slug för det anpassade taxonomiattributet.

Om du till exempel vill skapa ett filter för ett specifikt produktmaterial kan du namnge attributet ‘Filtrera efter material’.

Sedan måste du markera rutan ‘Aktivera arkiv’ om du vill visa alla objekt som delar det attributet på en enda sida. 

Klicka sedan på knappen ‘Lägg till attribut’ längst ner.

När attributet har skapats, klicka på länken 'Konfigurera termer' för att lägga till termer till attributet.

Detta leder dig till en ny skärm där du måste skriva in en term i rutan 'Namn'.

Om du till exempel skapade ett attribut som heter 'Filtrera efter material', kan du lägga till de enskilda materialen som termer, till exempel ull. Du kan lägga till så många termer du vill till ett attribut.

När du är klar, klicka på knappen ‘Lägg till nytt filter efter Material’ för att spara termen.

Lägg till det globala attributet till en produkt

Efter att ha skapat ett attribut måste du lägga till det i enskilda WooCommerce-produkter.

För detta, öppna produktsidan du vill redigera. Härifrån, scrolla ner till avsnittet ‘Produktdata’ och växla till fliken ‘Attribut’.

Klicka sedan på rullgardinsmenyn. Istället för att välja 'Anpassat produktattribut', bör du leta efter namnet på det globala attribut du just skapade (t.ex. 'Filtrera efter material').

Välj det från listan och klicka sedan på knappen 'Lägg till'.

Nu när det anpassade attributet har lagts till, sök helt enkelt efter termen som matchar produkten i alternativet 'Välj termer'.

Om du till exempel har skapat ett attribut för material och produkten du redigerar är gjord av ull, måste du välja ‘Ull’ från rullgardinsmenyn.

När du är klar klickar du på knappen 'Spara attribut'.

Klicka sedan på knappen ‘Uppdatera’ eller ‘Publicera’ högst upp för att spara dina ändringar.

Du måste nu upprepa processen för alla produkter som delar samma attribut.

Skapa ett anpassat attributfilter med ett plugin

Installera och aktivera sedan pluginet YITH WooCommerce Ajax Product Filter. För mer instruktioner, se vår guide om hur man installerar ett WordPress-plugin.

Notera: Du kan använda den kostnadsfria eller premiumversionen av pluginet för att skapa ett anpassat attributfilter för WooCommerce.

Efter aktivering, gå till sidan YITH » Ajax Product Filter från WordPress-instrumentpanelen.

Härifrån klickar du på knappen '+ Skapa en ny förinställning'.

Därefter måste du skriva ett namn för förinställningen du skapar i rutan 'Förinställningsnamn'.

När du är klar klickar du på knappen ‘+ Lägg till ett nytt filter’ längst ner för att börja skapa ett WooCommerce anpassat attributfilter.

Först måste du skriva ett namn i rutan 'Filter namn'.

Om du till exempel skapar ett filter som hjälper kunder att sortera olika materialalternativ, kan du namnge det 'Filtrera efter material'.

Välj sedan helt enkelt 'Taxonomi' från rullgardinsmenyn 'Filtrera för'. Om du använder gratisversionen av pluginet kommer detta alternativ att vara valt åt dig som standard.

Nu kommer det anpassade attributet som du skapade redan att vara tillgängligt i rullgardinsmenyn bredvid alternativet 'Välj taxonomi'.

Välj den anpassade attributet från rullgardinslistan och skriv in attributtermerna i rutan ‘Choose terms’.

Välj sedan hur du vill att filtret ska visas på din butiks framsida från rullgardinsmenyn ‘Filtertyp’.

Filtret kan visas som en kryssruta, rullgardinsmeny, text, färgvärden och mer.

När du har gjort det, välj en standardordning för de filtrerade termerna från rullgardinsmenyn ‘Sortera efter’.

Du kan sortera filterkategorierna med namn, termantal eller slug. Du kan också välja 'Sorteringstyp' för de filtrerade termerna i stigande (ASC) eller fallande (DESC) ordning.

Klicka slutligen på knappen ‘Spara filter’ längst ner för att spara ditt anpassade attributfilter.

Byt sedan till fliken 'Allmänna inställningar' högst upp. Härifrån kan du välja ett filterläge, dölja tomma termer och konfigurera andra inställningar enligt dina behov.

När du är klar klickar du på knappen ‘Save options’ för att spara dina ändringar och växlar till fliken ‘Customization’ högst upp.

Notera: Om du använder gratisversionen kommer dessa anpassningsinställningar inte att vara tillgängliga.

Härifrån kan du anpassa hur din filterinställning kommer att se ut på din webbplats framsida.

Till exempel kan du välja färgen på etikettstilen, färgen på texttermen, storleken på färgvärdet, färgen på filterområdet och mer.

När du har gjort dina val klickar du på knappen ‘Save Options’ och växlar till fliken ‘SEO’ högst upp.

Härifrån växlar du omkopplaren 'Aktivera SEO-alternativ' för att aktivera inställningarna.

Du kan lägga till robot-metataggar från rullgardinsmenyn att använda på dina filtrerade sidor. Detta kommer att optimera din webbplats SEO.

Du kan också växla omkopplaren ‘Lägg till “nofollow” till filterankare’ för att automatiskt lägga till nofollow-attributet till alla filterankare.

När du är nöjd, klicka på knappen 'Spara alternativ' för att lagra inställningarna.

Lägg till anpassat attributfilter på en WooCommerce-produktsida

För att lägga till anpassade attributfilter till en WooCommerce-butikssida måste du växla till fliken ‘Filterinställningar’ högst upp.

Härifrån, kopiera kortkoden för det anpassade attributfiltret.

Öppna sedan din produktsida i blockredigeraren från sidofältet i WordPress-administrationen.

Klicka här på knappen Lägg till block ‘(+)’ i det övre vänstra hörnet för att dra och släppa kortkodsblocket.

Därefter klistrar du helt enkelt in den filterförinställningskod som du kopierade i blocket.

Klicka slutligen på knappen ‘Publicera’ eller ‘Uppdatera’ för att spara dina ändringar.

Du kan nu besöka din webbplats för att se WooCommerce anpassade attributfilter i aktion.

Bonustips: Se till att dina filter laddas omedelbart

Att lägga till filter är ett utmärkt sätt att förbättra användarupplevelsen, men de måste vara snabba. Om en kund klickar på ett filter och måste vänta evigheter på att produkterna ska uppdateras, kommer de troligen att lämna din butik.

Eftersom produktfilter bygger på komplexa databasfrågor spelar din webbhotell en enorm roll för hur snabbt de fungerar. Här är några sätt att hålla din butik igång smidigt.

Uppgradera till högpresterande hosting

För att säkerställa att dina AJAX-filter laddas omedelbart rekommenderar vi att du byter till SiteGround.

De är en WooCommerce-rekommenderad hostingleverantör som erbjuder Ultrafast PHP. Denna teknik snabbar upp databasfrågorna som krävs för att filtrera produkter, vilket gör att din butik känns mycket snabbare.

För mer detaljer om varför prestanda spelar roll, se vår fallstudie om varför vi bytte till SiteGround.

Använd avancerad cachning

Konfigurering av avancerad cachning rekommenderas för att säkerställa att din webbplats laddas omedelbart. Detta behåller en färdig version av filtrerade produktresultat, så att din server undviker att köra kostsamma databasfrågor varje gång någon ändrar ett filter.

Du kan använda någon av de bästa WooCommerce-cachningsplugins för att förbättra hastigheten. Se dock till att du konfigurerar pluginet för att exkludera de specifika filterresultatsidorna så att kunderna alltid ser uppdaterade lagersaldon.

Utöver det kan du också försöka optimera dina produktbilder, välja ett snabbare WooCommerce-tema, använda den senaste PHP-versionen, aktivera en brandvägg på DNS-nivå och mycket mer för att förbättra kundupplevelsen.

För detaljerade instruktioner, se vår nybörjarguide om hur man snabbar upp WooCommerce-prestanda.

Vanliga frågor om WooCommerce produktfilter

Här är några frågor som våra läsare ofta har ställt om att lägga till produktfilter i WooCommerce:

Hur använder jag ett WooCommerce-produktfilter?

Du kan lägga till grundläggande filter med det inbyggda blocket 'Filtrera produkter efter attribut' i WordPress-redigeraren. För en professionell upplevelse där sidan uppdateras omedelbart utan att laddas om, rekommenderar vi dock att du använder ett plugin som YITH WooCommerce Ajax Product Filter.

Hur filtrerar jag WooCommerce-produkter efter anpassat attribut?

För att filtrera efter ett anpassat attribut måste du först skapa ett globalt attribut under Produkter » Attribut och tilldela det till dina artiklar. När det är tilldelat kan du använda en filterwidget eller ett plugin för att låta kunderna sortera dina produkter efter den specifika termen (som material eller märke).

Hur sorterar man produkter i WooCommerce?

WooCommerce inkluderar en standard sorteringsnedrullningsmeny på butikssidan som låter kunderna sortera efter pris eller popularitet. Som butiksägare kan du ändra standard sorteringsordning genom att gå till Utseende » Anpassa » WooCommerce » Produktkatalog.

Hur kategoriserar jag produkter i WooCommerce?

Du kan kategorisera produkter genom att navigera till Produkter » Kategorier för att skapa nya grupper (som Herr, Dam eller Accessoarer). När du redigerar en produkt, markera helt enkelt rutan för relevant kategori i sidofältet till höger för att tilldela den.

Hur skapar jag en produktsökning i WooCommerce?

Du kan skapa en sökfält genom att lägga till widgeten 'Produktsökning' i din webbplats sidofält eller headerområde. För en kraftfullare sökning som inkluderar kategorimatchning och stavningskorrigering, rekommenderar vi att använda ett specialiserat plugin som SearchWP.

Har WooCommerce orderhantering?

Ja, WooCommerce har ett inbyggt system för orderhantering som finns under WooCommerce » Ordrar. Från denna instrumentpanel kan du se kundinformation, uppdatera leveransstatus, behandla återbetalningar och hantera alla inkommande ordrar.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du filtrerar WooCommerce-produkter efter attribut och anpassat attribut. Du kanske också vill se vår artikel om hur du erbjuder en fraktrabatt i WooCommerce och våra toppval för bästa WooCommerce-teman.

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