Har du nogensinde ønsket at oprette et sorterbart og filtrerbart gitter, der indeholder hele eller en del af dine WooCommerce-produkter?

Hvis du driver en WooCommerce-butik, ved du, at WooCommerce allerede kommer med en dedikeret arkivside, der hjælper dig med at fremvise individuelle produkter.

Men afhængigt af hvad du sælger, er dette ikke altid den mest effektive måde at fremvise dine produkter på.

I nogle tilfælde er det mere effektivt at vise WooCommerce-produkter i et net.

Og hvis det lyder som den situation, du er i, har du det godt, fordi jeg vil vise dig, hvordan du opretter et gitter af dine WooCommerce-produkter.

Men hvis du aldrig har installeret WordPress, skal du opdage Sådan installeres en WordPress blog 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog 

Så tilbage til, hvorfor vi er her.

Hvad kan du gøre med et gitter med WooCommerce-produkter?

Selvom det ikke er en komplet liste, er der et par situationer, hvor et produktgitter kan give besøgende en bedre oplevelse end din almindelige arkivside:

Oplev Sådan installeres en online butik på WordPress med WooCommerce plugin

• Engroshandel - hvis du engros mange produkter, kan det være mere brugervenligt at give dine kunder en nem måde at sortere eller filtrere et gitter på end at lade dem gennemse individuelle produktsider.
• Produktkataloger - Tilsvarende, hvis du bare vil vise et produktkatalog, der er let at gennemse, sparer et AJAX-sorterings- / filtreringsgitter kunderne tid (og sideindlæsninger).
• Ordreformularer - hvis du vil oprette en ordreformular baseret på WooCommerce-produkter, giver et gitter en meget nem måde at gøre det på. Det er også en god tilgang at vise en restaurantmenu og acceptere online ordrer.

Sådan opretter du et gitter med WooCommerce-produkter

Vi bruger plugin'et WooCommerce produkttabel. Pluginet er særligt fokuseret på oprettelsen af ​​produktgitter. Og takket være dets interface-parametre og shortcode, kan du tilpasse næsten ethvert aspekt af, hvordan dit net fungerer.

Læs også vores vejledning om: Sådan øges den tid, du bruger på din WordPress-blog

Her er nogle af de mest nyttige funktioner, efter min mening:

• Nemt tilføje eller slette kolonner Du kan endda tilføje kolonner, der indeholder brugerdefinerede felter eller tilpassede taksonomier, og WooCommerce-produkttabellen integreres fuldt ud med avancerede brugerdefinerede felter.
• 4 filter widgets inkluderet. Disse giver dig mulighed for at give læserne en problemfri oplevelse ved at tilbyde filtreringsindstillinger i dit sidebjælke.
• Produktvariation / attributunderstøttelse. Vælg mellem 3 forskellige måder at vise produktvariationer i dit gitter.
• Multi-select bokse. Det letter oprettelsen af ​​ordreformularer ved at give kunderne mulighed for at vælge flere produkter, før de føjes til deres indkøbskurv.
• Øjeblikkelig søgning, sortering og filtrering . Kunder kan manipulere dine gitterdata uden at indlæse siden igen.
• Tilføj til indkøbsvogn . Tilsvarende kan kunder tilføje produkter til deres kurve uden at indlæse siden igen.
• Lazy Load support. Nyttig til forbedring af ydeevnen på store gitter ( skønt dette påvirker muligheden for at tilbyde øjeblikkelig sortering eller filtrering )

Sådan bruges dette plugin ...

1 Trin: Konfigurer standardnetfunktionen

Efter installation og aktivering af plugin er den første ting at gøre konfigurere standardfunktionaliteten til dine gitter. Se vores trin for trin-guide til, hvordan du installerer et WordPress-plugin.

Dette definerer i det væsentlige kortkodens standardopførsel. Men du kan også ændre denne opførsel for individuelle gitter ved at tilføje parametre til kortkoden.

Gå til. For at få adgang til plugin-indstillingerne WooCommerce → Indstillinger. Klik derefter på fanen Produkter og vælg indstillingen Produktborde :

Konfiguration af udseendet på dine net

Først og fremmest kan du vælge stilen på dit gitter i sektionen Borddesign. Du kan gøre det med:

• Standard - som du kan forestille dig, bruger denne mulighed plugins standardindstillinger uden yderligere indblanding fra din side. Han vil forsøge at bruge det aktuelle tema på din blog så meget som muligt.
• Personnalisé : når det er valgt, udvider det en liste med stylingindstillinger, der giver dig mulighed for at tilpasse skrifttypefarver og -størrelser uden behov for det Tilpasset CSS.

Når du har konfigureret din stil, skal du konfigurere standardkodekodstanderne. Igen kan du redigere dem til individuelle kortkoder gennem sidstnævnte parametre. Men opsætning vil spare dig tid og gøre tingene lidt lettere senere.

De fleste af indstillingerne er selvforklarende, og du kan se, at WooCommerce-produkttabel gør et godt stykke arbejde med at levere værktøjstip eller dokumentationslink til at hjælpe dig med at lære mere om hver indstilling.

Oplev Hvordan at tilføje en WooCommerce butik på Facebook

Når du har indstillet standardnumrene for kortkoder, kan du rulle videre for at konfigurere mere avanceret layout og funktionsindstillinger.

