Har du noen gang ønsket å lage et sorterbart og filtrerbart rutenett som inneholder hele eller deler av WooCommerce-produktene dine?

Hvis du driver en WooCommerce-butikk, vet du at WooCommerce allerede kommer med en dedikert arkivside som hjelper deg med å presentere individuelle produkter.

Men avhengig av hva du selger, er dette ikke alltid den mest effektive måten å presentere produktene dine på.

I noen tilfeller er det mer effektivt å vise WooCommerce-produkter i et nett.

Og hvis det høres ut som situasjonen du er i, har du det bra fordi jeg skal vise deg hvordan du lager et rutenett med WooCommerce-produktene dine.

Men hvis du aldri har installert WordPress, kan du oppdage Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din 

Så tilbake til hvorfor vi er her.

Hva kan du gjøre med et rutenett med WooCommerce-produkter?

Selv om det ikke er en komplett liste, er det noen situasjoner der et produktrutenett kan gi besøkende en bedre opplevelse enn din vanlige arkivside:

Oppdag Slik installerer du en nettbutikk på WordPress med WooCommerce-plugin

• Engroshandel - hvis du grosserer mange produkter, kan det være mer brukervennlig å gi kundene dine en enkel måte å sortere eller filtrere et rutenett enn å få dem til å bla gjennom individuelle produktsider.
• Produktkataloger - På samme måte, hvis du bare vil vise en produktkatalog som er lett å bla gjennom, vil et AJAX sorterings- / filterrutenett spare kundene tid (og sideoppdateringer).
• Bestillingsskjemaer - hvis du vil lage et bestillingsskjema basert på WooCommerce-produkter, gir et rutenett en veldig enkel måte å gjøre det på. Det er også en god tilnærming å vise en restaurantmeny og godta onlinebestillinger.

Hvordan lage et rutenett med WooCommerce-produkter

Vi vil bruke plugin WooCommerce produkttabell. Pluggen er spesielt fokusert på opprettelsen av produktnett. Og takket være grensesnittparametrene og snarvei, kan du tilpasse omtrent alle aspekter av hvordan nettet fungerer.

Les også vår guide om: Hvordan øke tiden brukt på WordPress-bloggen din

Her er noen av de mest nyttige funksjonene, etter min mening:

• Du kan enkelt legge til eller slette kolonner Du kan til og med legge til kolonner som inneholder egendefinerte felt eller egendefinerte taksonomier, og WooCommerce Product Table integreres fullt ut med Advanced Advanced Fields.
• 4 filter widgets inkludert. Disse lar deg gi leserne en sømløs opplevelse ved å tilby filtreringsalternativer i sidefeltet.
• Produktvariasjon / attributtstøtte. Velg mellom 3 forskjellige måter å vise produktvariasjoner på nettet ditt.
• Flervalgsbokser. Det letter opprettelsen av ordreskjemaer ved å la kundene velge flere produkter før du legger dem til i handlekurven.
• Øyeblikkelig søk, sortering og filtrering . Kunder kan manipulere nettdataene dine uten å laste siden på nytt.
• Ajout au Panier . Tilsvarende kan kunder legge til produkter i kurvene uten å laste inn siden på nytt.
• Lazy Load-støtte. Nyttig for å forbedre ytelsen til store nett ( selv om dette påvirker muligheten til å tilby øyeblikkelig sortering eller filtrering )

Slik bruker du dette pluginet ...

1 Trinn: Konfigurer standardnettfunksjonen

Etter å ha installert og aktivert plugin-modulen, er det første du må gjøre å konfigurere standardfunksjonaliteten for rutenettene. Sjekk ut vår trinnvise guide for hvordan du installerer en WordPress-plugin.

Dette definerer i utgangspunktet standardatferden til kortkoden. Men du kan også endre denne oppførselen for individuelle rutenett ved å legge til parametere til kortkoden.

For å få tilgang til plugin-innstillingene, gå til WooCommerce → Innstillinger. Klikk deretter på fanen Produkter og velg alternativet Produkt tabeller :

Konfigurerer utseendet til nettene dine

Først og fremst kan du velge stilen til rutenettet ditt i delen Borddesign. Du kan gjøre det med:

• Misligholde - som du kan forestille deg deg, bruker dette alternativet pluginens standardinnstillinger uten ytterligere inngrep fra din side. Han vil prøve å bruke bloggens nåværende tema så mye som mulig.
• personnalisé : når den er valgt, utvider den en liste over stylingsalternativer som lar deg tilpasse skriftfarger og -størrelser uten behov for det Tilpasset CSS.

Når du har konfigurert stilen din, må du konfigurere standardkodekravene. Igjen, kan du redigere dem for individuelle kortkoder gjennom parameterne til sistnevnte. Men konfigurering vil spare deg for tid og gjøre ting litt lettere senere.

De fleste parametere er selvforklarende, og du kan se at WooCommerce Produkttabell gjør en god jobb med å gi verktøytips eller dokumentasjon lenker for å hjelpe deg å lære om hver innstilling.

Discover Hvordan legge til en WooCommerce butikk på Facebook

Når du har angitt standardverdiene for snarveiene, kan du bla videre for å konfigurere mer avanserte layout- og funksjonsinnstillinger.

Igjen, pluginet gjør en god jobb; den som gir ytterligere informasjon for noen av parametrene som kan være litt vanskelig å forstå. 

