For at ændre farven på WooCommerce-knapper skal vi ændre eller erstatte standard style.css-fil med knapper. For at gøre dette skal vi tilføje en brugerdefineret CSS-kode til vores børns WordPress tema.

Der er to måder at gøre dette på:

• Føj en brugerdefineret CSS til filen temaet style.css
• Brug nogle plugins til at injicere tilpasset CSS-kode på dine websider.

Trin 1: Installer plugin på WordPress Enkel Brugerdefineret CSS og aktivere det

Vi vil bruge en WordPress plugin at injicere CSS-koden på siderne i en WooCommerce Online Shop. Du kan downloade plugin: Simple Brugerdefineret CSS

Du kan læse vores tutorial på installation og aktivering af WordPress-plugin.

Efter aktivering af pluginet tilføjes en ny undermenu til menuen apparence :

Adgang til dette afsnit fører dig til en grænseflade med et tekstfelt, hvor du kan indtaste brugerdefineret CSS-kode.

Læg følgende CSS i tekstfeltet, og klik derefter på " Opdater tilpasset CSS".

.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-side #content input.button.alt: hover, .woocommerce-side input #respond # submit.alt: hover, .woocommerce-side a.button.alt: hover, .woocommerce-side-knappen. button.alt: hover, .woocommerce-side input.button.alt: hover {background: red betydelig; background-color: red vigtigt; ! Farve: hvid vigtigt; tekst-skygge: transparent vigtigt; box-shadow: none; border-color:! #ca0606 vigtigt; } .woocommerce #content Input.button: hover, .woocommerce #respond input # indsende: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce-side # lykkelig input.button: hover, .woocommerce-side input #respond # indsende: hover, .woocommerce-side a.button: hover, .woocommerce-side button.button: hover, .woocommerce-side input.button: hover {background :! rød vigtig; background-color: red vigtigt; ! Farve: hvid vigtigt; tekst-skygge: transparent vigtigt; box-shadow: none; border-color:! #ca0606 vigtigt; } .woocommerce #content Input.button, .woocommerce #respond input # indsende, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-side #content input.button, .woocommerce-side # # indsende input reagerer, .woocommerce-side a.button, .woocommerce-side button.button, .woocommerce-side input.button {baggrund: rød betydelig; ! Farve: hvid vigtigt; tekst-skygge: transparent vigtigt; border-color:! #ca0606 vigtigt; } .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-side #content input.button.alt: hover, .woocommerce-side input #respond # submit.alt: hover, .woocommerce-side a.button.alt: hover, .woocommerce-side knap .button.alt: hover, .woocommerce-side input.button.alt: hover {background: red betydelig; box-shadow: none; tekst-skygge: transparent vigtigt; ! Farve: hvid vigtigt; border-color:! #ca0606 vigtigt; }

Du kan nu få adgang til din online butik, du vil bemærke, at knapperne faktisk har ændret farver.

For at tilpasse farven på knapperne for endelig at få det udseende, du ønsker,

Erstat ejendom " backgroud: rød vigtigt! Af en farve efter eget valg. Opdater koder og få adgang til din onlinebutik igen. Faktisk ved hjælp af den styling, vi lige har leveret dig, vil du være i stand til at ændre strukturen på knapperne fuldstændigt.

Med lidt research vil du være i stand til at skabe unikke knapper med en stil, der matcher din WordPress tema (især hvis sidstnævnte ikke er kompatibel med WooCommerce).

I det følgende eksempel kan du bruge følgende CSS-kode.

.woocommerce #content input.button, .woocommerce #respond input # indsende, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-side #content input.button, .woocommerce-side #respond # indsende input, .woocommerce-side a.button, .woocommerce-side button.button, .woocommerce-side input.button {background-color: #6fba26; padding: 10px; position: relative; font-familie: 'Open Sans', sans-serif; font-size: 12px; tekst-dekoration: ingen; farve: #fff; baggrundsbilde: lineær gradient (bund, rgb (100,170,30) 0%, rgb (129,212,51) 100%); box-shadow: indsat 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; grænse-radius: 5px; } .woocommerce #content input.button.alt: svæve, .woocommerce #respond input # submit.alt: svæve, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-side #content input.button.alt: hover, .woocommerce-side input #respond # submit.alt: hover, .woocommerce-side a.button.alt: hover, .woocommerce-side-knap .button.alt: svinge, .woocommerce-side input.button.alt: svinge {top: 7px; background-image: lineær-gradient (bund, rgb (100,170,30) 100% rgb (129,212,51) 0%); box-shadow: indsat 0px 1px 0px #0D496F, indsat 0px -1px 0px #0D496F; farve: #156785; tekstskygge: 0px 1px 1px rgba (255,255,255,0.3); baggrund: rgb (xnumx); }

For dem, der ønsker at optimere ydelsen af ​​deres online butik, hvad enten det drejer sig om konvertering eller salg af produkter,

Vi tilbyder også 3 premium WordPress-plugins designet til denne opgave.

1. WooCommerce Recover Abandoned Cart

dine kunder fylder ofte deres kurve og forlader dem: tak til WooCommerce Recover Abandoned indkøbskurven vil du være i stand til at kontakte dem, minde dem om, hvad de har købt og invitere dem til at fuldføre deres handlinger.

Indstil tidsintervallet mellem, hvornår en indkøbskurv opgives, og når en personlig påmindelses-e-mail sendes til din kunde, der indeholder et direkte link til siden med køb for at se, hvad de var på punkt at købe.

Downloade | demo | Web-hosting

2. WooCommerce Skjul pris & tilføj til kurv Button Plugin

WooCommerce Hide Prices-pluginet giver handlende mulighed for at oprette flere regler for at skjule priser eller skjule knappen "tilføj til indkøbskurv" fra ikke-loggede kunder eller brugere, der har visse adgangsrettigheder til dit e-handelswebsted.

Du kan skjule prisen og knappen "Læg ​​i kurv" på bestemte produkter eller i bestemte kategorier. Du kan erstatte dem med tilpasset tekst eller en knap, der fører dem til  Kontaktformular. Du kan oprette så mange regler, der automatisk skjuler prisen og " Tilføj til panier ”afhængigt af hvad du vil have.

Downloade | demo | Web-hosting

3. WooCommerce Valuta Switcher

Dette plugin giver dig mulighed for at skifte produktpriser fra en valuta til en anden i realtid.

Dette er især vigtigt inden for e-handel, fordi det er rettet mod hele verden. Dette plugin sikrer, at uanset hvor dine kunder er placeret, vil de altid være i stand til at bestille fra din onlinebutik.

Downloade | demo | Web-hosting

Anbefalede ressourcer

Find andre anbefalede ressourcer, der kan hjælpe dig optimer ydelsen af ​​din online butik. 

• 50 WooCommerce plugins til at forbedre din online butik
• 9 WordPress-plugins til at oprette et tilknyttet program
• 9 WooCommerce-plugins for at forbedre attributterne for dine variable produkter
• 5 WordPress plugins til visuelt redigere CSS på din blog

Konklusion

Her er ! Det er alt til denne tutorial dedikeret til tilpasning af knapper Læg i kurv fra WooCommerce. Tøv ikke med at dele det med dine venner på din sociale netværk foretrukket. 

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse.

Men i mellemtiden, fortæl os om din kommentarer og forslag i det dedikerede afsnit.

...