Hoe Maak je een WooCommerce Child-thema aan

Stel je voor dat je een WooCommerce winkel operationeel hebt.

Als je het officiële Storefront thema 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.

De beste oplossing is vaak het creëren van een WooCommerce child-thema. 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ële risico’s voor je thema en winkel.

In dit artikel bekijken we hoe je jouw WooCommerce winkel kunt vormgeven met thema’s. Vervolgens laten we je zien hoe je in slechts vijf stappen je eigen child-thema kunt maken. Begin nu!

Een Snelle Blik Op WooCommerce Thema’s

Met de lancering van de WooCommerce plugin in 2011, werd WordPress het meest populaire e-commerce platform. WooCommerce wordt momenteel gebruikt om 25% van alle online winkels aan te drijven, waardoor het 6% populairder is dan zijn dichtstbijzijnde concurrent.

Een van de elementen die WooCommerce zo succesvol heeft gemaakt, is hoe eenvoudig het is om met minimale inspanning een unieke winkel te creëren. Dit alleen verklaart echter niet de populariteit van het platform.

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.

WooCommerce is compatibel met bijna alle WordPress-thema’s. De meeste zijn echter niet geoptimaliseerd om de unieke functies van de plugin te kunnen hanteren.

Gelukkig is het Storefront-thema een uitstekende optie. Dit is het officiële 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:

Dit minimalistische ontwerp maakt Storefront ook een ideale basis voor aanpassing. Hier zijn child-thema’s handig, die we hierna zullen bekijken.

Waarom Je Een WooCommerce Child-Thema Zou Willen Maken

Als je veel tijd hebt besteed aan het lezen over WordPress, ben je waarschijnlijk al eens child-thema’s tegengekomen.

Kort gezegd begint een child-thema als een kopie van een ander thema, dat bekend staat als het ‘parent-thema’. 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.

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.

Als het gaat om WooCommerce, zijn de meeste child-thema’s gebaseerd op Storefront:

Je kunt verschillende child-thema’s downloaden van de officiële WooCommerce winkel of van andere sites zoals ThemeForest. Het is echter mogelijk dat geen van de bestaande child-thema’s aansluit bij jouw behoeften, of je wilt misschien gewoon een unieke uitstraling creëren. Bovendien wil je misschien geen geld uitgeven aan een premium thema als je denkt dat je het zelf beter kunt doen.

In een bericht op de officiële WooCommerce-blog bespreken de ontwikkelaars van de plugin de meest voorkomende motivatie om een child-thema te gebruiken voor je online winkel:

“Het doel met onze eigen Storefront child-thema’s is om een winkelervaring te leveren die perfect is voor jouw specifieke niche. Na het installeren van Galleria, en zonder enige instellingen aan te raken, heb je direct een winkel die geschikt is voor het verkopen van high-end modeartikelen. Met ProShop, kun je snel een stijlvolle sportwinkel opzetten.”

Het daadwerkelijke proces van een child-thema maken 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!

Hoe Maak Je Een WooCommerce Child-Thema (In 5 Stappen)

Nu gaan we je uitleggen hoe je een WooCommerce child-thema kunt maken. In dit voorbeeld creëren we een basis thema dat Storefront als ouder gebruikt, hoewel je elk thema als basis kunt gebruiken.

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 voorbeeld van een Storefront child-thema downloaden en installeren.

Ten slotte raden we ten zeerste aan een back-up van je site te maken voordat je verder gaat. Dit houdt je winkel veilig als er iets misgaat tijdens het ontwikkelproces.

Het is ook slim om een stagingomgeving te gebruiken voor het creëren en aanpassen van je child-thema. Nadat je deze beveiligingsmaatregelen hebt genomen, kun je doorgaan naar de eerste stap!

Stap 1: Maak Een Map Voor Je WooCommerce Child-Thema

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 via SFTP. Je kunt dit doen met een gratis applicatie zoals FileZilla.

Zodra je het programma operationeel hebt, log je in op je site met je hostinggegevens. Vervolgens moet je navigeren naar de wp-content/themes/ map. Hier zijn de thema’s van je site geïnstalleerd.

