WooCommerce child theme

Wanneer je met WordPress werkt hoor je vroeg of laat wel een keer het woord “Child Theme”. En als je het niet hoort kom je wellicht in de situatie dat je een child theme mist.

In dit artikel zal ik daarom vertellen wat een child theme is, waarom je het kunt gebruiken, hoe je een child theme kunt maken en de mogelijkheden om WooCommerce bestanden aan te passen in je child theme.

Wat is een child theme?

Een child theme is een speciaal thema dat de functionaliteiten en design van het thema overneemt dat je gebruikt voor je WooCommerce website.

Simpelweg maak je een soort kopie van het thema dat gekoppeld staat aan het originele thema.

Je hebt een child theme nodig om te voorkomen dat de wijzigingen die je wilt doorvoeren aan het thema verloren gaan bij een thema update.

Met behulp van een child theme kun je namelijk zorgeloos wijzigingen toevoegen aan het child theme en het originele thema up-to-date houden. Je hoeft dan niet steeds opnieuw alles te wijzigen in de code, wat anders wel het geval was.

Heeft het ook nadelen?

Alles heeft nadelen, dus ook een child theme. Gelukkig zijn het echter hele kleine nadelen waar je niet eens last van hoeft te hebben.

Zo is het een nadeel dat je voldoende kennis nodig hebt om wijzigingen aan te brengen in de code. Je hebt echter een child theme niet nodig wanneer je dit niet van plan bent, dus wat dat betreft merk je weinig van dit nadeel.

Een ander nadeel is dat je alles opnieuw moet instellen wanneer je een child theme maakt. Denk hierbij aan menu’s, thema-instellingen en dat soort dingen. Deze worden niet opgenomen in het child theme, omdat WordPress dit ziet als een ander thema. Het is daarom verstandig om direct bij het maken van je WooCommerce webshop een child theme te maken.

Tot slot het laatste nadeel. Het is het helaas bij sommige thema’s niet altijd mogelijk om alle bestanden in de code aan te passen. Het gaat dan eigenlijk altijd om bestanden die in een map staan van het originele thema.

Je zal hierdoor alsnog enkele originele bestanden moeten aanpassen indien je hier iets in wilt wijzigen. Gelukkig komt dit niet vaak voor. 🙂

Hoe je een child theme kunt maken

Een child theme maken of toevoegen aan je webshop kan op verschillende manieren. Vaak zit tegenwoordig bij premium WordPress thema’s standaard al een child theme om te uploaden naar je website.

Zo kun je een .zip bestand uploaden via WordPress of een losse map toevoegen via FTP aan de map (/wp-content/themes/).

Mocht dit echter niet het geval zijn bij het thema waar jij gebruik van maakt, dan kun je het handmatig aanmaken of een plugin het werk laten doen. In onderstaande video kun je bekijken hoe eenvoudig het is om een child theme aan te maken met behulp van de plugin One-Click Child Theme.

Zelf een child theme maken

Om zelf handmatig een child theme te maken van je thema hoef je op zich ook niet heel veel te doen. Het is een kwestie van een map en bestand aanmaken en plaatsen op de juiste locatie (/wp-content/themes/).

Ik er vanuit dat je weet hoe je een map kunt aanmaken op je computer ;-). Een bestand aanmaken is niet veel moeilijker. Zo kun je dit al doen in een programma als “kladblok”.

Open een tekstbewerker en vul onderstaande code in. Vervang uiteraard wel de informatie naar je eigen informatie.

/*
 Theme Name:   Naam van je child theme
 Theme URI:    http://jewebsitenaam.nl/
 Description:  Beschrijving van je thema
 Author:       Je naam
 Author URI:   http://jewebsitenaam.nl/
 Template:     Naam hoofdthema (belangrijk om juiste naam in te vullen)
 Version:      1.0.0
*/

/* =Vanaf hieronder kun je CSS plaatsen
-------------------------------------------------------------- */

Sla het bestand op als style.css en plaats dit in de map die je hebt aangemaakt.

De volgende stap is ervoor zorgen dat de styling van het originele thema moet worden overgenomen. Hiervoor kun je een nieuw bestand aanmaken om de volgende code in plaatsen:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

Sla het bestand op als functions.php en plaats het in de map die je hebt aangemaakt. Je hebt nu de twee bestanden waar het allemaal om draait. Je kunt nu de map via FTP uploaden in de map /wp-content/themes/. Weet je niet hoe dit moet, dan kun je er een .zip bestand van maken en deze uploaden via Weergave -> Thema’s -> Nieuwe toevoegen.

Eenmaal alles geüpload kun je naar “Weergave -> Thema’s” gaan om het child theme te activeren. Je zal dan zien dat je een kopie hebt van het originele thema. Alle wijzigingen die je in de toekomst toevoegt aan het style.css bestand (of ander bestand) zal effect hebben je WooCommerce website.

WooCommerce in je child theme

Naast dat je in een child theme aanpassingen kunt doen voor het thema waar je gebruik van maakt, kun je ook WooCommerce aanpassingen doorvoeren. In het child theme kun je namelijk alle template bestanden aanpassen van WooCommerce (bestanden in de map templates), waardoor je zelf ontzettend veel invloed krijgt.

Ideaal natuurlijk dat je niet de originele bestanden hoeft aan te passen van de plugin en dit elke update opnieuw zou moeten uitvoeren.

Hoe werkt WooCommerce in je child theme?

Wanneer je WooCommerce bestanden wilt overschrijven via je child theme moet je een map maken genaamd “woocommerce”. Deze map is voor alle WooCommerce template bestanden die je wilt aanpassen.

Het is echter ook weer niet dat je alle bestanden los in deze map kunt zetten. Je moet wel de structuur aanhouden die de WooCommerce plugin gebruikt. Wanneer je dus bijvoorbeeld iets wilt aanpassen in het bestand “/wp-content/plugins/woocommerce/templates/single-product/add-to-cart/variation.php”, dan zal je deze moeten plaatsen in de map “/woocommerce/single-product/add-to-cart/variation.php” van je child theme.