Söker du ett alternativ till standarddesignen för WooCommerce-kategorisidor i ditt WordPress-tema? Genom att skapa en anpassad design för dina WooCommerce-produktkategorier kan du erbjuda en optimerad shoppingupplevelse, vilket kan ha en positiv effekt på din butiks resultat.

Med rätt plugin behöver det inte heller vara svårt att skapa en egen anpassad WooCommerce-kategorisidlayout. Det är vad vi kommer att visa dig i det här inlägget. Vi kommer att täcka hur du skapar en anpassad tabellbaserad layout för dina WooCommerce-kategorier. Detta ger dig kontroll över exakt vilken information som visas och hur kunderna interagerar med dina produkter.

Här är ett exempel på vad du kommer att bygga i det här inlägget:

Vi börjar med några av fördelarna med den här tabellmetoden. Sedan går vi in på en steg-för-steg-guide om hur du gör det i din egen WooCommerce-butik med insticksprogrammet WooCommerce Product Table.

Fördelarna med att använda en tabelllayout för dina kategorisidor

Den exakta utformningen av din e-handelsbutiks kategorisidlayout beror på ditt WordPress-tema, men de flesta teman har en sådan utformning av kategorisidorna:

Den här layouten passar bra i vissa situationer, men den begränsar antalet produkter som du kan visa. Den begränsar också hur mycket information du kan ge om varje produkt (men att lägga till knappar för snabbvisning av produkter är ett sätt att mildra detta).

Woo Multistore har skrivit om vikten av att utforma WooCommerce-kategorisidan på ett sätt som ökar konverteringarna. En tabelllayout hjälper dig att övervinna bristerna genom att visa fler produkter och information i en kompakt layout som i slutändan använder mindre utrymme, samt lägga till extra navigeringsfunktioner som sökning och filtrering.

Detta innebär att du kan få mer av dina produkter/produktdetaljer framför ögonen på kunderna, vilket gör att de kan se hela katalogen och ökar chansen att de gör ett köp.

Du kommer också att se SEO-fördelar hos sökmotorerna eftersom du kan visa mer anpassat innehåll på en helt anpassad sida (eller landningssidor också). På så sätt kan du visa produkter som är relevanta och lägga till kontextuell text. Allt detta bör belönas med högre rankning.

Som denna typ av layout kan gynna alla typer av e-handelsbutiker är den särskilt användbar för:

• Grossistbutiker
• Digitala filer (videoklipp, ljudfiler, e-böcker etc.)
• Restauranger
• Produktkataloger
• ….många fler!

Hur du skapar en anpassad WooCommerce kategorisidedesign med WooCommerce Product Table

En annan fördel med att använda en tabelllayout för din WooCommerce kategorisidedesign är att du kan ställa in allting utan att behöva någon speciell teknisk kunskap.

För att göra det här använder du pluginprogrammet WooCommerce Product Table. Detta plugin listar dina WooCommerce-produkter i en flexibel tabelllayout som du kontrollerar, tillsammans med möjligheten att lägga till filter, sökrutor, paginering med mera.

Du kan också använda pluginet för att endast visa produkter från specifika kategorier eller underkategorier. WooCommerce Product Table erbjuder två sätt att göra detta:

1. Du kan centralt aktivera produkttabelllayouten på alla produktkategorisidor. (Perfekt om du vill anpassa alla dina produktkategorisidor.)
2. Alternativt kan du använda en kortkod för att manuellt skapa dina egna WooCommerce-kategorisidor. (Till exempel om du vill använda tabellen för att lista produkter från specifika kategorier endast.)

Nedan visar vi hur du konfigurerar WooCommerce Product Table för att uppnå båda alternativen.

Konfigurera WooCommerce Product Table

När du har installerat och aktiverat insticksmodulen WooCommerce Product Table vill du konfigurera dess standardinställningar.

Detta låter dig styra vilken information som visas i din produkttabell och hur allting fungerar, t.ex. om vissa produktattribut ska visas eller inte eller hur funktionaliteten Lägg till i kundvagnen ska fungera.

För att komma igång går du till WooCommerce → Inställningar → Produkter → Produkttabeller för att komma åt kategoripluginets inställningar.

Det lönar sig att granska alla tillgängliga inställningar och välja de som passar din unika situation. Vi kommer dock bara att täcka grunderna som är viktiga för att utforma din WooCommerce-kategorisida.

Först hittar du inställningen Columns (kolumner) under avsnittet Table content (tabellinnehåll). Det är här du styr vilken information som visas i din tabell. Förutom att visa grundläggande produktinformation kan du också visa produktattribut, anpassade fält med mera.

Du hittar en fullständig lista över kolumnalternativ här, men den här konfigurationen är en bra grundversion som fungerar för de flesta butiker:

image, name, description, price, buy

Längre ner hittar du kolumnavsnittet Lägg till varukorg, där du kan styra knapparna för att lägga till varukorgen.

För att locka till sig bulkinköp kan du lägga till kryssrutor som gör det möjligt för kunderna att lägga till flera produkter i bulk i sina varukorgar. Du kan också bara lägga till en separat Lägg till-knappen för varje produkt (eller båda!):

När du är klar, se till att spara ändringarna.

När du har konfigurerat produktens inställningar har du två sätt att skapa dina egentliga WooCommerce-kategorier. Vi tittar på dessa härnäst.

2a. Aktivera produkttabeller på alla kategorisidor

WooCommerce Product Table har ett alternativ för att automatiskt lägga till produkttabelllayouten på alla kategorisidor. Detta är det enklaste alternativet och tar bara en sekund att ställa in.

