Heb je ooit een sorteerbaar en filterbaar raster willen maken dat alle of een deel van je WooCommerce-producten bevat?

Als u een WooCommerce-winkel heeft, weet u dat WooCommerce al wordt geleverd met een speciale archiefpagina waarmee u afzonderlijke producten kunt presenteren.

Maar afhankelijk van wat u verkoopt, is dit niet altijd de meest effectieve manier om uw producten onder de aandacht te brengen.

In sommige gevallen is het weergeven van WooCommerce-producten in een raster efficiënter.

En als dat klinkt als de situatie waarin je je bevindt, gaat het goed, want ik ga je laten zien hoe je een raster van je WooCommerce-producten kunt maken.

Maar als je WordPress nog nooit hebt geïnstalleerd, ontdek het Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog 

Ga dan terug naar waarom we hier zijn.

Wat kunt u doen met een raster van WooCommerce-producten?

Hoewel het geen volledige lijst is, zijn hier een paar situaties waarin een productraster bezoekers een betere ervaring kan bieden dan uw gewone archiefpagina:

Ontdek Hoe een online winkel op WordPress te installeren met de WooCommerce plug-in

• Groothandel - als u veel producten verkoopt, kan het gebruiksvriendelijker zijn om uw klanten een eenvoudige manier te bieden om een ​​raster te sorteren of te filteren dan hen door individuele productpagina's te laten bladeren.
• Productcatalogi - op dezelfde manier, als u gewoon een gemakkelijk te doorbladeren productcatalogus wilt weergeven, zal een AJAX-sorteer- / filterraster klanten tijd besparen (en het opnieuw laden van pagina's).
• Bestelformulieren - als u een bestelformulier wilt maken op basis van WooCommerce-producten, biedt een raster een zeer gemakkelijke manier om dit te doen. Het is ook een goede benadering om een ​​restaurantmenu weer te geven en online bestellingen te accepteren.

Hoe maak je een raster van WooCommerce-producten

We zullen de plug-in gebruiken WooCommerce Producttabel. De plug-in is bijzonder gericht op het maken van een productraster. En dankzij de interfaceparameters en shortcodes, kunt u zowat elk aspect van hoe uw raster werkt aanpassen.

Lees ook onze gids over: Hoe u de tijd besteedt aan uw WordPress-blog kunt verlengen

Hier zijn enkele van de meest nuttige functies, naar mijn mening:

• Eenvoudig kolommen toevoegen of verwijderen U kunt zelfs kolommen met aangepaste velden of aangepaste taxonomieën toevoegen, en WooCommerce Product Table integreert volledig met geavanceerde aangepaste velden.
• 4 filter-widgets inbegrepen. Hiermee kunt u lezers een naadloze ervaring bieden door filteropties aan te bieden in uw zijbalk.
• Productvariatie / kenmerkondersteuning. Kies uit 3 verschillende manieren om productvariaties in uw raster weer te geven.
• Multi-selectie dozen. Het vergemakkelijkt het creëren van bestelformulieren doordat klanten meerdere producten kunnen selecteren voordat ze deze aan hun winkelwagentje toevoegen.
• Direct zoeken, sorteren en filteren . Klanten kunnen uw rastergegevens manipuleren zonder de pagina opnieuw te laden.
• In winkelwagen . Op dezelfde manier kunnen klanten producten aan hun manden toevoegen zonder de pagina opnieuw te laden.
• Ondersteuning voor Lazy Load. Handig voor het verbeteren van de prestaties van grote roosters ( hoewel dit de mogelijkheid beïnvloedt om direct sorteren of filteren aan te bieden )

Hier is hoe u deze plug-in kunt gebruiken ...

1 Stap: configureer de standaard rasterfunctie

Nadat u de plug-in hebt geïnstalleerd en geactiveerd, moet u eerst de standaardfunctionaliteit voor uw netten configureren. Bekijk onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in.

Dit definieert in wezen het standaardgedrag van de shortcode. Maar u kunt dit gedrag ook voor afzonderlijke rasters wijzigen door parameters aan de shortcode toe te voegen.

Ga naar voor toegang tot de plug-ininstellingen WooCommerce → Instellingen. Klik vervolgens op het tabblad Producten en kies de optie Product tabellen :

Het uiterlijk van uw rasters configureren

Allereerst kunt u de stijl van uw raster in de sectie kiezen Tafel ontwerp. Je kunt het doen met:

• Standaard - zoals u zich kunt voorstellen, gebruikt deze optie de standaardinstellingen van de plug-in zonder verdere tussenkomst van uw kant. Hij zal proberen om zoveel mogelijk het huidige thema van je blog te gebruiken.
• personnalisé : indien geselecteerd, breidt het een lijst met stijlopties uit waarmee u lettertypekleuren en -groottes kunt aanpassen zonder dat dit nodig is Aangepaste CSS.

Nadat u uw stijl hebt ingesteld, moet u de standaardwaarden voor de shortcode configureren. Nogmaals, u kunt ze bewerken voor individuele shortcodes via de parameters van de laatste. Maar het instellen bespaart u tijd en maakt het later een beetje gemakkelijker.

De meeste instellingen zijn zelfverklarend en u kunt zien dat de WooCommerce-producttabel goed werk levert door tooltips of documentatielinks te bieden om u te helpen meer te leren over elke instelling.

Ontdek ook Hoe maak je een WooCommerce winkel toe te voegen op Facebook

Nadat u de standaardwaarden van de shortcodes hebt ingesteld, kunt u verder scrollen om meer geavanceerde lay-out- en functie-instellingen te configureren.

Nogmaals, de plug-in doet het geweldig; degene die aanvullende informatie geeft voor een van de parameters die misschien wat moeilijk te begrijpen zijn. 

Hoe u de voorraad van uw WooCommerce online winkel beheert ? Ontdek het door op deze link te klikken.

Een ding om op te letten is het beperking van de progressieve lading. Als u besluit om progressief laden te gebruiken om uw online winkel te versnellen, beperkt u de zoek- en sorteerfunctionaliteit van de plug-in.

Zie ook onze selectie van 12 beste WooCommerce-plug-ins om uw online winkel te verbeteren

Nadat de configuratie is voltooid, moet u uw wijzigingen opslaan.

2 Stap: voeg WooCommerce Grid Widgets toe (optioneel)

Zoals ik al zei, biedt WooCommerce Product Table ook vier widgets om je te helpen filteropties toe te voegen aan je zijbalk ( zoals je kunt voor klassieke WooCommerce-winkels ).

Om toegang te krijgen, ga naar Uiterlijk → Widgets zoals gewoonlijk en veeg over de gewenste widgets:

Stap 3: Voeg een shortcode toe waar u uw productraster wilt weergeven

Je bent bij de finish! Nu hoeft u alleen nog de shortcode toe te voegen [product_table] waar u maar wilt dat uw raster verschijnt.

Ontdek ook Hoe kan ik de link naar de WordPress login pagina

Standaard werkt de shortcode volgens de instellingen die u in stap 1 hebt gekozen. Maar als u de functionaliteit voor specifieke shortcodes wilt aanpassen, kunt u dat doen met de veel shortcode-parameters beschikbaar.

Als u het raster bijvoorbeeld alleen wilt gebruiken voor producten van een specifieke categorie, kunt u een parameter als volgt toevoegen:

[product_table categorie="hoeden"]

Je kunt zelfs creatief zijn en de EN / OF-voorwaarden hier gebruiken.

Bijvoorbeeld:

• [product_table categorie= "hoeden + in ster« ] toont alleen producten die behoren tot de fois naar de hoedencategorieën et in sterren.
• [ Product_table categorie= "hoeden , en ster "] geeft producten weer die dat wel zijn soit hoeden ou de stercategorie.

Deze aandacht voor kleine details maakt het raster van WooCommerce-producten zo geweldig. 

Zie ook onze 6 WordPress-plug-ins om uw artikelen nieuw leven in te blazen

En dat is ongeveer alles wat er is met een productraster op WooCommerce!

Prijzen van WooCommerce Product Table plug-in

WooCommerce Product Table is uitsluitend een premium plug-in. Hoewel er een paar gratis opties worden vermeld in de WordPress.org-directory, heb ik er geen gevonden die zo flexibel of goed gedocumenteerd zijn, dus ik denk dat WooCommerce Product Table de prijs waard is, wat ...

Ontdek ook enkele premium WordPress-plug-ins  

U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. HBook

HBook is een WordPress-plug-in waarmee u eenvoudig een online reserveringsoplossing op uw website kunt maken.

Het is perfect geschikt voor iedereen die zaken heeft in de hotelsector (hotels, vakantieappartementen, campings, etc.).

Ontdek ook onze 5 WordPress plug-ins om de inhoud van uw blog te delen

met WordPress Plugin Met HBook kunt u binnen enkele seconden beschikbaarheidskalenders, prijslijsten en boekingsformulieren aan uw website toevoegen.

Downloaden | demonstratie | web hosting 

2. WooCommerce Tabs Pro: extra tabbladen voor productpagina

Ce WordPress Plugin biedt u onbeperkt extra tabbladen op de productpagina.

De belangrijkste kenmerken zijn: de mogelijkheid van verander de titel van de tabbladen, a editor om aangepaste inhoud te bewerken, de pmogelijkheid om tabbladen vast te zetten of niet, de keuze van pictogrammen voor tabbladen, eenvoudig verwijderen tabbladen, de paanpassing van de positie van tabbladen op de openbare interface, et meer ...

Downloaden | demonstratie | web hosting

3. WooCommerce Referral-invoegtoepassing op meerdere niveaus

Met deze WooCommerce-plug-in kunnen uw partners kredietpunten verdienen als hun abonnees uw producten kopen bij uw bestaande online winkel.

De functies omvatten: configuratie van een gepersonaliseerde krediet- en inwissellimiet, volledige administratierapporten voor geregistreerde gebruikers, beheer van algemene of productspecifieke parameters, ondersteuning van shortcodes, en nog veel meer.

Ontdek ook Een vervolgkeuzelijst toevoegen aan uw wereldwijde koptekst

Het is een WooCommerce-aangesloten systeem met meerdere niveaus, iets dat buiten het typische affiliate-transactiesysteem valt.

Downloaden | demonstratie | web hosting

Andere aanbevolen bronnen

We nodigen u ook uit om de onderstaande bronnen te raadplegen om verder te gaan in de greep en controle van uw website en blog.

• 9 WordPress thema's om een ​​bio-product verkopen website te maken
• 6 CDN-services om de snelheid van uw WordPress-blog te verbeteren 
• Hoe u uw partnerprogramma maakt met WP Affiliate PlatForm
• Hoe u uw WordPress-plug-ins handmatig kunt bijwerken

Conclusie

Alstublieft ! Dat is het voor deze tutorial. Ik hoop dat je WooCommerce-productgrids op WordPress kunt maken. Aarzel niet om deel de tip met je vrienden op je sociale netwerken.

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

Maar vertel ons in de tussentijd over uw commentaires en suggesties in de speciale sectie.

...