For å endre fargen på WooCommerce-knappene, må vi endre eller erstatte standard style.css-knappefilen. For å gjøre dette må vi legge til en tilpasset CSS-kode til vår barnets WordPress-tema.

Det er to måter å gjøre dette på:

• Legg til en tilpasset CSS til filen tema.css for barnet
• Bruk noen plugins for å injisere tilpasset CSS-kode på websidene dine.

Trinn 1: Installer plugin på WordPress Simple Custom CSS og aktivere den

Vi vil bruke en WordPress Plugin å injisere CSS-koden på sidene til en WooCommerce Online Shop. Du kan laste ned plugin: Enkelt Custom CSS

Du kan lese veiledningen vår på installasjon og aktivering av WordPress-plugin.

Etter at plugin er aktivert, vil en ny undermeny legges til i menyen Apparence :

Å få tilgang til denne delen fører deg til et grensesnitt med en tekstboks der du kan legge inn tilpasset CSS-kode.

Sett følgende CSS i tekstboksen, og klikk deretter på " Oppdater tilpasset CSS".

.woocommerce #content input.button.alt: hover, .woocommerce #respond inngang # 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-input #respond # submit.alt: hover, .woocommerce-side a.button.alt: hover, .woocommerce-side-knappen. button.alt: hover, .woocommerce-side input.button.alt: hover {background: rød betydelig; background-color: red viktig; ! Farge: hvit viktig; text-shadow: gjennomsiktig viktig; box-shadow: none; border-color: #ca0606 viktig; } .woocommerce #content Input.button: hover, .woocommerce #respond inngangs # sende: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce-side # glad input.button: hover, .woocommerce-input #respond # sender: hover, .woocommerce-side a.button: hover, .woocommerce-side button.button: hover, .woocommerce-side input.button: hover {background : rød viktig; background-color: red viktig; ! Farge: hvit viktig; text-shadow: gjennomsiktig viktig; box-shadow: none; border-color: #ca0606 viktig; } .woocommerce #content Input.button, .woocommerce #respond inngangs # sende inn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-side #content input.button, .woocommerce-side # # sende innspill reagerer, .woocommerce-side a.button, .woocommerce-side button.button, .woocommerce-side input.button {background: rød betydelig; ! Farge: hvit viktig; text-shadow: gjennomsiktig viktig; border-color: #ca0606 viktig; } .woocommerce #content Input.button.alt: hover, .woocommerce #respond inngang # 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-input #respond # submit.alt: hover, .woocommerce-side a.button.alt: hover, .woocommerce-side-knappen .button.alt: hover, .woocommerce-side input.button.alt: hover {background: rød betydelig; box-shadow: none; text-shadow: gjennomsiktig viktig; ! Farge: hvit viktig; border-color: #ca0606 viktig; }

Du kan nå få tilgang til nettbutikken din, du vil merke at knappene faktisk har endret farger.

For å tilpasse fargen på knappene for å endelig få det utseendet du vil ha,

Erstatt eiendom " backgroud: rød viktig! Av en farge etter eget valg. Oppdater kodene og få tilgang til nettbutikken din igjen. Ved å bruke stylingen vi nettopp har gitt deg, vil du faktisk kunne endre strukturen på knappene.

Med litt research, vil du kunne lage unike knapper med en stil som matcher din WordPress tema (spesielt hvis sistnevnte ikke er kompatibel med WooCommerce).

For det følgende eksemplet kan du bruke følgende CSS-kode.

.woocommerce #content input.button, .woocommerce #respond inngangs # sende, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-side #content input.button, .woocommerce-side #respond # sende innspill, .woocommerce-side a.button, .woocommerce-side button.button, .woocommerce-side input.button {background-color: #6fba26; padding: 10px; stilling: i forhold; font-familie: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; farge: #fff; bakgrunnsbilde-: lineær-gradient (bunn, RGB (100,170,30) 0% RGB (129,212,51) 100%); box-shadow: innfelt 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; grense-radius: 5px; } .woocommerce #content input.button.alt: hover, .woocommerce #respond inngang # 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-input #respond # submit.alt: hover, .woocommerce-side a.button.alt: hover, .woocommerce-side knapp .button.alt: hover, .woocommerce-side input.button.alt: hover {topp: 7px; bakgrunnsbilde-: lineær-gradient (bunn, RGB (100,170,30) 100% RGB (129,212,51) 0%); box-shadow: innfelt 0px 1px 0px #0D496F, innfelt 0px -1px 0px #0D496F; farge: #156785; tekst-shadow: 0px 1px 1px RGBA (255,255,255,0.3); bakgrunn: rgb (44,160,202); }

For de som ønsker å optimalisere ytelsen til sin nettbutikk, enten det gjelder konvertering eller salg av produkter,

Vi tilbyr også 3 premium WordPress-plugins designet for denne oppgaven.

1. WooCommerce Gjenopprett forlatt handlevogn

kundene fyll ofte kurvene og la dem være: takket være WooCommerce Recover Forlatt Cart vil du kunne kontakte dem, minne dem om hva de har kjøpt og invitere dem til å fullføre sine handlinger.

Angi tidsintervallet mellom når en handlekurv blir forlatt og når en personlig påminnelses-e-post blir sendt til kunden din som inneholder en direkte lenke til kjøpesiden for å se hva de var på poeng å kjøpe.

Last ned | dEMO | Webhotell

2. WooCommerce Skjul pris & Legg i handlekurv Button Plugin

Plugin-programmet WooCommerce Hide Prices tillater selgere å opprette flere regler for å skjule priser eller skjule "legg i handlekurven" -knappen fra ikke-påloggede kunder eller brukere som har visse tilgangsrettigheter til e-handelsnettstedet ditt.

Du kan skjule prisen og "legg i handlekurv"-knappen på enkelte produkter eller i bestemte kategorier. Du kan erstatte dem med egendefinert tekst eller en knapp som tar dem til  Kontaktskjema. Du kan opprette så mange regler som automatisk vil skjule prisen og " Legg til i panikkr ”avhengig av hva du vil.

Last ned | dEMO | Webhotell

3. WooCommerce Valuta Switcher

Denne plugin lar deg bytte produktpriser fra en valuta til en annen i sanntid.

Dette er spesielt viktig innen e-handel, da det er rettet mot hele verden. Denne pluginen sørger for at uansett hvor kundene dine er, vil de alltid kunne bestille fra nettbutikken din.

Last ned | dEMO | Webhotell

Anbefalte ressurser

Oppdag andre anbefalte ressurser som vil hjelpe deg optimaliser ytelsen til nettbutikken din. 

• 50 WooCommerce plugins for å forbedre nettbutikken
• 9 WordPress-plugins for å lage et tilknyttet program
• 9 WooCommerce plugins for å forbedre egenskapene til dine variabel produkter
• 5 WordPress plugins for å redigere CSS på bloggen din

konklusjonen

Her er ! Dette er alt for denne veiledningen dedikert til knappetilpasning Legg i handlekurven fra WooCommerce. Ikke nøl med å dele den med vennene dine på din sosiale nettverk foretrukket. 

Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.

Men i mellomtiden, fortell oss om din commentaires og forslag i den dedikerte delen.

...