WooCommerce integreren - de basis
WooCommerce integratie
Template override WordPress
Op een onlangs gepubliceerde case van Tussendoor voor All Window is te lezen dat Tussendoor de WooCommerce webwinkel volgens de standaard van WooCommerce heeft geïntegreerd. Dit is gebeurd via het template override system van WooCommerce.
Omdat er steeds meer vraag is naar WordPress in combinatie met WooCommerce, vooral voor de wat kleinere webwinkels, geef ik hieronder een aantal tips waarmee je vooral in de basis prima uit de voeten kunt.
WooCommerce Templates
Hier vind je de volledige template structuur van WooCommerce terecht, maar velen zullen niet al deze bestanden nodig hebben om de webwinkel naar tevredenheid te integreren en te zorgen dat deze past binnen de huisstijl van de website. Een aantal basis elementen hiervoor zijn dat in mijn ogen vaak wel en dat gaat dan om de volgende:
- Overzicht pagina producten (woocommerce/archive-product.php)
- Detail pagina (woocommerce/single-product.php)
- Winkelwagen (woocommerce/cart/cart.php)
- Afrekenscherm (woocommere/checkout/* (diverse bestanden))
De mappen die hierbij horen en de bestanden zijn rechtstreeks uit de WooCommerce plugin te halen en op die manier aan te passen. Het voordeel van het werken in WooCommerce template bestanden vanuit het eigen thema, is dat deze aanpassingen blijvend zijn. Ook na het updaten van WooCommerce zelf.
Afhandeling
Mocht je de integratie verder willen doorvoeren, dan kan het van belang zijn om de account pagina’s en de e-mails die verzonden worden vanuit WooCommerce ook te stijlen. Dit kan via de bestanden in de map "woocommerce/myaccount" voor de account pagina's, de specifieke bestanden zijn hierin terug te vinden. Mails die worden gebruikt bij de afhandeling zijn te vinden in de map "woocommerce/emails". Mocht je de bronbestanden uit de plugin halen dan staan deze niet in de map woocommerce, maar in de pluginfolder woocommerce/templates.
Code
De meest voorkomende code die gebruikt wordt voor het ophalen van gegevens, gekoppeld aan WooCommerce, is te vinden in de thema bestanden uit de plugin. Immers; daar wordt volgens de standaard ook alle waarde opgehaald die je beschikbaar hebt. Het klinkt misschien eenvoudig en logisch, maar spit die bestanden vooral eens door. Je komt op die manier alle code tegen die je nodig kunt hebben bij het inladen van die waardes op unieke plaatsen in je thema. Wel kan het zo zijn dat je op bepaalde momenten de functie nodig hebt om WordPress aan te geven dat je WooCommerce data wilt inlezen. Dit doe je op de volgende manier
global $product;Functions en hooks
Verder is er een enorme lijst met functies en hooks beschikbaar op de officiële WooCommerce site, waarmee je specifieke functies en mogelijkheden in- of juist uit kunt schakelen. Denk hierbij aan de breadcrumbs, filters, etc. Zo kun je op een eenvoudige manier gebruik blijven maken van de breadcrumbs die door de hele site al gebruikt worden en verschillen deze niet in het webwinkel gedeelte.
Meer over de integratie van WooCommerce functies binnen je thema-bestanden lees je hier.
Meer vragen? Interesse?
Heb je vraag naar specifieke WooCommerce oplossingen en/of functies? Hulp nodig bij het ontwikkelen of beschik je over een WordPress site en wil je een webwinkel integreren?
Neem dan contact met ons op. Je kunt ons een e-mail sturen of telefonisch contact opnemen.