Hoe maak je een aangepaste WooCommerce categorie pagina ontwerp
Bent u op zoek naar een alternatief voor de standaard WooCommerce categorie pagina ontwerp in uw WordPress thema? Door een aangepast ontwerp voor uw WooCommerce-productcategorieën te maken, kunt u een geoptimaliseerde winkelervaring bieden, wat een positief effect kan hebben op de bottom line van uw winkel.
Met de juiste plugin hoeft het maken van uw eigen aangepaste WooCommerce-categoriepagina-indeling ook niet moeilijk te zijn. Dat is wat we gaan laten zien in deze post. We zullen behandelen hoe je een aangepaste tabel-gebaseerde lay-out voor uw WooCommerce categorieën te maken. Hiermee heb je precies in de hand welke informatie wordt weergegeven en hoe shoppers met je producten omgaan.
Hier volgt een voorbeeld van wat je in deze post zult bouwen:
We beginnen met enkele van de voordelen van deze tabel-benadering. Dan zullen we in een stap-voor-stap handleiding over hoe het te doen in uw eigen WooCommerce winkel met de WooCommerce Product Tabel plugin.
De voordelen van het gebruik van een tabelindeling voor uw categoriepagina’s
Hoewel het exacte ontwerp van de categoriepagina-indeling van uw e-commerce winkel afhangt van uw WordPress-thema, zien de ontwerpen van de categoriepagina’s van de meeste thema’s er ongeveer zo uit:
Die indeling is prima voor sommige situaties, maar het beperkt het aantal producten dat u kunt weergeven. Het beperkt ook de hoeveelheid informatie die u over elk product kunt geven (hoewel het toevoegen van product quick view knoppen een manier is om dit te beperken).
Woo Multistore heeft geschreven over het belang van het ontwerpen van de WooCommerce categorie pagina op een manier die conversies stimuleert. Een tabel lay-out helpt u bij het overwinnen van de tekortkomingen door het weergeven van meer producten en informatie in een compacte lay-out die eindigt met behulp van minder ruimte, evenals het toevoegen van extra navigatie-functies zoals zoeken en filteren.
Dit betekent dat u meer van uw producten/productdetails voor de ogen van shoppers kunt krijgen, waardoor ze uw hele catalogus te zien krijgen en de kans groter wordt dat ze tot aankoop overgaan.
U zult ook SEO-voordelen zien bij zoekmachines, omdat u meer aangepaste inhoud kunt weergeven op een volledig aangepaste pagina (of ook landingspagina’s). Hiermee kunt u tonen producten die relevant zijn, en voeg dan contextuele tekst ook. Dit alles moet worden beloond met hogere rankings.
Terwijl dit type lay-out kan profiteren van alle soorten e-commerce winkel, het is vooral nuttig voor:
- Winkels
- Digitale bestanden (video’s, audio-bestanden, ebooks, enz.)
- Restaurants
- Product catalogi
- …nog veel meer!
Hoe maak je een aangepaste WooCommerce categorie pagina ontwerp met WooCommerce Product Tabel
Een ander voordeel van het gebruik van een tabel lay-out voor uw WooCommerce categorie pagina ontwerp is dat je alles kunt instellen zonder speciale technische kennis nodig te hebben.
Om dit te doen, zul je de WooCommerce Product Tabel plugin gebruiken. Deze plugin toont uw WooCommerce producten in een flexibele tabel lay-out die u controleert, samen met de mogelijkheid om filters, zoekvakken, paginering, en meer toe te voegen.
U kunt de plugin ook gebruiken om alleen producten uit specifieke categorieën of subcategorieën weer te geven. WooCommerce Product Tabel biedt twee manieren om dit te doen:
- U kunt centraal inschakelen van de product tabel lay-out op alle product categorie pagina’s. (Ideaal als je al je productcategorie pagina’s wilt aanpassen.)
- Aternatief kun je een shortcode gebruiken om handmatig je eigen WooCommerce categorie pagina’s te maken. (Bijvoorbeeld, als u de tabel wilt gebruiken om alleen producten van specifieke categorieën te tonen.)
Hieronder laten we u zien hoe u de WooCommerce Product Tabel kunt instellen om beide opties te bereiken.
Configureer WooCommerce Product Tabel
Als u eenmaal de WooCommerce Product Tabel plugin hebt geïnstalleerd en geactiveerd, wilt u de standaardinstellingen ervan configureren.
Hiermee kunt u bepalen welke informatie wordt weergegeven in uw product tabel en hoe alles werkt, zoals het al dan niet weergeven van bepaalde product attributen of hoe de add to cart functionaliteit zal werken.
Om te beginnen, ga naar WooCommerce → Instellingen → Producten → Producttabellen om toegang te krijgen tot de categorie plugin’s instellingen.
Het is de moeite waard om alle beschikbare instellingen door te nemen en degene te kiezen die passen bij uw unieke situatie. We gaan echter alleen de basis behandelen die essentieel zijn voor het ontwerpen van uw WooCommerce categorie pagina.
Voreerst, vind de Kolommen instelling onder de Tabel inhoud sectie. Dit is waar je zult bepalen welke informatie in je tabel verschijnt. Naast het weergeven van de belangrijkste productinformatie, kunt u ook productattributen, aangepaste velden en meer weergeven.
U kunt hier een volledige lijst met kolomopties vinden, maar deze configuratie is een goede basisversie die voor de meeste winkels zal werken:
image, name, description, price, buy
Verder naar beneden vindt u de sectie Toevoegen aan winkelwagentje, waarmee u de knoppen voor Toevoegen aan winkelwagentje kunt regelen.
Om bulkaankopen aan te trekken, kunt u selectievakjes toevoegen waarmee shoppers meerdere producten in bulk aan hun winkelwagen kunnen toevoegen. Of u kunt voor elk product (of beide!) een aparte knop Toevoegen aan winkelwagentje toevoegen:
Als u klaar bent, moet u de wijzigingen opslaan.
Als u de productinstellingen hebt geconfigureerd, zijn er twee manieren om WooCommerce-categorieën te maken. We zullen deze als volgt bekijken.
2a. Schakel producttabellen in op alle categoriepagina’s
WooCommerce Producttabel wordt geleverd met een optie om automatisch de lay-out van de producttabel toe te voegen aan alle categoriepagina’s. Dit is de eenvoudigste optie, die slechts een seconde in beslag neemt.
Op de instellingenpagina van de plugin vinkt u eenvoudig het vakje ‘Productcategorie-archieven’ aan:
Dit zal de tabellay-out voor alle categorieën globaal inschakelen, ter vervanging van de standaardlay-out die bij uw thema is geleverd.
Lees meer over deze methode.
2b. Gebruik een shortcode om uw eigen WooCommerce-categoriepagina-ontwerp te maken
U kunt ook een shortcode gebruiken om WooCommerce-producten per categorie weer te geven. Deze optie is perfect als u niet de product tabel lay-out op AL uw categorieën wilt gebruiken.
Voeg gewoon de plugin’s shortcode toe aan een gewone WordPress pagina, en specificeer van welke categorieën u producten wilt weergeven. Herhaal het proces zo vaak als u wilt – eenmaal voor elke categorie.
Met deze methode, bent u in wezen het creëren van een nieuwe WooCommerce productcategorie pagina voor elke productcategorie die u wilt weergeven, in plaats van het herontwerpen van de WooCommerce categorie pagina globaal.
U kunt ofwel blijven uw bestaande categorie pagina’s te gebruiken in combinatie met uw nieuwe tabel lay-out. Of u kunt gewoon de links naar elke bestaande productcategorie pagina vervangen door uw nieuwe tabel-aangedreven categorie pagina’s. (Tip: Als u de ingebouwde categoriepagina’s niet meer gebruikt, verwijs ze dan naar de nieuwe pagina’s waar u producttabellen gebruikt.)
Om te beginnen, gaat u naar Pagina’s → Nieuw toevoegen om een basis WordPress pagina te maken. Voeg vervolgens de [product_table] shortcode toe aan de pagina. U kunt ook een categorietitel toevoegen met behulp van het gewone titelveld.
De shortcode toont standaard al uw WooCommerce-producten.
U kunt echter de parameter categorie shortcode gebruiken om producten uit specifieke categorieën en/of subcategorieën te filteren. U kunt ook meerdere categorieën combineren of voorwaarden stellen, zoals dat een product in meerdere categorieën of subcategorieën moet voorkomen om te worden weergegeven.
Om bijvoorbeeld producten uit de categorie “stoel” te filteren, kunt u de volgende shortcode gebruiken:
[product_table category="chair"]
Als u een categorie-afbeelding of categorie-naam wilt toevoegen, kunt u dat ook boven de shortcode doen met behulp van de normale WordPress-editor.
Als u de pagina eenmaal hebt gepubliceerd, zou u het ontwerp van uw nieuwe WooCommerce-categoriepagina moeten zien:
Om pagina’s voor extra WooCommerce-categorieën te maken, herhaalt u het proces voor elke productcategorie of subcategorie die u wilt weergeven.
Maak je WooCommerce categorieën beter doorzoekbaar met filters
Als je meer zoek en filter tools wilt toevoegen aan je WooCommerce categorieën, heb je twee opties:
- Je kunt zoek, sorteer en filter opties toevoegen via de WooCommerce Product Tabel instellingen. Deze zullen verschijnen boven of onder uw product tabel.
- WooCommerce Product Tabel bevat widgets die u kunt gebruiken om filters toe te voegen aan uw zijbalk.
U kunt uw voorkeursmethode kiezen, of het is ook helemaal prima om beide benaderingen tegelijk te gebruiken. Dat laat je shoppers hun voorkeursmethode kiezen.
Om zoek-, sorteer- en filteropties direct aan de tabellay-out toe te voegen, ga je naar WooCommerce → Instellingen → Producten → Producttabellen. Scroll vervolgens naar beneden naar de sectie Tabel besturingselementen en configureer de opties volgens uw voorkeuren:
U kunt meer te weten komen in dit help artikel.
Om de filter widgets te gebruiken, kunt u naar Appearance → Widgets gaan. Daar vind je vier nieuwe widgets met als voorvoegsel “Product Tabel:”. U kunt alle widgets toevoegen, of alleen de specifieke filters kiezen die u wilt opnemen:
Hier volgt een voorbeeld van hoe beide sets filters eruit zouden kunnen zien:
Hoe maak je een aangepaste WooCommerce categorie pagina ontwerp met code
Als je je weg weet in PHP, HTML, en CSS, is het ook mogelijk om een aangepaste WooCommerce categorie pagina ontwerp te maken met behulp van code, zonder een WooCommerce plugin.
U zult willen werken met het bestand archive-product.php in uw thema of child thema. U kunt deze zelfde aanpak ook gebruiken om uw enkele productpagina’s te bewerken via het enkele-productbestand of andere delen van uw storefront.
Gelukkig genoeg, omdat u de code in de sjabloonbestanden van uw thema rechtstreeks moet bewerken om elke wijziging aan te brengen, is deze methode niet toegankelijk voor niet-ontwikkelaars. We raden u aan contact op te nemen met Codeable als u hulp nodig hebt, of de eenvoudigere tabellay-outmethode hierboven te gebruiken.
Maak vandaag nog uw eigen WooCommerce-categorieontwerp!
Door een WooCommerce-categorieontwerp te maken, kunt u gebruikmaken van een meer klantvriendelijke manier om uw producten weer te geven.
Door gebruik te maken van een tabelgebaseerde categoriepaginalay-out, kunt u meer producten weergeven, samen met meer details over elk product.
U kunt ook tal van nuttige zoek- en filteropties toevoegen om uw shoppers te helpen producten te vinden.
Door shoppers effectiever te verbinden met de producten waarin ze geïnteresseerd zijn, kunt u meer producten verkopen en de omzet van uw winkel verhogen.
Om een tabelontwerp voor uw WooCommerce-categorieën te gebruiken, kunt u de WooCommerce Product Table-plugin gebruiken. De setup is eenvoudig, en je hebt geen speciale technische kennis nodig om aan de slag te gaan zoals je zou doen als je direct je archief template bestand zou willen bewerken.
Ga vandaag nog aan de slag en creëer een effectievere manier voor shoppers om door productcategorieën te bladeren in uw WooCommerce winkel.