CSS voor WooCommerce leert je hoe je aanpassingen kunt maken aan deze uitstekende en voor velen onmisbare WordPress plug-in. Het is het meest gebruikte verkoop- en winkelwagensysteem voor WordPress websites.
WooCommerce hosted en de selfhosted plug-in
WooCommerce heeft twee versies; een versie die door hen wordt gehost, en een plug-in voor je eigen WordPress website (dus self hosted door jou). De CSS-code hier is voor de WooCommerce plug-in.
WooCommerce hosted en de selfhosted plug-in
WooCommerce heeft twee versies; een versie die door hen wordt gehost, en een plug-in voor je eigen WordPress website (dus self hosted door jou). De CSS-code hier is voor de WooCommerce plug-in.
WooCommerce aanpassen aan je branche
Hoewel de WooCommerce plug-in heel flexibel is, is het technisch onmogelijk om de WooCommerce aan te passen aan elke branche, qua functionaliteit en uiterlijk met de standaardinstellingen. Daarom heb je bijna altijd CSS nodig om de gewenste wijzigingen aan te brengen.
Het verkopen van een fysiek product is bijvoorbeeld heel anders dan een boekingssysteem voor cursussen. Daarom zijn er twee methoden om de functionaliteit van WooCommerce aan te passen; plug-ins en CSS. Plug-ins hebben twee nadelen.
Het verkopen van een fysiek product is bijvoorbeeld heel anders dan een boekingssysteem voor cursussen. Daarom zijn er twee methoden om de functionaliteit van WooCommerce aan te passen; plug-ins en CSS. Plug-ins hebben twee nadelen.
- Het is niet raadzaam is om een hele plug-in te installeren voor slechts één simpele aanpassing; dan is een beetje CSS vaak de enige juiste oplossing.
- Er bestaat geen plug-in voor elke aanpassing.
- Niet elke plug-in is compatibel met elk thema of elke andere plug-in die je ook gebruikt. CSS code heeft dat probleem minder; het is ‘puur’.
CSS en WooCommerce: perfect samen
CSS is de ideale manier om WooCommerce elementen eenvoudig aan te passen en zelfs helemaal te verwijderen. Met de CSS-code kun je WooCommerce beter laten aansluiten bij de lay-out van je website, en voor je doelgroep.
Let op: met verwijderen bedoelen we uiteraard niet dat ze daadwerkelijk verwijderd zijn; deze onderdelen worden alleen verborgen voor de bezoeker van uw website.
Let op: met verwijderen bedoelen we uiteraard niet dat ze daadwerkelijk verwijderd zijn; deze onderdelen worden alleen verborgen voor de bezoeker van uw website.
WooCommerce-aanpassingen
Hier zijn enkele praktische toepassingen van CSS voor WooCommerce. We laten je zien hoe je de code plaatst.
Let op: de WooCommerce plug-in maakt veelvuldig gebruik van cache. Dit betekent dat het soms een uur of langer kan duren voordat de wijzigingen zichtbaar zijn. Tijdelijk cache uitschakelen is vaak het beste. Zorg ook dat je de cache plug-in leegt nadat je deze weer ingeschakeld hebt, anders laat je cache de site zien van vóór de aanpassingen.
Let op: de WooCommerce plug-in maakt veelvuldig gebruik van cache. Dit betekent dat het soms een uur of langer kan duren voordat de wijzigingen zichtbaar zijn. Tijdelijk cache uitschakelen is vaak het beste. Zorg ook dat je de cache plug-in leegt nadat je deze weer ingeschakeld hebt, anders laat je cache de site zien van vóór de aanpassingen.
CSS om het WooCommerce vergrootglas (loep) op productpagina’s te verbergen
WooCommerce toont standaard een vergrootglas pictogram naast de foto’s van elk product of elke dienst.
Deze CSS-code zorgt ervoor dat het vergrootglas icoon niet meer wordt weergegeven in WooCommerce. Je kunt de code in de Extra CSS van je thema plaatsen.
/* CSS WooCommerce - verbergt vergrootglas op WooCommerce product pagina's */
.woocommerce-product-gallery__trigger
{ display:none !important;
}CSS WooCommerce – verbergt alle afbeeldingen op productpagina’s
WooCommerce toont standaard foto’s van elk product of elke dienst. Met deze CSS-code kun je ervoor zorgen dat deze WooCommerce foto’s niet meer worden getoond. Je kunt de code in de Extra CSS van je thema plaatsen.
/* CSS WooCommerce - Hides images of Woo products*/
.wp-post-image {
display:none !important;
}CSS voor als je de ‘Toevoegen’ knoppen in de ‘Quick view’ wilt verbergen
WooCommerce toont standaard ‘add’-knoppen in de quick view. Met deze CSS-code zorg je ervoor dat deze niet meer worden getoond. Je kunt de code in de Extra CSS van je thema plaatsen.
/* CSS WooCommerce - verberg de'add' buttons */
.ajax_add_to_cart {
display: none !important;
}CSS om WooCommerce gerelateerde producten te verbergen
Standaard toont WooCommerce gerelateerde producten onderaan producten of in de winkelwagen. Door deze CSS-code te gebruiken, kun je ervoor zorgen dat deze niet meer worden getoond. Plaats de CSS-code in de Extra CSS van het thema.
/* CSS WooCommerce - hide related products */
.related.products {
display: none;
}Verken altijd eerst de mogelijkheden van het thema
Veel thema’s, zoals Kadence thema (pro), hebben al meerdere opties om WooCommerce naar wens in te stellen. Zodra je die aanpassingen hebt gedaan, kun je zien wat je mist en CSS code gebruiken om de gewenste veranderingen aan te brengen. Dit is belangrijk omdat het de ‘user experience’ van de bezoeker is, die bepaalt of je webwinkel een succes wordt. Welk thema je ook gebruikt, betaalde versies (pro of premium) van een thema hebben vaak veel meer opties voor WooCommerce aanpassingen. Zelfs het Kadence thema, dat zoveel te bieden heeft in de gratis versie, heeft aanzienlijk meer opties in de pro versie. Een thema als GeneratePress is ook veel completer in de pro versie. We raden daarom echt de Pro versie van een thema aan, vooral als je WooCommerce gebruikt.
Plaatsen van CSS code
We gaan ervan uit dat je al weet hoe je CSS plaatst. Als je dat nog niet weet, kijk dan hier:
