De productpagina’s van WooCommerce zien er altijd vrij standaard uit. Een productpagina WooCommerce aanpassen kun je op verschillende manieren doen, maar de meest makkelijke manier om dit te doen is met de pagebuilder Elementor Pro. Hiermee kun je eenvoudig zelf een WooCommerce shop template maken en aanpassen voor je producten of voor specifieke productcategorieën. In dit artikel leg ik je uit hoe je productpagina van WooCommerce kunt aanpassen. Het is ook mogelijk om de productpagina alleen voor specifieke producten / categorieën aan te passen.
Stap 1: Een template maken voor een productpagina
De productpagina WooCommerce aanpassen kun je dus doen met Elementor Pro. Als je Elementor hebt geïnstalleerd, zie je in het linkermenu ‘Templates’ staan. Klik hier op en kies voor ‘Theme Builder’. Klik vervolgens op de button ‘Nieuwe toevoegen’.
Selecteer bij type template ‘Single product’ en geef het template een naam. Bijvoorbeeld ‘Producten’.
Er opent nu direct een scherm waarin je al een template voor je productpagina kunt uitkiezen. Kies er één uit waarmee je de productpagina in WooCommerce wilt aanpassen. Of klik het scherm weg als je liever zelf een template maakt.
Stap 2: Productpagina WooCommerce aanpassen / template bewerken
Als je bezig gaat met het aanpassen van het template / productpagina, zie je in het linkermenu een aantal widgets / elementen staan die kunt gebruiken om je productpagina mee te bouwen.
WooCommerce Breadcrumbs:
Hiermee kun je de bezoeker laten zien waar in de webshop hij zich bevindt.
Producttitel:
De naam van het product dat je hebt ingevoerd bij WooCommerce Producten.
Productimages:
De afbeeldingen die hebt ingesteld bij het product
Product Price:
De prijs van het product die je hebt ingevoerd. Als er korting op zit zie je dat ook.
Add to Cart:
Dit is een button waarmee de bezoeker het product aan zijn winkelwagen kan toevoegen.
Productrating:
Beoordeling van het product. Als het product nog geen beoordeling heeft, wordt deze niet op je website getoond.
Product Stock:
Geeft aan of het product op voorraad is of niet (dit moet je dan wel ingesteld hebben).
Product Meta:
Hiermee kun je specifieke informatie weergeven, zoals productcategorie of tags.
Short description:
De korte beschrijving die je in WooCommerce ook kunt invullen bij het product.
Product content:
De volledige informatie over het product (dat wat je invult in de WordPress editor)
Product data tabs:
De tabbladen met extra informatie over dit product, die je zelf hebt ingevoerd.
Additional Information:
Een tabel met daarin extra informatie over je product, als je dit hebt ingevoerd.
Product related
Gerelateerde producten die je bij het product hebt ingevoerd.
Upsells
Laat de upsells zien die je bij het product hebt ingevoerd.
Goed om te weten: alleen de informatie die je hebt ingevuld in je WooCommerce omgeving worden getoond in het template. Je hoeft je dus niet druk te maken om producten waar je bepaalde informatie nog niet hebt gevuld. Als je bijvoorbeeld nog geen voorraad hebt ingesteld, maar de widget ‘Product Stock’ wel in je template plaatst, zie je dit niet terug op de productpagina.
Tip: JetWooBuilder
Wil je meer doen met WooCommerce en Elementor? Dan is de JetWooBuilder van Crocoblock een aanrader. Hiermee krijg je meer single product templates en extra widgets om je productpagina vorm te geven. Maar ook kun je check-out pagina’s, winkelmandjes en mijn accountpagina aanpassen.
Andere widgets toevoegen aan de productpagina
Daaronder zie je nog meer widgets voor WooCommerce staan. Deze widgets zijn niet specifiek alleen voor het maken van een single productpage, maar kun je in principe op alle pagina’s van je website toevoegen.
Verder kun je natuurlijk ook gewoon alle andere widgets gebruiken voor het aanpassen van je productpagina. Alles wat je op deze pagina plaatst komt bij AL je producten te staan (tenzij je de publicatie condities aanpast). Plaats dus alleen generieke content / widgets, zoals social media share buttons, contactbutton, informatie over je webshop, link naar faq of een inschrijfformulier voor je nieuwsbrief.
Op de website voor MisterKerstboom.nl zijn we nog een stapje verder gegaan. Op deze pagina kunnen klanten ook een hoogte selecteren of bomen vergelijken:
Hiervoor hebben we gebruik gemaakt van JetWooBuilder en JetEngine
Stap 3: Template publiceren
Als je klaar bent met productpagina WooCommerce aanpassen met Elementor, kun je het template gaan publiceren. Hiervoor heb je een aantal publicatieopties:
- Alle producten: template wordt toegepast op alle producten
- Categorie: stel het template alleen in voor een specifieke productcategorie in (kunnen er ook meerdere zijn, voeg dan nog een conditie toe)
- Child productcategorieën: stel het template alleen in voor een subcategorie
- Tag: pas het template toe voor producten die bepaalde tags hebben
- Producten By Author: template toepassen voor producten die door een bepaalde auteur zijn geplaatst.
Productpagina’s uitsluiten
Het is ook mogelijk om productpagina’s uit te sluiten. Klik op de button ‘Add condition’ en selecteer ‘Exclude’.
Met Elementor Pro kun je dus eenvoudig en zonder kennis van code de productpagina WooCommerce aanpassen. En dat is ideaal als je graag een andere lay-out wilt gebruiken. Check wel eerst even of je thema compatible is met Elementor Pro. Dit zie je vaak bij specificaties. Wij raden altijd aan om met Elementor te werken in combinatie met het gratis Hello thema.
Succes! (en vergeet je productpagina niet te optimaliseren voor mobiel!)
12 Responses
Dank voor deze waardevolle tips! 😀 Heeft me stap voor stap geholpen met het maken van m’n nieuwe betaalpagina. Heel erg fijn, dankjewel!
Fijn om te horen Liese! 🙂
Hallo Sanne,
Ik heb met gebruik van Elementor, een template gemaakt voor mijn productcategorieën. Nu wil ik deze aan mijn winkelpagina toevoegen. Hoe doe ik dat?
Alvast bedankt voor je reactie
Hoi Els,
Als je de winkelpagina ook hebt ingesteld met Elementor, kun je het template toevoegen aan die pagina.
In dit artikel lees je meer over het instellen van een winkelpagina –> https://www.sijweb.nl/elementor-woocommerce-wat-kun-je-ermee
Groetjes,
Sanne
Hallo Sanne,
Ik heb een vraag ik heb een website wordpress en werk met elementor maar wil daar ook een webshop bij in het menu met woocommerce hoe maak ik dit aan in het menu kom daar niet uit . hoop dat je mij kan helpen 🙂
Hoi,
Als je WooCommerce hebt geïnstalleerd, is er als het goed is automatisch een nieuwe ‘Winkel’ pagina toegevoegd bij je pagina’s. Deze pagina kun je dus toevoegen aan het menu en dan wordt daar de webshop getoond (ook als je deze hebt ingesteld met Elementor en op de juiste manier hebt gepubliceerd). Zie ook: https://www.sijweb.nl/elementor-woocommerce-wat-kun-je-ermee/
Groetjes,
Sanne
Is het ook mogelijk om een pagina te maken met producten die alleen zichtbaar is met een login? Eigenlijk een soort klantenportaal. De bedoeling is dat onze huidige klanten geautomatiseerd hun producten kunnen bestellen, waar ik ook hun kortingspercentage in kan voeren. Het moet dus geen achterliggende pagina worden voor consumenten.
Wie weet heb je een tip?
Hoi Esmee,
Ja dat is zeker mogelijk, maar dan heb je wel een aanvullende membership plugin nodig. WooCommerce heeft hiervoor zelf ook een plugin ontwikkeld, zie https://woocommerce.com/products/woocommerce-memberships/.
Groet,
Sanne
Hoi Sanne,
Super fijn deze tips! Ik heb gelijk even een snelle template gemaakt om te oefenen.
Bij het activeren zie ik alleen op een live site dat mijn product nu 2x wordt weergegeven? Is dat nog een aparte instelling die mis gaat?
groetjes
Kirsten
Hoi Kirsten,
Heb je een single template ingesteld en gepubliceerd voor je producten of heb je de productpagina zelf aangepast met Elementor? In dat laatste geval kan het zijn dat je product er dubbel in staat. Als je het single template wel goed hebt ingesteld, kan het liggen aan het thema waar je mee werkt. Probeer dan even van thema te wisselen (eerst back-up maken) om te kijken of dat het probleem oplost.
Groetjes,
Sanne
Hoi Sanne,
Is het ook mogelijk om het logo van het Menu Cart te wijzigen naar een eigen ontwerp? Ik heb nu nog alleen de widget van Elementor Pro.
Hoi Maikel,
Dit is vooralsnog niet mogelijk met Elementor Pro. PowerPack addon heeft wel een widget waarmee je een custom icoon kunt instellen. Hopelijk kun je daar mee verder. Succes!
Groetjes,
Sanne