På sidan för inställningar för insticksprogrammet kryssar du helt enkelt i rutan ”Product category archives” (arkiv för produktkategorier):

Detta kommer att globalt aktivera tabelllayouten för alla kategorier, vilket ersätter standardlayouten som följde med ditt tema.

Lär dig mer om den här metoden.

2b. Använd en kortkod för att skapa din egen design för WooCommerce-kategorisidan

Du kan också använda en kortkod för att lista WooCommerce-produkter per kategori. Det här alternativet är perfekt om du inte vill använda produkttabelllayouten på ALLA dina kategorier.

Simpelt lägga till insticksmodulets kortkod på en vanlig WordPress-sida och ange vilka kategorier du vill lista produkter från. Upprepa processen så många gånger du vill – en gång för varje kategori.

Med den här metoden skapar du i princip en ny WooCommerce produktkategorisida för varje produktkategori som du vill visa, i stället för att göra om WooCommerce-kategorisidan globalt.

Du kan antingen fortsätta att använda dina befintliga kategorisidor tillsammans med din nya tabelllayout. Eller så kan du bara ersätta länkarna till varje befintlig produktkategorisida med dina nya tabelldrivna kategorisidor. (Tips: Om du inte längre använder de inbyggda kategorisidorna omdirigerar du dem till de nya där du använder produkttabeller.)

För att komma igång går du till Sidor → Lägg till ny för att skapa en grundläggande WordPress-sida. Lägg sedan till kortkoden [product_table] till sidan. Du kan också lägga till en kategorititel med hjälp av det vanliga titelfältet.

Som standard kommer kortkoden att visa alla dina WooCommerce-produkter.

Hur som helst kan du använda parametern för kortkoden kategori för att filtrera bort produkter från specifika kategorier och/eller underkategorier. Du kan också kombinera flera kategorier eller skapa villkor som att en produkt måste finnas i flera kategorier eller underkategorier för att visas.

För att filtrera bort produkter från kategorin ”chair” kan du till exempel använda följande kortkod:

[product_table category="chair"]

Om du vill lägga till en kategoribild eller ett kategorinamn kan du också göra det ovanför kortkoden med hjälp av den vanliga WordPress-redigeraren.

När du publicerar sidan bör du se din nya design för WooCommerce-kategorisidan:

Om du vill skapa sidor för ytterligare WooCommerce-kategorier upprepar du processen för varje produktkategori eller underkategori som du vill visa.

WooCommerce Product Table

Ett lättanvänt plugin för att lista bokningar och möten från WooCommerce i en tabelllayout på framsidan.

Gör dina WooCommerce-kategorier mer sökbara med filter

Om du vill lägga till fler sök- och filterverktyg till dina WooCommerce-kategorier har du två alternativ:

1. Du kan lägga till sök-, sorteringsoch filteralternativ via WooCommerce Product Table-inställningar. Dessa visas ovanför eller under din produkttabell.
2. WooCommerce Product Table innehåller widgets som du kan använda för att lägga till filter i din sidebar.

Du kan välja den metod du föredrar, eller så går det också alldeles utmärkt att använda båda tillvägagångssätten samtidigt. Då kan dina köpare välja den metod de föredrar.

Om du vill lägga till sök-, sorteringsoch filteralternativ direkt i tabelllayouten går du till WooCommerce → Inställningar → Produkter → Produkttabeller. Bläddra sedan ner till avsnittet Tabellkontroller och konfigurera alternativen enligt dina önskemål:

Du kan läsa mer i den här hjälpartikeln.

För att använda filterwidgetarna kan du gå till Utseende → Widgets. Där hittar du fyra nya widgetar med prefixet ”Product Table:”. Du kan lägga till alla widgets eller bara välja de specifika filter som du vill inkludera:

Här är ett exempel på hur båda uppsättningarna filter kan se ut:

Hur man skapar en anpassad WooCommerce-kategorisidedesign med kod

Om du kan hantera PHP, HTML och CSS är det också möjligt att skapa en anpassad WooCommerce-kategorisidedesign med hjälp av kod, utan ett WooCommerce-plugin.

Du vill arbeta med filen archive-product.php i ditt tema eller barntema. Du kan också använda samma tillvägagångssätt för att redigera dina enskilda produktsidor via filen single-product eller andra delar av din butiksfasad.

Då du måste redigera koden direkt i temats mallfiler för att göra varje ändring, är den här metoden tyvärr inte tillgänglig för icke-utvecklare. Vi rekommenderar att du kontaktar Codeable om du behöver hjälp eller att du håller dig till den enklare tabelllayoutmetoden ovan.

Skapa din anpassade WooCommerce-kategorisidedesign idag!

Skapa en anpassad WooCommerce-kategorisidedesign så att du kan använda ett mer kundvänligt sätt att visa dina produkter.

Med hjälp av en tabellbaserad kategorisidelayout kan du visa fler produkter, tillsammans med mer information om varje produkt.

Du kan också lägga till många användbara sök- och filteralternativ för att hjälpa dina shoppare att hitta produkter.

Du kan sälja fler produkter och öka butikens intäkter genom att effektivare koppla ihop shoppare med de produkter som de är intresserade av.

För att använda en tabelldesign för dina WooCommerce-kategorier kan du använda insticksmodulen WooCommerce Product Table. Installationen är enkel, och du behöver inga särskilda tekniska kunskaper för att komma igång som om du ville redigera din arkivmallfil direkt.

WooCommerce Product Table

Ett lättanvänt insticksprogram för att lista WooCommerce-bokningar och -beställningar i en tabelllayout på framsidan.

Kom igång idag och skapa ett effektivare sätt för shoppare att bläddra bland produktkategorier i din WooCommerce-butik.