Slik kontrollerer du lageret av din WooCommerce nettbutikk ? Oppdag det ved å klikke på denne lenken.

En ting å ta hensyn til er begrensning av den progressive ladningen. Hvis du bestemmer deg for å bruke progressiv lasting for å øke hastigheten på nettbutikken din, vil du begrense pluginens søke- og sorteringsfunksjonalitet.

Se også vårt utvalg av 12 beste WooCommerce-plugins for å forbedre nettbutikken din

Når konfigurasjonen er fullført, må du huske å lagre endringene.

2 Trinn: Legg til WooCommerce Grid Widgets (valgfritt)

Som jeg nevnte, tilbyr WooCommerce Product Table også fire widgets som hjelper deg å legge til filtreringsalternativer i sidefeltet ( som du kan for klassiske WooCommerce-butikker ).

For å få tilgang til det, gå til Utseende → Widgets som vanlig og skyv på de ønskede widgetene:

Trinn 3: Legg til en kortkode der du vil vise produktrutenettet ditt

Du er i mål! Nå er alt du trenger å gjøre å legge til kortkoden [product_table] uansett hvor du vil at rutenettet skal vises.

Oppdag også Hvordan finne linken til WordPress påloggingssiden

Som standard vil kortkoden fungere i henhold til innstillingene du valgte i trinn 1. Men hvis du vil tilpasse funksjonaliteten for bestemte kortkoder, kan du gjøre det ved å bruke mange kortkodeparametere tilgjengelig.

Hvis du for eksempel bare skal bruke rutenettet på produkter i en bestemt kategori, kan du legge til en parameter som denne:

[product_table kategori="hatter"]

Du kan til og med være kreativ og bruke AND / ELLER-forholdene her.

For eksempel:

• [product_table kategori= "hatter + inn stjerne« ] viser bare produkter som tilhører fois til hatte-kategoriene et i stjerner.
• [ Product_table kategori= "hatter På stjerne "] viser produkter som er soit hatter ou stjernekategorien.

Denne oppmerksomheten til små detaljer er det som gjør nettet til WooCommerce-produkter så flott. 

Se også vår 6 WordPress-plugins for å blåse nytt liv i artiklene dine

Og det handler om alt det er med et produktrutenett på WooCommerce!

WooCommerce Product Table plugin priser

WooCommerce Product Table er utelukkende et premium plugin. Selv om det er noen få gratis alternativer oppført i WordPress.org-katalogen, har jeg ikke funnet noen som er like fleksible eller veldokumenterte, så jeg tror WooCommerce Product Table er verdt prisen, som er ...

Oppdag også noen premium WordPress-plugins  

Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.

Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.

1. HBook

HBook er en WordPress-utvidelse som lar deg enkelt lage en online reservasjonsløsning på nettstedet ditt.

Det passer perfekt for alle som har virksomhet innen hotellsektoren (hotell, ferieleiligheter, camping osv.).

Oppdag også vår 5 WordPress plugins for å dele innholdet i bloggen din

gjennom WordPress Plugin HBook, vil du kunne legge til tilgjengelighetskalendere, prislister og bestillingsskjemaer på nettstedet ditt, bare i løpet av sekunder.

Last ned | dEMO | Webhotell 

2. WooCommerce Tabs Pro: Ekstra faner for produktside

Ce WordPress Plugin gir deg ubegrensede tilleggsfaner på produktsiden.

Dets viktigste funksjoner er: muligheten for endre tittelen på fanene, a redaktør for å redigere tilpasset innhold, smulighet for å feste faner eller ikke, valget av ikoner for faner, enkel fjerning faner, stilpasning av plasseringen av faner på det offentlige grensesnittet, f.ekst mer ...

Last ned | dEMO | Webhotell

3. WooCommerce Multilevel Referral Plugin

Denne WooCommerce-plugin lar dine tilknyttede selskaper tjene kredittpoeng hvis abonnentene deres kjøper produktene dine fra din eksisterende nettbutikk.

Funksjonene er blant annet: konfigurasjonen av en personlig kreditt- og innløsningsgrense, komplette administrasjonsrapporter for registrerte brukere, styring av globale eller produktspesifikke parametere, støtte av kortkoder, og mange flere.

Oppdag også Slik legger du til et nedtrekksskjema for kontakten til den globale overskriften

Det er et WooCommerce tilknyttet system på flere nivåer, noe som er utenfor det typiske tilknyttede transaksjonssystemet.

Last ned | dEMO | Webhotell

Andre anbefalte ressurser

Vi inviterer deg også til å konsultere ressursene nedenfor for å komme videre i grepet og kontrollen av nettstedet og bloggen din.

• 9 WordPress temaer for å lage en bio produktsalg hjemmeside
• 6 CDN-tjenester for å forbedre hastigheten på WordPress-bloggen din 
• Hvordan lage ditt tilknyttede program med WP Affiliate PlatForm
• Slik oppdaterer du WordPress-plugins manuelt

konklusjonen

Det er det! Det er det for denne opplæringen. Jeg håper du vil kunne lage WooCommerce produktnett på WordPress. Føl deg fri til å del tipset med vennene dine på dine sosiale nettverk.

Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.

Men i mellomtiden, fortell oss om din commentaires og forslag i den dedikerte delen.

...