Om de kleur van WooCommerce-knoppen te wijzigen, moeten we het standaard style.css-bestand met knoppen wijzigen of vervangen. Om dit te doen, moeten we een aangepaste CSS-code aan onze het WordPress-thema van het kind.

U kunt dit op twee manieren doen:

• Voeg een aangepaste CSS toe aan het onderliggende thema style.css bestand
• Gebruik enkele plug-ins om aangepaste CSS-code in uw webpagina's te injecteren.

Stap 1: Installeer de plugin in WordPress eenvoudig aangepast CSS en activeren

We zullen een gebruiken WordPress Plugin om de CSS-code in de pagina's van a . te injecteren WooCommerce online winkel. U kunt de plug-in downloaden: Eenvoudige Custom CSS

U kunt onze tutorial lezen op installatie en activering van de WordPress-plug-in.

Na het activeren van de plug-in, wordt een nieuw submenu aan het menu toegevoegd Apparence :

Als u deze sectie opent, gaat u naar een interface met een tekstvak waarin u aangepaste CSS-code kunt invoeren.

Plaats de volgende CSS in het tekstvak en klik vervolgens op ' Aangepaste CSS".

.woocommerce #content input.button.alt: hover, .woocommerce #respond ingang # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: hover, .woocommerce-pagina #content input.button.alt: hover, .woocommerce-pagina input #respond # submit.alt: hover, .woocommerce-pagina a.button.alt: hover, .woocommerce-pagina knop. button.alt: hover, .woocommerce-pagina input.button.alt: hover {background: red significant; background-color: red belangrijk; ! Kleur: wit van belang; text-shadow: transparant belangrijk; box-shadow: none; border-color: #ca0606 belangrijk; } .woocommerce #content Input.button: hover, .woocommerce #respond ingang # in te dienen: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce-pagina # happy input.button: hover, .woocommerce-pagina input #respond # in te dienen: hover, .woocommerce-pagina a.button: hover, .woocommerce-pagina button.button: hover, .woocommerce-pagina input.button: hover {background : rode belangrijk; background-color: red belangrijk; ! Kleur: wit van belang; text-shadow: transparant belangrijk; box-shadow: none; border-color: #ca0606 belangrijk; } .woocommerce #content Input.button, .woocommerce #respond ingang # in te dienen, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-pagina #content input.button, .woocommerce-pagina # # indienen ingang reageert, .woocommerce-pagina a.button, .woocommerce-pagina button.button, .woocommerce-pagina input.button {background: red significant; ! Kleur: wit van belang; text-shadow: transparant belangrijk; border-color: #ca0606 belangrijk; } .woocommerce #content Input.button.alt: hover, .woocommerce #respond ingang # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-pagina #content input.button.alt: hover, .woocommerce-pagina input #respond # submit.alt: hover, .woocommerce-pagina a.button.alt: hover, .woocommerce-pagina button .button.alt: hover, .woocommerce-pagina input.button.alt: hover {background: red significant; box-shadow: none; text-shadow: transparant belangrijk; ! Kleur: wit van belang; border-color: #ca0606 belangrijk; }

U hebt nu toegang tot uw online winkel, u zult merken dat de knoppen daadwerkelijk van kleur zijn veranderd.

Om de kleur van de knoppen aan te passen om eindelijk de look te krijgen die u wilt,

Vervang eigenschap ' backgroud: red belangrijk! Door een kleur naar keuze. Werk de codes bij en ga opnieuw naar uw online winkel. Door gebruik te maken van de stijl die we u zojuist hebben gegeven, kunt u de structuur van de knoppen volledig veranderen.

Met een beetje onderzoek kun je unieke knoppen maken met een stijl die bij je past WordPress theme (vooral als de laatste niet compatibel is met WooCommerce).

Voor het volgende voorbeeld kunt u de volgende CSS-code gebruiken.

