Har du någonsin velat skapa ett sorterbart och filtrerbart rutnät som innehåller hela eller delar av dina WooCommerce-produkter?

Om du driver en WooCommerce-butik vet du att WooCommerce redan har en dedikerad arkivsida som hjälper dig att visa upp enskilda produkter.

Men beroende på vad du säljer är det inte alltid det mest effektiva sättet att visa upp dina produkter.

I vissa fall är det effektivare att visa WooCommerce-produkter i ett nät.

Och om det låter som situationen du är i är du bra eftersom jag ska visa dig hur du skapar ett rutnät med dina WooCommerce-produkter.

Men om du aldrig har installerat WordPress, upptäck Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Tillbaka till varför vi är här.

Vad kan du göra med ett rutnät med WooCommerce-produkter?

Även om det inte är en fullständig lista, här är några situationer där ett produktnät kan ge besökarna en bättre upplevelse än din vanliga arkivsida:

Upptäck Så här installerar du en webbutik på WordPress med plug-in WooCommerce

• Partihandel - om du säljer många produkter, kan det vara mer användarvänligt att ge dina kunder ett enkelt sätt att sortera eller filtrera ett rutnät än att låta dem bläddra i enskilda produktsidor.
• Produktkataloger - på samma sätt, om du bara vill visa en produktkatalog som är lätt att bläddra i, sparar ett AJAX sorterings- / filternät kunderna tid (och sidan laddas om).
• Beställningsformulär - om du vill skapa ett beställningsformulär baserat på WooCommerce-produkter, ger ett rutnät ett mycket enkelt sätt att göra det. Det är också ett bra sätt att visa en restaurangmeny och acceptera onlinebeställningar.

Hur man skapar ett rutnät med WooCommerce-produkter

Vi använder pluginprogrammet WooCommerce produkttabell. Plugin är enskilt fokuserad på skapandet av produktnät. Och tack vare dess gränssnittsparametrar och kortkodkan du anpassa nästan alla aspekter av hur ditt nät fungerar.

Läs också vår guide om: Hur man ökar tiden på din WordPress-blogg

Här är några av de mest användbara funktionerna, enligt min mening:

• Lägg enkelt till eller ta bort kolumner Du kan till och med lägga till kolumner som innehåller anpassade fält eller anpassade taxonomier, och WooCommerce-produkttabellen integreras helt med avancerade anpassade fält.
• 4-filter widgets ingår. Dessa låter dig ge läsarna en sömlös upplevelse genom att erbjuda filtreringsalternativ i sidofältet.
• Produktvariation / attributstöd. Välj mellan tre olika sätt att visa produktvarianter i ditt nät.
• Flervalsrutor. Det underlättar skapandet av beställningsformulär genom att låta kunderna välja flera produkter innan de läggs till i sin kundvagn.
• Omedelbar sökning, sortering och filtrering . Kunder kan manipulera dina rutdata utan att ladda om sidan.
• Lägg i varukorgen . På samma sätt kan kunder lägga till produkter i sina korgar utan att ladda om sidan.
• Lazy Load support. Användbart för att förbättra prestanda för stora nät ( även om detta påverkar möjligheten att erbjuda omedelbar sortering eller filtrering )

Så här använder du detta plugin ...

1 Steg: Konfigurera standardnätfunktionen

När du har installerat och aktiverat plugin är det första du måste konfigurera standardfunktionen för dina rutnät. Kolla in vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.

Detta definierar i huvudsak standardbeteendet för kortkoden. Men du kan också ändra detta beteende för enskilda rutnät genom att lägga till parametrar till kortkoden.

Gå till plugininställningarna WooCommerce → Inställningar. Klicka sedan på fliken Produkter och välj alternativet Produktbord :

Konfigurera utseendet på dina nät

Först och främst kan du välja stil för ditt rutnät i avsnittet Bordsdesign. Du kan göra det med:

• Standard - som du kan föreställa dig använder detta alternativ plugin-standardinställningarna utan ytterligare ingripande från din sida. Han kommer att försöka använda din bloggs aktuella tema så mycket som möjligt.
• personnalisé : när den väljs utvidgar den en lista med stylingsalternativ som låter dig anpassa teckensnittsfärger och -storlekar utan behov av Anpassad CSS.

När du har konfigurerat din stil måste du konfigurera standardkoderna. Återigen kan du redigera dem för enskilda kortkoder genom parametrarna för den senare. Men installationen sparar tid och gör det lite lättare senare.

De flesta av inställningarna är självförklarande, och du kan se att WooCommerce produkttabell gör ett bra jobb med att tillhandahålla verktygstips eller dokumentationslänkar för att hjälpa dig lära dig mer om varje inställning.

Upptäck Hur man lägger till en WooCommerce butik på Facebook

När du har ställt in standardknapparna kan du bläddra vidare för att konfigurera mer avancerade layout- och funktionsinställningar.

Återigen gör plugin-programmet ett bra jobb; den som ger ytterligare information för någon av parametrarna som kan vara lite svåra att förstå. 

