För att ändra färgen på WooCommerce-knapparna måste vi ändra eller ersätta standard style.css-fil med knappar. För att göra detta måste vi lägga till en anpassad CSS-kod till vår barnets WordPress-tema.

Det finns två sätt att göra detta:

  • Lägg till en anpassad CSS i filtypen style.css för barntema
  • Använd några plugins för att injicera anpassad CSS-kod på dina webbsidor.

Steg 1: Installera plugin på Wordpress Enkel anpassade CSS och aktivera den

Vi kommer att använda en Wordpress plugin för att injicera CSS-koden på sidorna i en WooCommerce Online Shop. Du kan ladda ner plugin: Enkel Anpassad CSS

Du kan läsa vår handledning på installation och aktivering av WordPress-plugin.

Efter att plugin har aktiverats kommer en ny undermeny att läggas till i menyn Apparence :

Anpassad CSS Menu Wordpress plugin

Åtkomst till detta avsnitt tar dig till ett gränssnitt med en textruta där du kan ange anpassad CSS-kod.

Gränssnittswordpress plugin Simple anpassad CSS

Lägg följande CSS i textrutan och klicka sedan på " Uppdatera anpassat CSS".

.woocommerce #content input.button.alt: hover, .woocommerce #respond ingångs # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: hover, .woocommerce-sida #content input.button.alt: hover, .woocommerce-input #respond # submit.alt: hover, .woocommerce-sida a.button.alt: hover, .woocommerce-sida-knappen. button.alt: hover, .woocommerce-sida input.button.alt: hover {background: röd betydande; bakgrundsfärg: röd viktig; Färg: Vit viktigt; text-shadow: transparent viktigt; box-shadow: none; border-färg: #ca0606 viktigt; } .woocommerce #content Input.button: hover, .woocommerce #respond ingångs # skicka: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce-sida # lycklig input.button: hover, .woocommerce-input #respond # skicka: hover, .woocommerce-sida a.button: hover, .woocommerce-sida button.button: hover, .woocommerce-sida input.button: hover {background : röd viktig; bakgrundsfärg: röd viktig; Färg: Vit viktigt; text-shadow: transparent viktigt; box-shadow: none; border-färg: #ca0606 viktigt; } .woocommerce #content Input.button, .woocommerce #respond ingångs # lämna, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-sida #content input.button, .woocommerce-sida # # skicka ingång svarar .woocommerce-sida a.button, .woocommerce-sida button.button, .woocommerce-sida input.button {background: röd betydande; Färg: Vit viktigt; text-shadow: transparent viktigt; border-färg: #ca0606 viktigt; } .woocommerce #content Input.button.alt: hover, .woocommerce #respond ingångs # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-sida #content input.button.alt: hover, .woocommerce-input #respond # submit.alt: hover, .woocommerce-sida a.button.alt: hover, .woocommerce-sida knappen .button.alt: hover, .woocommerce-sida input.button.alt: hover {background: röd betydande; box-shadow: none; text-shadow: transparent viktigt; Färg: Vit viktigt; border-färg: #ca0606 viktigt; }

Du kan nu komma åt din onlinebutik, du kommer att märka att knapparna faktiskt har ändrat färger.

För att anpassa färgen på knapparna så att du äntligen får det utseende du vill ha,

Ersätt egendom " backgroud: red viktigt! Av en valfri färg. Uppdatera koder och få tillgång till din webbutik igen. Med hjälp av den stil vi just har gett dig kan du faktiskt ändra knapparnas struktur.

Med lite forskning kommer du att kunna skapa unika knappar med en stil som matchar din Wordpress tema (speciellt om den senare inte är kompatibel med WooCommerce).

lägg i varukorg knappen Wordpress

För följande exempel kan du använda följande CSS-kod.

.woocommerce #content input.button, .woocommerce #respond ingångs # in, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce sidan #content input.button, .woocommerce-sida #respond # in input, .woocommerce sidan a.button, .woocommerce sidan button.button, .woocommerce sidan input.button {background-color: #6fba26; padding: 10px; positioner: relativ; font-family: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; färg: #fff; background-image: linjär-gradient (botten, rgb (100,170,30) 0% rgb (129,212,51) 100%); box-shadow: infälld 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; border-radius: 5px; } .woocommerce #content input.button.alt: hover, .woocommerce #respond input # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-sida #content input.button.alt: hover, .woocommerce-input #respond # submit.alt: hover, .woocommerce-sida a.button.alt: hover, .woocommerce-sida knappen .button.alt: hover, .woocommerce-sida input.button.alt: hover {top: 7px; background-image: linjär-gradient (botten, rgb (100,170,30) 100% rgb (129,212,51) 0%); box-shadow: infälld 0px 1px 0px #0D496F, inlägg 0px -1px 0px #0D496F; färg: #156785; text-shadow: 0px 1px 1px RGBA (255,255,255,0.3); bakgrund: rgb (44,160,202); }

För dig som vill optimera prestandan i deras onlinebutik oavsett vad gäller konvertering eller försäljning av produkter,

Vi erbjuder också 3 premium WordPress-plugins designade för denna uppgift.

1. WooCommerce återställa övergiven kundvagn

dina kunder fyller ofta sina korgar och lämnar dem: tack till WooCommerce Återgivet i kundvagn du kommer att kunna kontakta dem, påminna dem om vad de har köpt och bjuda in dem att slutföra sina handlingar.

Återställ övergiven vagn för woocommerce

Ställ in tidsintervallet mellan när en vagn överges och när en personlig påminnelse skickas till din kund med en direktlänk till inköpssidan så att de kan se vad de var på poäng att köpa.

Ladda ner | demo | webbhotell

2.WooCommerce Dölj pris & Lägg i varukorg Knapp Plugin

Plugin-programmet WooCommerce Hide Prices tillåter köpmän att skapa flera regler för att dölja priser eller dölja knappen "lägg till i kundvagn" från icke-inloggade kunder eller användare som har vissa behörigheter till din e-handelswebbplats.

Woocommerce dölj pris lägg till i kundvagn knappen plugin dölja efter användarroller

Du kan dölja priset och "lägg till i kundvagn"-knappen på vissa produkter eller i specifika kategorier. Du kan ersätta dem med anpassad text eller en knapp som tar dem till  kontakt~~POS=TRUNC formulär~~POS=HEADCOMP. Du kan skapa så många regler som automatiskt döljer priset och " Lägg till i panikr ”beroende på vad du vill ha.

Ladda ner | demo | webbhotell

3. WooCommerce Valuta Switcher

Detta plugin låter dig växla produktpriser från en valuta till en annan i realtid.Woocommerce valutaomkopplare

Detta är särskilt viktigt inom e-handel eftersom det riktar sig till hela världen. Detta plugin säkerställer att oavsett var dina kunder finns, kommer de alltid att kunna beställa från din onlinebutik.

Ladda ner | demo | webbhotell

Rekommenderade resurser

Upptäck andra rekommenderade resurser som hjälper dig optimera prestandan i din onlinebutik. 

Slutsats

Här är ! Det här är allt för den här handledningen tillägnad knappanpassning Lägg i varukorgen från WooCommerce. Tveka inte att dela den med dina vänner på din sociala nätverk föredragna. 

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.

Men under tiden berätta om din commentaires och förslag i det dedikerade avsnittet.