Igen gør pluginet et godt stykke arbejde; den, der giver yderligere oplysninger for nogen af ​​de parametre, der kan være lidt vanskelige at forstå. 

Sådan kontrollerer du lageret i din WooCommerce online butik ? Oplev det ved at klikke på dette link.

En ting at være opmærksom på er begrænsning af den progressive ladning. Hvis du beslutter at bruge progressiv indlæsning til at fremskynde din onlinebutik, begrænser du plugins søgnings- og sorteringsfunktionalitet.

Se også vores udvalg af 12 bedste WooCommerce-plugins til at forbedre din online butik

Når konfigurationen er afsluttet, skal du sørge for at gemme dine ændringer.

2 Trin: Tilføj WooCommerce Grid Widgets (valgfrit)

Som jeg nævnte, tilbyder WooCommerce Product Table også fire widgets, der hjælper dig med at tilføje filtreringsindstillinger til din sidepanel ( som du kan for klassiske WooCommerce-butikker ).

Gå til Udseende → Widgets som normalt og stryg over de ønskede widgets:

Trin 3: Tilføj en kortkode, hvor du vil vise dit produktgitter

Du er ved målstregen! Nu skal du blot tilføje kortkoden [product_table] uanset hvor du vil have dit gitter vist.

Opdag også Sådan finder linket til WordPress login-siden

Som standard fungerer kortkoden i henhold til de indstillinger, du valgte i trin 1. Men hvis du vil tilpasse funktionaliteten til bestemte kortkoder, kan du gøre det ved hjælp af mange kortkodeparametre tilgængelig.

For eksempel, hvis du kun bruger gitteret på produkter i en bestemt kategori, kan du tilføje en parameter som denne:

[product_table kategori="hatte"]

Du kan endda være kreativ og bruge AND / OR betingelserne her.

For eksempel:

• [product_table kategori= "hatte + in stjerne« ] viser kun produkter, der hører til fois til hatte-kategorierne et i stjerner.
• [ Product_table kategori= "hatte i stjerne "] viser produkter, der er så det hatte ou stjernekategorien.

Denne opmærksomhed på små detaljer er det, der gør gitteret til WooCommerce-produkter så stort. 

Se også vores 6 WordPress-plugins for at puste nyt liv i dine artikler

Og det handler om alt, hvad der er med et produktgitter på WooCommerce!

WooCommerce Product Table plugin-priser

WooCommerce Product Table er udelukkende et premium plugin. Mens der er et par gratis muligheder, der er anført i WordPress.org-biblioteket, har jeg ikke fundet nogen, der er så fleksible eller veldokumenterede, så jeg synes, at WooCommerce Product Table er prisen værd, hvilket er ...

Oplev også nogle premium WordPress-plugins  

Du kan bruge andet WordPress plugins for at give et moderne udtryk og for at optimere håndteringen af ​​din blog eller hjemmeside.

Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.

1. HBook

HBook er en WordPress plugin som giver dig mulighed for nemt at oprette en online reservationsløsning på din hjemmeside.

Det passer perfekt til alle, der har forretning inden for hotelbranchen (hoteller, ferielejligheder, camping osv.).

Oplev også vores 5 WordPress plugins til at dele indholdet af din blog

Tak til WordPress plugin HBook, vil du være i stand til at tilføje tilgængelighedskalendere, prislister og reservationsformularer til din hjemmeside på få sekunder.

Downloade | demo | Web-hosting 

2. WooCommerce Tabs Pro: Ekstra faner til produktsiden

Ce WordPress plugin giver dig ubegrænset ekstra faner på produktsiden.

Dets vigtigste funktioner er: muligheden for ændre titel på fanerne, a editor til at redigere brugerdefineret indhold, smulighed for at fastgøre faner eller ej, valget af ikoner til faner, let fjernelse faner, stilpasning af placeringen af ​​faner på den offentlige grænseflade, f.ekst mere ...

Downloade | demo | Web-hosting

3. WooCommerce Multilevel Referral Plugin

Dette WooCommerce-plugin giver dine tilknyttede virksomheder mulighed for at optjene kreditpoint, hvis deres abonnenter køber dine produkter fra din eksisterende online butik.

Dens funktioner inkluderer: konfiguration af en personlig kredit- og indløsningsgrænse, komplette administrationsrapporter for registrerede brugere, styring af globale eller produktspecifikke parametre, understøttelse af kortkoder, og mange flere.

Opdag også Sådan tilføjes en drop-down kontaktformular til din globale header

Det er et WooCommerce tilknyttet system på flere niveauer, noget der ligger uden for det typiske tilknyttede transaktionssystem.

Downloade | demo | Web-hosting

Andre anbefalede ressourcer

Vi inviterer dig også til at konsultere nedenstående ressourcer for at komme videre i grebet og kontrollen af ​​dit websted og blog.

• 9 WordPress temaer for at skabe en bio produktsalg hjemmeside
• 6 CDN-tjenester til forbedring af hastigheden på din WordPress-blog 
• Sådan opretter du dit tilknyttede program med WP Affiliate PlatForm
• Sådan opdateres dine WordPress-plugins manuelt

Konklusion

Det er det! Det er det til denne tutorial. Jeg håber du vil være i stand til at oprette WooCommerce produktnet på WordPress. du er velkommen til del tipet med dine venner på dine sociale netværk.

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse.

Men i mellemtiden, fortæl os om din kommentarer og forslag i det dedikerede afsnit.

...