{"id":69388,"date":"2022-11-03T07:00:36","date_gmt":"2022-11-03T14:00:36","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=69388"},"modified":"2025-05-26T09:25:21","modified_gmt":"2025-05-26T16:25:21","slug":"hoe-maak-je-een-woocommerce-child-thema-aan-nl","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/","title":{"rendered":"Hoe Maak je een WooCommerce Child-thema aan"},"content":{"rendered":"\n<p>Stel je voor dat je een <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce winkel<\/a> operationeel hebt.<\/p>\n\n\n<p>Als je het offici\u00eble <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">Storefront thema<\/a> gebruikt, kan het er zelfs heel professioneel uitzien. Je wilt echter misschien nog steeds het uiterlijk van je WooCommerce-winkel aanpassen om aan je visie te voldoen.<\/p>\n\n\n<p>De beste oplossing is vaak het cre\u00ebren van een WooCommerce <a href=\"https:\/\/www.dreamhost.com\/blog\/why-you-need-a-child-theme\/\" target=\"_blank\" rel=\"noopener\">child-thema<\/a>. Dat komt omdat een child-thema je in staat stelt om wijzigingen aan te brengen in je originele thema zonder het rechtstreeks te bewerken. Het vereenvoudigt het proces van het aanpassen van het uiterlijk van je winkel en elimineert potenti\u00eble risico&#8217;s voor je thema en winkel.<\/p>\n\n\n<p>In dit artikel bekijken we hoe je jouw WooCommerce winkel kunt vormgeven met thema&#8217;s. Vervolgens laten we je zien hoe je in slechts vijf stappen je eigen child-thema kunt maken. Begin nu!<\/p>\n\n\n<h2 id=\"h-a-quick-look-at-woocommerce-themes\" class=\"wp-block-heading\"><b>Een Snelle Blik Op WooCommerce Thema&#8217;s<\/b><\/h2>\n\n\n<p>Met de lancering van <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">de WooCommerce plugin<\/a> in 2011, werd WordPress het meest populaire e-commerce platform. WooCommerce wordt momenteel gebruikt om <a href=\"https:\/\/trends.builtwith.com\/shop\" target=\"_blank\" rel=\"noopener\">25% van alle online winkels<\/a> aan te drijven, waardoor het 6% populairder is dan zijn dichtstbijzijnde concurrent.<\/p>\n\n\n<p><style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style><\/p>\n\n\n<div class=\"embed-container\"><iframe data-src=\"https:\/\/www.youtube.com\/embed\/2TVJi7IpwxA\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe><\/div>\n\n\n<p>Een van de elementen die WooCommerce zo succesvol heeft gemaakt, is hoe eenvoudig het is om met minimale inspanning een unieke winkel te cre\u00ebren. Dit alleen verklaart echter niet de populariteit van het platform.<\/p>\n\n\n<p>Een andere grote factor in het succes van WooCommerce is de bijna oneindige aanpassingsmogelijkheden die het biedt. Wanneer dit gecombineerd wordt met het juiste thema, heb je toegang tot veel ontwerpvrijheid.<\/p>\n\n\n<p>WooCommerce is compatibel met bijna alle <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-find-wp-themes\/\" target=\"_blank\" rel=\"noopener\">WordPress-thema&#8217;s<\/a>. De meeste zijn echter niet geoptimaliseerd om de unieke functies van de plugin te kunnen hanteren.<\/p>\n\n\n<p>Gelukkig is <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">het Storefront-thema<\/a> een uitstekende optie. Dit is het offici\u00eble WooCommerce-thema, specifiek gebouwd om te integreren met de plugin. Het ziet er meteen aantrekkelijk uit, met een eenvoudig en schoon ontwerp dat de focus legt op je producten:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"765\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme.jpg\" alt=\"het WooCommerce Storefront thema\" class=\"wp-image-37882 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-300x191.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-1024x653.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-768x490.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme-600x383.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme-750x478.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-100x64.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/765;\" \/><\/figure><\/div>\n\n<p>Dit minimalistische ontwerp maakt Storefront ook een ideale basis voor aanpassing. Hier zijn child-thema\u2019s handig, die we hierna zullen bekijken.<\/p>\n\n\n<h2 id=\"h-why-you-might-want-to-create-a-woocommerce-child-theme\" class=\"wp-block-heading\"><b>Waarom Je Een WooCommerce Child-Thema Zou Willen Maken<\/b><\/h2>\n\n\n<p>Als je veel tijd hebt besteed aan het lezen over WordPress, ben je waarschijnlijk al eens child-thema\u2019s tegengekomen.<\/p>\n\n\n<p>Kort gezegd begint een child-thema als een kopie van een ander thema, dat bekend staat als het &#8216;parent-thema&#8217;. Je kunt vervolgens wijzigingen aanbrengen in het child-thema en deze testen zonder het parent-thema direct te bewerken. Dit is belangrijk omdat het aanpassen van het oorspronkelijke thema onherstelbare fouten kan veroorzaken en zelfs schade aan je website kan toebrengen.<\/p>\n\n\n<p>Je kunt een child-thema maken omdat je een ander thema als basis wilt gebruiken, in plaats van helemaal opnieuw een nieuw thema te moeten bouwen. Je wilt misschien ook alleen wat kleine wijzigingen aanbrengen aan de branding of de algehele esthetiek van een thema. De mogelijkheden zijn echt grenzeloos, afhankelijk van hoeveel tijd je bereid bent te besteden aan het project.<\/p>\n\n\n<p>Als het gaat om WooCommerce, zijn de meeste child-thema&#8217;s gebaseerd op Storefront:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1286\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store.jpg\" alt=\"Opties voor Storefront child-thema's in de offici\u00eble WooCommerce-winkel\" class=\"wp-image-37883 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-300x193.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-1024x659.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-768x494.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-1536x988.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store-600x386.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store-750x482.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-100x64.jpg 100w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1286;\" \/><\/figure><\/div>\n\n<p>Je kunt verschillende child-thema&#8217;s downloaden van <a href=\"https:\/\/woocommerce.com\/product-category\/themes\/storefront-child-theme-themes\/\" target=\"_blank\" rel=\"noopener\">de offici\u00eble WooCommerce winkel<\/a> of van andere <a href=\"https:\/\/themeforest.net\/category\/wordpress\/ecommerce\/woocommerce\" target=\"_blank\" rel=\"noopener\">sites zoals ThemeForest<\/a>. Het is echter mogelijk dat geen van de bestaande child-thema&#8217;s aansluit bij jouw behoeften, of je wilt misschien gewoon een unieke uitstraling cre\u00ebren. Bovendien wil je misschien geen geld uitgeven aan een premium thema als je denkt dat je het zelf beter kunt doen.<\/p>\n\n\n<p>In <a href=\"https:\/\/woocommerce.com\/2015\/07\/why-child-themes-matter\/\" target=\"_blank\" rel=\"noopener\">een bericht op de offici\u00eble WooCommerce-blog<\/a> bespreken de ontwikkelaars van de plugin de meest voorkomende motivatie om een child-thema te gebruiken voor je online winkel:<\/p>\n\n\n<p>\u201cHet doel met onze eigen Storefront child-thema\u2019s is om een winkelervaring te leveren die perfect is voor jouw specifieke niche. Na het installeren van <a href=\"https:\/\/woocommerce.com\/products\/galleria\/\" target=\"_blank\" rel=\"noopener\">Galleria<\/a>, en zonder enige instellingen aan te raken, heb je direct een winkel die geschikt is voor het verkopen van high-end modeartikelen. Met <a href=\"https:\/\/woocommerce.com\/products\/proshop\/\" target=\"_blank\" rel=\"noopener\">ProShop<\/a>, kun je snel een stijlvolle sportwinkel opzetten.\u201d<\/p>\n\n\n<p>Het daadwerkelijke proces van <a href=\"https:\/\/www.dreamhost.com\/blog\/install-wordpress-child-theme\/\" target=\"_blank\" rel=\"noopener\">een child-thema maken<\/a> is hetzelfde, of je nu specifiek voor WooCommerce of voor een algemenere WordPress-site een thema maakt. Je moet echter wel het doel van je winkel in gedachten houden terwijl je je child-thema aanpast. Een e-commerce site vereist immers een andere ontwerpfilosofie dan een blog. Laten we eens kijken hoe dit proces er in de praktijk uitziet!<\/p>\n\n\n<h2 id=\"h-how-to-create-a-woocommerce-child-theme-in-5-steps\" class=\"wp-block-heading\"><b>Hoe Maak Je Een WooCommerce Child-Thema (In 5 Stappen)<\/b><\/h2>\n\n\n<p>Nu gaan we je uitleggen hoe je een WooCommerce child-thema kunt maken. In dit voorbeeld cre\u00ebren we een basis thema dat Storefront als ouder gebruikt, hoewel je elk thema als basis kunt gebruiken.<\/p>\n\n\n<p>We laten je zien hoe het proces werkt als je vanaf het begin begint. Als je echter enkele van deze stappen wilt overslaan en direct je site wilt aanpassen, kun je ook een <a href=\"https:\/\/github.com\/stuartduff\/storefront-child-theme\" target=\"_blank\" rel=\"noopener\">voorbeeld van een Storefront child-thema<\/a> downloaden en installeren.<\/p>\n\n\n<p>Ten slotte raden we <a href=\"https:\/\/www.dreamhost.com\/blog\/back-up-wordpress-website\/\" target=\"_blank\" rel=\"noopener\">ten zeerste aan een back-up van je site te maken<\/a> voordat je verder gaat. Dit houdt je winkel veilig als er iets misgaat tijdens het ontwikkelproces.<\/p>\n\n\n<p>Het is ook slim om <a href=\"https:\/\/www.dreamhost.com\/blog\/website-staging-beginners-guide\/\" target=\"_blank\" rel=\"noopener\">een stagingomgeving te gebruiken<\/a> voor het cre\u00ebren en aanpassen van je child-thema. Nadat je deze beveiligingsmaatregelen hebt genomen, kun je doorgaan naar de eerste stap!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-make-a-folder-for-your-woocommerce-child-theme\"><b>Stap 1: Maak Een Map Voor Je WooCommerce Child-Thema<\/b><\/h3>\n\n\n<p>Het eerste dat je moet doen, is de map aanmaken die je thema zal bevatten. Als je het child-thema rechtstreeks aan een bestaande site toevoegt, is de beste manier om dit te doen <a href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/115000675027\" target=\"_blank\" rel=\"noopener\">via SFTP<\/a>. Je kunt dit doen met een gratis applicatie zoals <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener\">FileZilla<\/a>.<\/p>\n\n\n<p>Zodra je het programma operationeel hebt, log je in op je site met je hostinggegevens. Vervolgens moet je navigeren naar de <i>wp-content\/themes\/<\/i> map. Hier zijn de thema&#8217;s van je site ge\u00efnstalleerd.<\/p>\n\n\n<p>Alles wat je hoeft te doen is een nieuwe map binnen deze aanmaken:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1086\" height=\"488\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp.png\" alt=\"de WordPress-themamap in FTP-client\" class=\"wp-image-37886 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp.png.webp 1086w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-300x135.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-1024x460.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-768x345.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp-600x270.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp-750x337.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-100x45.png 100w\" data-sizes=\"(max-width: 1086px) 100vw, 1086px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1086px; --smush-placeholder-aspect-ratio: 1086\/488;\" \/><\/figure><\/div>\n\n<p>Wanneer je een child-thema maakt, is het het beste om het een naam te geven die de parent reflecteert. Bijvoorbeeld, we maken een child-thema voor Storefront, dus we noemen onze map &#8220;storefront-child&#8221;.<\/p>\n\n\n<p>Het eerste dat je moet maken en in deze map plaatsen, is een eenvoudig tekstbestand genaamd <a href=\"https:\/\/www.dreamhost.com\/blog\/guide-to-wp-functions\/\" target=\"_blank\" rel=\"noopener\"><i>functions.php<\/i><\/a>. Dit is een belangrijk kernbestand dat helpt bepalen hoe je site eruitziet en functioneert. De meeste <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\" target=\"_blank\" rel=\"noopener\">child-thema\u2019s<\/a> kunnen echter de functies gebruiken die in het bestand van het parent-thema staan en hebben niet hun eigen bestand nodig.<\/p>\n\n\n<p>Om die reden kan dit bestand nu leeg blijven. Maak gewoon een tekstbestand met de naam <i>functions.php<\/i>, en bewaar het in de map van je child-thema:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1108\" height=\"564\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client.png\" alt=\"Locatie van WordPress child-thema in FTP-client\" class=\"wp-image-37884 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client.png.webp 1108w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-300x153.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-1024x521.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-768x391.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client-600x305.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client-750x382.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-100x51.png 100w\" data-sizes=\"(max-width: 1108px) 100vw, 1108px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1108px; --smush-placeholder-aspect-ratio: 1108\/564;\" \/><\/figure><\/div>\n\n<p>Je thema is nu bijna klaar om geactiveerd en gebruikt te worden. Eerst is er echter een stylesheet nodig.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-create-your-child-theme-s-stylesheet\"><b>Stap 2: Maak Het Stylesheet Van Je Child-Thema<\/b><\/h3>\n\n\n<p>Het volgende bestand dat je moet maken, is het <a href=\"https:\/\/wordpress.org\/support\/article\/css\/\" target=\"_blank\" rel=\"noopener\">Cascading Style Sheet (CSS)<\/a> van je thema. Dit bestand definieert de stijlen die worden toegepast op de pagina&#8217;s en inhoud van je site. Met andere woorden, het stelt je in staat het uiterlijk van individuele elementen op je website te specificeren. Wanneer mensen het hebben over het bijwerken van stijlen, verwijzen ze meestal naar het bijwerken van een CSS-bestand van de site.<\/p>\n\n\n<p>Je parent-thema bevat al een stylesheet, maar de CSS van een child-thema kan worden gebruikt om die stijlen te overschrijven. We zullen later bekijken hoe dit precies werkt.<\/p>\n\n\n<p>Voor nu hoef je alleen het CSS-bestand aan te maken. Om dit te doen, voeg nogmaals een tekstbestand toe aan je <i>wp-content\/themes\/storefront-child<\/i> map (of welke naam je ook hebt gebruikt voor je eigen child-thema). Deze moet <i>style.css<\/i> heten:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"864\" height=\"450\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme.png\" alt=\"Locatie van WordPress child-thema in FTP-client\" class=\"wp-image-37885 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme.png.webp 864w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-300x156.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-768x400.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-600x313.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-750x391.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-100x52.png 100w\" data-sizes=\"(max-width: 864px) 100vw, 864px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 864px; --smush-placeholder-aspect-ratio: 864\/450;\" \/><\/figure><\/div>\n\n<p>Je moet ook wat basisinformatie toevoegen. Kopieer en plak de volgende snippet in je nieuwe <i>style.css<\/i> bestand:<\/p>\n\n\n<pre class=\"wp-block-preformatted\">\/*\nTheme Name: Storefront Child\nTheme URI: http:\/\/example.com\/storefront-child\/\nDescription: Mijn eerste WooCommerce child-thema\nAuthor: Jouw Naam\nAuthor URI: http:\/\/example.com\nVersion: 1.0.0\nLicense: GNU General Public License v2 of later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/pre>\n\n\n<p>Dit zijn de details over je thema die je ziet wanneer je het bekijkt in een themadirectory of in je WordPress-dashboard. Voel je vrij om de tijdelijke gegevens te vervangen door informatie die specifieker is voor jou en je thema.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-configure-the-child-theme-to-inherit-the-parent-theme-s-styles\"><b>Stap 3: Configureer Het Child-Thema Om De Stijlen Van Het Parent-Thema Over Te Nemen<\/b><\/h3>\n\n\n<p>Zoals we al hebben vermeld, wil je dat je child-thema de standaardstijlen van het parent-thema gebruikt. Je zult echter ook de stijlen moeten overschrijven die je wilt veranderen. Dit klinkt misschien ingewikkeld \u2014 en <a href=\"https:\/\/www.dreamhost.com\/blog\/why-you-should-still-learn-css\/\" target=\"_blank\" rel=\"noopener\">CSS kan inderdaad lastig zijn<\/a> \u2014 maar in essentie zal het child-thema altijd de stijlen van het parent-thema gebruiken, tenzij het specifiek een vervanging bevat.<\/p>\n\n\n<p>Bijvoorbeeld, laten we zeggen dat je parent-thema de stijl voor h1 kopteksten definieert als 20px en rood. Als het <i>style.css<\/i> bestand van het child-thema geen vermelding voor H1 kopteksten bevat, dan wordt de stijl van het parent toegepast op alle H1 inhoud. Echter, als we een H1 stijl zouden toevoegen aan het stylesheet van het child dat deze kopteksten definieert als 18px en blauw, zal het de richtlijnen van het parent overschrijven.<\/p>\n\n\n<p>Het toevoegen van deze functionaliteit aan je child-thema is eigenlijk heel eenvoudig. Je hoeft alleen maar te verwijzen naar je parent-thema in de stylesheet van je child.<\/p>\n\n\n<p>Voeg eenvoudig de volgende snippet toe na de informatie die je eerder in het <i>style.css<\/i> bestand hebt geplakt:<\/p>\n\n\n<pre class=\"wp-block-preformatted\">Sjabloon: storefront<\/pre>\n\n\n<p>Deze code definieert het parent-thema en zorgt ervoor dat je child-thema de stijlen van Storefront gebruikt waar je geen vervanging hebt gespecificeerd. Als je een child maakt voor een ander thema, kun je simpelweg de naam van de map van dat thema gebruiken.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h3 class=\"wp-block-heading\" id=\"h-step-4-activate-the-child-theme\"><b>Stap 4: Activeer Het Child-Thema<\/b><\/h3>\n\n\n<p>Op dit moment is je child-thema technisch gezien klaar. Het is geconfigureerd om op je site te werken, dus laten we het activeren en kijken hoe het eruit ziet.<\/p>\n\n\n<p>Ga naar <i>Appearance &gt; Themes<\/i> in je WordPress-dashboard, en je zult zien dat je child-thema al ge\u00efnstalleerd is:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"408\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme.jpg\" alt=\"je WooCommerce child-thema activeren in WordPress\" class=\"wp-image-37881 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-300x102.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-1024x348.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-768x261.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-600x204.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-750x255.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-100x34.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/408;\" \/><\/figure><\/div>\n\n<p>Selecteer <i>Activeer<\/i> om het het huidige thema van je site te maken. Je kunt het nu voorvertonen vanaf de frontend:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"630\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store.jpg\" alt=\"je WooCommerce child-thema bewerken\" class=\"wp-image-37879 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-300x158.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-1024x538.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-768x403.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store-600x315.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store-750x394.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-100x53.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/630;\" \/><\/figure><\/div>\n\n<p>Zoals je kunt zien, ziet het er precies hetzelfde uit als het originele thema op dit moment. Terwijl het child-thema actief is, haalt het alleen de stijlen uit je parent-thema. Om het uiterlijk aan te passen, moet je creatief zijn met de stylesheet van je child-thema.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-5-add-styles-to-the-child-theme\"><b>Stap 5: Voeg Stijlen Toe Aan Het Child-Thema<\/b><\/h3>\n\n\n<p>Eindelijk is het tijd om je child-thema te stylen. Precies hoe je dit doet, hangt af van jou, je creativiteit en hoe je wilt dat je winkel eruitziet. Laten we echter een voorbeeld doornemen van wat je kunt doen.<\/p>\n\n\n<p>Om te illustreren hoe het bewerken van je child-thema werkt, zullen we het uiterlijk van de knoppen van onze winkel veranderen. Op dit moment zijn ze grijs met zwarte tekst, maar we kunnen deze stijl bijwerken om ze meer te laten opvallen:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"530\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview.jpg\" alt=\"je WooCommerce child-thema bewerken\" class=\"wp-image-37880 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-1024x452.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-768x339.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-600x265.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-750x331.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-100x44.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/530;\" \/><\/figure><\/div>\n\n<p>Open het <i>style.css<\/i>-bestand van je child-thema opnieuw en voeg de volgende code toe na de laatste <i>*\/<\/i> in de kop van het bestand:<\/p>\n\n\n<pre class=\"wp-block-preformatted\">a.button,\nbutton.button,\ninput.button,\n#review_form #submit {\nbackground: pink;\ncolor: red;\n}<\/pre>\n\n\n<p>Als je je bestand opslaat en nu bekijkt op de frontend, zie je de verandering in actie. De knoppen zullen nu felroze zijn met rode tekst:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"532\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme.jpg\" alt=\"je WooCommerce child-thema bewerken\" class=\"wp-image-37878 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-1024x454.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-768x340.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme-600x266.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme-750x333.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-100x44.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/532;\" \/><\/figure><\/div>\n\n<p>Je kunt ook wijzigingen aanbrengen in de <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-templates-template-parts\/\" target=\"_blank\" rel=\"noopener\">sjabloonbestanden van je thema<\/a>. Je hoeft alleen maar het sjabloonbestand dat je wilt wijzigen, zoals <i>header.php<\/i>, te kopi\u00ebren van je parent-thema naar je child-thema map.<\/p>\n\n\n<p>Je moet echter ook enkele wijzigingen aanbrengen om aan te geven welke functie WordPress gebruikt om <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#adding-template-files\" target=\"_blank\" rel=\"noopener\">de sjabloonbestanden te refereren<\/a>. Dit vereist het gebruik van de <span style=\"font-family: 'courier new', courier, monospace;\">get_stylesheet_directory();<\/span> functie in plaats van <span style=\"font-family: 'courier new', courier, monospace;\">get_template_directory()<\/span> om naar je sjablonen te verwijzen.<\/p>\n\n\n<p>Om meer te leren over hoe je dit kunt doen, kun je alles lezen over de <a href=\"https:\/\/docs.woocommerce.com\/document\/template-structure\/\" target=\"_blank\" rel=\"noopener\">templates die WooCommerce gebruikt<\/a>.<\/p>\n\n\n<p>Op dit moment heb je een WooCommerce child-thema gemaakt! Natuurlijk is er nog veel meer dat je kunt doen, maar je weet nu hoe je kunt beginnen met prutsen. We raden je aan om je <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" target=\"_blank\" rel=\"noopener\">CSS-kennis op te frissen<\/a> om het meeste uit je styling te halen!<\/p>\n\n\n<h2 id=\"h-create-a-woocommerce-child-theme\" class=\"wp-block-heading\"><b>Maak een WooCommerce Child Thema<\/b><\/h2>\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce<\/a> maakt het gemakkelijk om een online winkel te cre\u00ebren, en je kunt zelfs het uiterlijk veranderen met <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">het Storefront-thema<\/a> of een van de vele <a href=\"https:\/\/themeforest.net\/category\/wordpress\/ecommerce\/woocommerce\" target=\"_blank\" rel=\"noopener\">aangepaste thema&#8217;s<\/a>.<\/p>\n\n\n<p>Echter, je hoeft niet te vertrouwen op de creativiteit van anderen. Het cre\u00ebren van je eigen WooCommerce child-thema is niet zo moeilijk als je misschien denkt, en het geeft je bijna volledige controle over het uiterlijk en de functionaliteit van je winkel.<\/p>\n\n\n<p>Veel verkoopplezier!<\/p>\n\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Jouw Winkel Verdient WooCommerce Hosting\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Verkoop alles, overal, altijd op het grootste e-commerceplatform ter wereld.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/wordpress\/woocommerce-hosting\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Bekijk Pakketten                    <\/a>\n\n  <\/div>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Laten we zeggen dat je een WooCommerce-winkel operationeel hebt. Als je het offici\u00eble Storefront-thema gebruikt, ziet het er misschien zelfs heel professioneel uit. Je wilt echter misschien nog steeds het uiterlijk van je WooCommerce-winkel aanpassen om aan jouw visie te voldoen. De beste oplossing is vaak het cre\u00ebren van een WooCommerce child-thema. Dat komt omdat een child [\u2026]<\/p>\n","protected":false},"author":1062,"featured_media":37875,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"WooCommerce child-thema\u2019s stellen je in staat om je WordPress-webwinkel aan te passen door een kopie van een parent-thema te maken. Leer meer!","toc_headlines":"[[\"h-a-quick-look-at-woocommerce-themes\",\"Een Snelle Blik Op WooCommerce Thema's\"],[\"h-why-you-might-want-to-create-a-woocommerce-child-theme\",\"Waarom Je Een WooCommerce Child-Thema Zou Willen Maken\"],[\"h-how-to-create-a-woocommerce-child-theme-in-5-steps\",\"Hoe Maak Je Een WooCommerce Child-Thema (In 5 Stappen)\"],[\"h-create-a-woocommerce-child-theme\",\"Maak een WooCommerce Child Thema\"]]","hide_toc":false,"footnotes":""},"categories":[14932,14960,14946],"tags":[],"class_list":["post-69388","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials-nl","category-ecommerce-nl","category-wordpress-nl"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Hoe Maak je een WooCommerce Child-thema aan - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"WooCommerce child-thema\u2019s stellen je in staat om je WordPress-webwinkel aan te passen door een kopie van een parent-thema te maken. Leer meer!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hoe Maak je een WooCommerce Child-thema aan\" \/>\n<meta property=\"og:description\" content=\"WooCommerce child-thema\u2019s stellen je in staat om je WordPress-webwinkel aan te passen door een kopie van een parent-thema te maken. Leer meer!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-03T14:00:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T16:25:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hoe Maak je een WooCommerce Child-thema aan - DreamHost Blog","description":"WooCommerce child-thema\u2019s stellen je in staat om je WordPress-webwinkel aan te passen door een kopie van een parent-thema te maken. Leer meer!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/","og_locale":"en_US","og_type":"article","og_title":"Hoe Maak je een WooCommerce Child-thema aan","og_description":"WooCommerce child-thema\u2019s stellen je in staat om je WordPress-webwinkel aan te passen door een kopie van een parent-thema te maken. Leer meer!","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-11-03T14:00:36+00:00","article_modified_time":"2025-05-26T16:25:21+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Hoe Maak je een WooCommerce Child-thema aan","datePublished":"2022-11-03T14:00:36+00:00","dateModified":"2025-05-26T16:25:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/"},"wordCount":1996,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","articleSection":["Handleidingen","Online Verkopen","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/","name":"Hoe Maak je een WooCommerce Child-thema aan - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","datePublished":"2022-11-03T14:00:36+00:00","dateModified":"2025-05-26T16:25:21+00:00","description":"WooCommerce child-thema\u2019s stellen je in staat om je WordPress-webwinkel aan te passen door een kopie van een parent-thema te maken. Leer meer!","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","width":900,"height":598,"caption":"how to create a WooCommerce child theme"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-maak-je-een-woocommerce-child-thema-aan-nl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Hoe Maak je een WooCommerce Child-thema aan"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"nl","translations":{"nl":69388,"es":37888,"en":37872,"pl":52883,"de":54934,"uk":54949,"ru":55033,"pt":55065,"it":67883,"fr":69356},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=69388"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69388\/revisions"}],"predecessor-version":[{"id":69392,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69388\/revisions\/69392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/37875"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=69388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=69388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=69388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}