.woocommerce #content input.button, .woocommerce #respond ingang # in te dienen, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-pagina #content input.button, .woocommerce-pagina #respond # indienen input, .woocommerce-pagina a.button, .woocommerce-pagina button.button, .woocommerce-pagina input.button {background-color: #6fba26; padding: 10px; position: relative; font-family: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; color: # fff; background-image: lineaire-gradiënt (bodem, rgb (100,170,30) 0% rgb (129,212,51) 100%); box-shadow: inzet 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; border-radius: 5px; } .woocommerce #content input.button.alt: hover, .woocommerce #respond ingang # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-pagina #content input.button.alt: hover, .woocommerce-pagina input #respond # submit.alt: hover, .woocommerce-pagina a.button.alt: hover, .woocommerce-pagina button .button.alt: hover, .woocommerce-pagina input.button.alt: hover {top: 7px; background-image: lineaire-gradiënt (bodem, rgb (100,170,30) 100% rgb (129,212,51) 0%); box-shadow: inzet 0px 1px 0px #0D496F, bijvoegsel 0px -1px 0px #0D496F; kleur: #156785; text-shadow: 0px 1px 1px RGBA (255,255,255,0.3); background: rgb (44,160,202); }

Voor degenen die de prestaties van hun online winkel willen optimaliseren, of het nu gaat om conversie of verkoop van producten,

We bieden ook 3 premium WordPress-plug-ins die voor deze taak zijn ontworpen.

1. WooCommerce herstel verlaten winkelwagen

uw klanten vullen vaak hun manden en laten ze achter: dankzij WooCommerce Recover Verlaten winkelwagen u kunt contact met hen opnemen, hen herinneren aan wat ze hebben gekocht en hen uitnodigen om hun acties te voltooien.

Stel het tijdsinterval in tussen wanneer een winkelwagentje wordt verlaten en wanneer een gepersonaliseerde herinneringsmail naar uw klant wordt gestuurd met een directe link naar de aankooppagina zodat ze kunnen zien waar ze zich bevonden punt om te kopen.

Downloaden | demonstratie | web hosting

2. WooCommerce Hide Price & Add to Cart Button Plugin

Met de plug-in WooCommerce Hide Prices kunnen handelaars meerdere regels maken om prijzen te verbergen of de knop "toevoegen aan winkelwagen" te verbergen voor niet-ingelogde klanten of gebruikers die bepaalde toegangsrechten hebben tot uw e-commerce website.

U kunt de prijs en de "toevoegen aan winkelwagen"-knop op bepaalde producten of in specifieke categorieën verbergen. U kunt ze vervangen door aangepaste tekst of een knop waarmee ze naar het  Contact formulier. U kunt zoveel regels maken die de prijs automatisch verbergen en de " Voeg toe aan panier ”afhankelijk van wat je wilt.

Downloaden | demonstratie | web hosting

3. WooCommerce Valuta Switcher

Met deze plug-in kunt u productprijzen in realtime van de ene valuta naar de andere omwisselen.

Dit is vooral belangrijk bij e-commerce, aangezien het gericht is op de hele wereld. Deze plug-in zorgt ervoor dat, waar uw klanten zich ook bevinden, ze altijd kunnen bestellen in uw online winkel.

Downloaden | demonstratie | web hosting

Aanbevolen bronnen

Ontdek andere aanbevolen bronnen die u kunnen helpen de prestaties van uw online winkel optimaliseren. 

• 50 WooCommerce plugins om uw online winkel te verbeteren
• 9 WordPress-plug-ins om een ​​partnerprogramma te maken
• 9 WooCommerce-plug-ins om de kenmerken van uw variabele producten te verbeteren
• 5 WordPress plug-ins om CSS op uw blog visueel te bewerken

Conclusie

Alstublieft ! Dat is alles voor deze tutorial gewijd aan het aanpassen van knoppen Toevoegen aan winkelwagen van WooCommerce. Aarzel niet om het met je vrienden te delen op je sociale mediakanalen de voorkeur. 

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

Maar vertel ons in de tussentijd over uw commentaires en suggesties in de speciale sectie.

...