Så här kontrollerar du lagret i din WooCommerce onlinebutik ? Upptäck det genom att klicka på den här länken.

En sak att vara uppmärksam på är begränsning av den progressiva laddningen. Om du bestämmer dig för att använda progressiv laddning för att påskynda din onlinebutik kommer du att begränsa plugins sök- och sorteringsfunktionalitet.

Se även vårt urval av 12 bästa WooCommerce-plugins för att förbättra din onlinebutik

När konfigureringen är klar ska du spara dina ändringar.

2 Steg: Lägg till WooCommerce Grid Widgets (valfritt)

Som jag nämnde erbjuder WooCommerce Product Table också fyra widgets som hjälper dig att lägga till filteralternativ i sidofältet ( som du kan för klassiska WooCommerce-butiker ).

Gå till Utseende → Widgets som vanligt och svep över önskade widgets:

Steg 3: Lägg till en kortkod där du vill visa ditt produktnät

Du är vid mållinjen! Nu är allt du behöver göra att lägga till kortkoden [product_table] vart du än vill att ditt rutnät ska visas.

Upptäck också Hur man hittar länken till Wordpress inloggningssidan

Som standard fungerar kortkoden enligt de inställningar du valde i steg 1. Men om du vill anpassa funktionaliteten för specifika kortkoder kan du göra det med hjälp av många kortkodsparametrar tillgängliga.

Om du till exempel bara vill använda rutnätet på produkter i en viss kategori kan du lägga till en sådan parameter:

[product_table kategori="hattar"]

Du kan till och med vara kreativ och använda AND / ELLER-villkoren här.

Till exempel:

• [product_table kategori= "hattar + in stjärna« ] visar endast produkter som tillhör fois till hattkategorierna et i stjärnor.
• [ Product_table kategori= "hattar Vid stjärna "] visar produkter som är soit hattar ou stjärnkategorin.

Denna uppmärksamhet på små detaljer är det som gör nätet för WooCommerce-produkter så bra. 

Se även vår 6 WordPress-plugins för att blåsa nytt liv i dina artiklar

Och det handlar om allt som finns med ett produktnät på WooCommerce!

WooCommerce Product Table plugin-prissättning

WooCommerce Product Table är uteslutande ett premium-plugin. Även om det finns några gratisalternativ listade i WordPress.org-katalogen har jag inte hittat några som är lika flexibla eller väldokumenterade, så jag tror att WooCommerce Product Table är värt priset, vilket är ...

Upptäck också några premium WordPress-plugins  

Du kan använda andra Wordpress plugins för att ge ett modernt utseende och för att optimera hanteringen av din blogg eller hemsida.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. HBook

HBook är en WordPress plugin vilket gör att du enkelt kan skapa en onlinebokningslösning på din webbplats.

Den passar perfekt för alla som har ett företag inom hotellsektorn (hotell, semesterlägenheter, camping etc.).

Upptäck också vår 5 WordPress plugins för att dela innehållet i din blogg

genom Wordpress plugin HBook kommer du att kunna lägga till tillgänglighetskalendrar, prislistor och bokningsformulär på din webbplats, bara på några sekunder.

Ladda ner | demo | webbhotell 

2. WooCommerce Tabs Pro: Extra flikar för produktsidan

Ce Wordpress plugin ger dig obegränsade ytterligare flikar på produktsidan.

Dess huvudsakliga funktioner är: möjligheten till ändra titeln på flikarna, a redigerare för att redigera anpassat innehåll, sidanmöjlighet att fästa flikar eller inte, valet av ikoner för flikar, enkel borttagning flikar, sanpassning av flikarnas placering i det offentliga gränssnittet, t.ex.t mer ...

Ladda ner | demo | webbhotell

3. WooCommerce Multilevel Referral Plugin

Detta WooCommerce-plugin gör att dina dotterbolag kan tjäna kreditpoäng om deras abonnenter köper dina produkter från din befintliga onlinebutik.

Dess funktioner är bland annat: konfigurationen av en personlig kredit- och inlösengräns, fullständiga administrationsrapporter för registrerade användare, hantering av globala eller produktspecifika parametrar, stöd av kortnummer, och många fler.

Upptäck också Så här lägger du till en rullgardinsformulär till din globala rubrik

Det är ett WooCommerce-anslutningssystem på flera nivåer, något som ligger utanför det typiska affiliate-transaktionssystemet.

Ladda ner | demo | webbhotell

Andra rekommenderade resurser

Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.

• 9 Wordpress teman för att skapa en bio produktförsäljning webbplats
• 6 CDN-tjänster för att förbättra hastigheten på din WordPress-blogg 
• Hur du skapar ditt affiliate-program med WP Affiliate PlatForm
• Hur man uppdaterar dina WordPress-plugins manuellt

Slutsats

Det är det! Det är det för den här tutorialen. Jag hoppas att du kan skapa WooCommerce-produktnät på WordPress. Känn dig fri att dela tipset med dina vänner på dina sociala nätverk.

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.

Men under tiden berätta om din commentaires och förslag i det dedikerade avsnittet.

.