WooCommerce integreren - de basis

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.

Templates

Via de link hierboven kom je op 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 files))

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/template-files.

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 vragen en/of interesse?

Heb je vraag naar specifieke WooCommerce oplossingen en/of functies? Hulp nodig bij het ontwikkelen of beschikt u over een WordPress website en wulf u ook een webwinkel integreren? Neem dan via onderstaande formulier contact met ons op en wij bespreken graag de mogelijkheden met u. [iphorm id="8" name="Blog pagina"]