Alles wat je hoeft te doen is een nieuwe map binnen deze aanmaken:

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 “storefront-child”.

Het eerste dat je moet maken en in deze map plaatsen, is een eenvoudig tekstbestand genaamd functions.php. Dit is een belangrijk kernbestand dat helpt bepalen hoe je site eruitziet en functioneert. De meeste child-thema’s kunnen echter de functies gebruiken die in het bestand van het parent-thema staan en hebben niet hun eigen bestand nodig.

Om die reden kan dit bestand nu leeg blijven. Maak gewoon een tekstbestand met de naam functions.php, en bewaar het in de map van je child-thema:

Je thema is nu bijna klaar om geactiveerd en gebruikt te worden. Eerst is er echter een stylesheet nodig.

Stap 2: Maak Het Stylesheet Van Je Child-Thema

Het volgende bestand dat je moet maken, is het Cascading Style Sheet (CSS) van je thema. Dit bestand definieert de stijlen die worden toegepast op de pagina’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.

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.

Voor nu hoef je alleen het CSS-bestand aan te maken. Om dit te doen, voeg nogmaals een tekstbestand toe aan je wp-content/themes/storefront-child map (of welke naam je ook hebt gebruikt voor je eigen child-thema). Deze moet style.css heten:

Je moet ook wat basisinformatie toevoegen. Kopieer en plak de volgende snippet in je nieuwe style.css bestand:

/*
Theme Name: Storefront Child
Theme URI: http://example.com/storefront-child/
Description: Mijn eerste WooCommerce child-thema
Author: Jouw Naam
Author URI: http://example.com
Version: 1.0.0
License: GNU General Public License v2 of later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

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.

Stap 3: Configureer Het Child-Thema Om De Stijlen Van Het Parent-Thema Over Te Nemen

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 — en CSS kan inderdaad lastig zijn — maar in essentie zal het child-thema altijd de stijlen van het parent-thema gebruiken, tenzij het specifiek een vervanging bevat.

Bijvoorbeeld, laten we zeggen dat je parent-thema de stijl voor h1 kopteksten definieert als 20px en rood. Als het style.css 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.

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.

Voeg eenvoudig de volgende snippet toe na de informatie die je eerder in het style.css bestand hebt geplakt:

Sjabloon: storefront

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.

Stap 4: Activeer Het Child-Thema

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.

Ga naar Appearance > Themes in je WordPress-dashboard, en je zult zien dat je child-thema al geïnstalleerd is:

Selecteer Activeer om het het huidige thema van je site te maken. Je kunt het nu voorvertonen vanaf de frontend:

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.

Stap 5: Voeg Stijlen Toe Aan Het Child-Thema

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.

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:

Open het style.css-bestand van je child-thema opnieuw en voeg de volgende code toe na de laatste */ in de kop van het bestand:

a.button,
button.button,
input.button,
#review_form #submit {
background: pink;
color: red;
}

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:

Je kunt ook wijzigingen aanbrengen in de sjabloonbestanden van je thema. Je hoeft alleen maar het sjabloonbestand dat je wilt wijzigen, zoals header.php, te kopiëren van je parent-thema naar je child-thema map.

Je moet echter ook enkele wijzigingen aanbrengen om aan te geven welke functie WordPress gebruikt om de sjabloonbestanden te refereren. Dit vereist het gebruik van de get_stylesheet_directory(); functie in plaats van get_template_directory() om naar je sjablonen te verwijzen.

Om meer te leren over hoe je dit kunt doen, kun je alles lezen over de templates die WooCommerce gebruikt.

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 CSS-kennis op te frissen om het meeste uit je styling te halen!

Maak een WooCommerce Child Thema

WooCommerce maakt het gemakkelijk om een online winkel te creëren, en je kunt zelfs het uiterlijk veranderen met het Storefront-thema of een van de vele aangepaste thema’s.

Echter, je hoeft niet te vertrouwen op de creativiteit van anderen. Het creëren 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.

Veel verkoopplezier!