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
• Hur man filtrerar WooCommerce-produkter efter anpassat attribut
• Bonustips för att öka WooCommerce-försäljningen

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'.

Därefter kan du välja parametrarna för filtret från rullgardinsmenyn 'Filtrera för'. Tänk på att gratisversionen av pluginet endast erbjuder filter för produktkategorier och taggar.

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. För den här handledningen kommer vi att välja detta alternativ.

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å automatiskt lägga till nofollow-attributet till alla filtrerade ankare genom att aktivera omkopplaren ‘Lägg till “nofollow” till filterankare’. Detta kommer att tala om för sökmotorer att inte använda filterankarna vid rangordning av din sida.

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

Lägg till WooCommerce-filtret på produktsidan

För att lägga till de filter du just har skapat på din WooCommerce-produktsida måste du växla till fliken ‘Filterförinstä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-produktsida i blockredigeraren från WordPress-instrumentpanelen.

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 WooCommerce-produkter efter anpassat attribut

Om du vill skapa ett WooCommerce-produktfilter med anpassade attribut, då är den här metoden för dig.

Skapa ett anpassat attribut

För att skapa ett anpassat 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 den anpassade 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’.

Öppna sedan helt enkelt rullgardinsmenyn 'Anpassad produktegenskap' och välj den anpassade egenskap du just skapade.

Klicka nu 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 för att öka WooCommerce-försäljningen

Förutom att lägga till sökfilter, är ett annat sätt att öka konverteringar i din onlinebutik att förbättra din webbplats hastighet.

En WooCommerce-butik som laddas snabbare kan behålla kunder enkelt och generera fler leads.

För att förbättra din butiks laddningstid rekommenderar vi att du byter till SiteGround. De är en WooCommerce-rekommenderad hostingleverantör som gör din webbplats supersnabb och kommer med fantastiska funktioner som Ultrafast PHP, e-handels-caching och mer.

Ett annat tips är att ställa in cachning i din WooCommerce-butik.

Det är en teknik som lagrar din webbplatsdata på en temporär plats för att förbättra prestandan. Du kan använda någon av de bästa WooCommerce-cache-plugins för att förbättra hastigheten.

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.

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.