WooCommerce button kleur wijzigen

Weergave WooCommerce button wijzigen

''Hoe kan ik de WooCommerce button -voeg toe aan winkelwagen  (add to cart) - wijzigen in een andere kleur, ander lettertype, andere achtergrond enz?'' 

In dit artikel lees je hoe je dat via je theme kan (1) doen mits ondersteund, ofwel via CSS kan doen als je handig bent (2), of - en en dat is natuurlijk het makkelijkste - met een plugin kan doen (3).

1. Via instellingen van je theme

Meestal gebruikt WooCommerce de basisstijl (CSS) en dus ook kleuren van je theme, zodat je winkelweergave en dus ook je woocommere button gelijk in stijl is met je site. Bij de theme settings is bovendien vaak een mogelijkheid om kleuren en lettertypes in te stellen. Die instellingen worden dan ook overgenomen  door WooCommerce. Mocht je andere kleuren willen instellen specifiek en alleen  voor WooCommerce lees dan verder.

2. Via CSS

Zie je geen mogelijkheid om kleuren te wijzigen bij de theme settings of WordPress Customizer, dan kan het altijd nog met CSS. Als je iets weet van CSS is dit niet moeilijk. Dit zijn de twee selectors die je nodig hebt om de woocommerce button extra CSS te geven:

.add_to_cart_button

en:

.single_add_to_cart_button

Je voegt bijvoorbeeld dit toe aan je CSS file of het 'extra CSS' veld bij de WordPress customizer :


.add_to_cart_button {
background-color: green !important;
}


 

3. Met behulp van een plugin

Voor de meeste webwinkelbezitters is CSS al snel een brug te ver. Gelukkig verschijnen er zo nu en dan gratis plugins die hier een handje bij helpen.

De mogelijkheden van dit soort gratis plugins zijn vaak wel beperkt, maar daarom wel lekker simpel. Change Cart button Colors WooCommerce doet precies wat de titel al zegt en kan voor jou een uitkomst zijn als je de WooCommerce button van je webwinkel een ander kleurtje wil geven. En er kan meer, een ander lettertype, of grootte, dat kan ook. Wil je de buttons op de productpagina een andere kleur geven dan op de overzichtspagina van producten om ze extra op te laten vallen? Ook dat kan.

Change Cart button Colors WooCommerce

Een andere plugin die ongeveer hetzelfde doet is Woo Button Text. Met deze plugin kan je onder andere  de kleur als de tekst wijzigen van je WooCommerce button.

Een kleine waarschuwing:  de genoemde plugins hebben (nog) niet veel gebruikers. Dat betekent vaak dat het de vraag is hoe lang zo'n plugin goed blijft werken met WooCommerce versies in de toekomst. Het is in ieder geval het proberen waard.

Als deze tip bij jou niet lukt dan kan dit heel veel oorzaken hebben. AllesWP  kan je daarom niet snel vertellen waarom het bij jou niet lukt. Het kan zijn dat je een plugin hebt die lastig doet, of er kan iets anders met je website aan de hand zijn. Dat kunnen we uitzoeken. Als je dat wilt, ga dan naar de helpdesk, maar houdt er rekening mee dat er dan kosten aan verbonden zijn.

Leave a Reply

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

AllesWP draait op WordPress en gebuikt cookies voor juiste werking van de site. Ga je hiermee akkoord? Klik dan op Accepteren. Indien je niet akKoord gaat zullen sommige onderdelen mogelijk niet goed werken. Meer informatie

Cookies



Zie ook de link naar ons privacybeleid, te vinden rechtsonder op elke pagina van deze website.
Deze website draait op WordPress, een CMS (content management systeem) dat is ontwikkeld door Automattic. Tijdens je bezoek maakt WordPress gebruik van een cookie om te controleren of cookies door je browser worden ondersteunt. Deze cookies worden niet gebruikt voor analyses en zijn puur functioneel. WordPress voldoet aan de richtlijnen uit de AVG (GDPR). We wijzen je derhalve ook op de algemene voorwaarden van Automattic.

Deze website maakt gebruik van Google Analytics, een webanalyse-service die wordt aangeboden door Google Inc. Google Analytics maakt gebruik van cookies te analyseren hoe gebruikers de site gebruiken. Deze gegevens worden geanonimiseerd opgeslagen. Google Inc. voldoet aan de richtlijnen uit de AVG (GDPR). We wijzen je derhalve ook op de algemene voorwaarden van Google Inc.

Waneer je een van onze contactformulieren invult, wordt deze informatie opgeslagen in ons helpdesksysteem genaamd ZenDesk, een veilig online systeem voor supporthandeling dat voldoet aan de AVG (GDPR_.. Vanuit ZenDesk kunnen onze supportmedewerkers snel antwoord geven op de door jouw gestelde vragen.

Deze website maakt gebruik van Google Tag Manager, een webanalyse-service die wordt aangeboden door Google Inc. Google maakt gebruik van cookies te analyseren hoe gebruikers de site gebruiken. Deze gegevens worden geanonimiseerd opgeslagen. Google Inc. voldoet aan de richtlijnen uit de AVG (GDPR). We wijzen je derhalve ook op de algemene voorwaarden van Google Inc.

Deze website maakt gebruik van Zopim Webchat, een chat applicatie die wordt aangeboden door Zopim.com en maakt gebruik van cookies te analyseren hoe gebruikers de site gebruiken. Deze gegevens worden geanonimiseerd opgeslagen. Zopim voldoet aan de richtlijnen uit de AVG (GDPR). We wijzen je derhalve ook op de algemene voorwaarden van Zopim.

Deze website maakt gebruik van HotJar, een webanalyse-service die wordt aangeboden door Hotjar.com Hotjar maakt gebruik van cookies te analyseren hoe gebruikers de site gebruiken. Deze gegevens worden geanonimiseerd opgeslagen. Hotjar voldoet aan de richtlijnen uit de AVG (GDPR). We wijzen je derhalve ook op de algemene voorwaarden van Hotjar.

Sluiten