Da bismo promijenili boju gumba WooCommerce, moramo promijeniti ili zamijeniti zadanu datoteku style.css gumba. Da bismo to učinili, trebat ćemo dodati a prilagođeni CSS kod na naše dječja WordPress tema.

Postoje dva načina za to:

• Dodajte prilagođeni CSS u datoteku podređene teme style.css
• Pomoću nekih dodataka umetnite prilagođeni CSS kôd na svoje web stranice.

Korak 1: Instalirajte Simple Custom CSS plugin na WordPress i aktivirajte ga

Koristit ćemo a WordPress plugin za ubacivanje CSS koda na stranice a Trgovina WooCommerce, Dodatak možete preuzeti: Jednostavna Custom CSS

Naš udžbenik možete pročitati na instalacija i aktivacija WordPress dodatka.

Nakon aktiviranja dodatka, novi će se podizbornik dodati izborniku Apparence :

Pristup ovom odjeljku vodi vas do sučelja s okvirom za tekst u kojem možete unijeti prilagođeni CSS kôd.

Stavite sljedeći CSS u tekstni okvir, a zatim kliknite " Ažuriraj prilagođeni CSS".

.wocommerce #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, .vaocommerce-stranica #content input.button.alt: hover, .woocommerce-page # responded # submit.alt: hover, .woocommerce-stranica a.button.alt: hover, .woocommerce-page gumb. button.alt: lebdjeti, .woocommerce-stranica input.button.alt: hover {pozadina: crveno! važno; boja pozadine: crvena! važno; boja: bijela! text-shadow: transparentno! važno; box-shadow: ništa; border-color: #ca0606! } .wocommerce #content input.button: hover, .woocommerce # respond (unos) # submit: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover,. sadržaj input.button: hover, .woocommerce-page #respond input # submit: hover, .woocommerce-stranica a.button: hover, .woocommerce-stranica button.button: hover, .woocommerce-page input.button: hover {pozadina važan; boja pozadine: crvena! važno; boja: bijela! text-shadow: transparentno! važno; box-shadow: ništa; border-color: #ca0606! } .wocommerce #content input.button, .woocommerce #respond input # submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button,. odgovoriti na unos # pošalji, .vaocommerce-stranica a.button, .woocommerce-stranica button.button, .woocommerce-page input.button {pozadina: crveno! važno; boja: bijela! text-shadow: transparentno! važno; border-color: #ca0606! } .wocommerce #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: lebdi, .vaocommerce-stranica #content input.button.alt: hover, .woocommerce-page #respond input # submit.alt: hover, .woocommerce-stranica a.button.alt: hover, .woocommerce-page .button.alt: hover, .woocommerce-stranica input.button.alt: hover {pozadina: crveno! važno; box-shadow: ništa; text-shadow: transparentno! važno; boja: bijela! border-color: #ca0606! }

Sada možete pristupiti svojoj internetskoj trgovini, primijetit ćete da su gumbi stvarno promijenili boju.

Da biste prilagodili boju gumba kako biste konačno imali izgled kakav želite,

Zamijeni svojstvo " backgroud: crveno! važno Po a boja po vašem izboru. Ažurirajte kodove i ponovo pristupite svojoj internetskoj trgovini. Zapravo, koristeći styling koji smo vam upravo pružili, moći ćete u potpunosti promijeniti strukturu gumba.

Uz malo istraživanja, moći ćete stvoriti jedinstvene gumbe sa stilom koji odgovara vašem WordPress tema (pogotovo ako potonji nije kompatibilan s WooCommerceom).

Za sljedeći primjer možete upotrijebiti sljedeći CSS kôd.

.woocommerce #content input.button, .woocommerce #respond input # submit, .autommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #content ulaz # pošalji, .vaocommerce-stranica a.button, .woocommerce-stranica button.button, .woocommerce-page input.button {background-color: #6fba26; padding: 10px; Položaj: relativna; obitelj fontova: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; boja: #fff; background-image: linearno-gradijent (dno, rgb (100,170,30) 0%, rgb (129,212,51) 100%); box-shadow: 0px umetnuti 1px 0px #7F8EF1, 0px 6px 0px #0D496F; granični radijus: 5px; } .wocommerce #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: lebdi, .vaocommerce-stranica #content input.button.alt: hover, .woocommerce-page #respond input # submit.alt: hover, .woocommerce-stranica a.button.alt: hover, .woocommerce-page .button.alt: hover, .woocommerce-stranica input.button.alt: lebdite {vrh: 7px; background-image: linearno-gradijent (dno, rgb (100,170,30) 100%, rgb (129,212,51) 0%); box-shadow: umetnuti 0px 1px 0px #0D496F, umetnuti 0px -1px 0px #0D496F; boja: #156785; text-shadow: 0px 1px 1px rgba (255,255,255,0.3); pozadina: rgb (44,160,202); }

Za one koji žele optimizirati performanse svoje internetske trgovine bilo u pogledu pretvorbe ili prodaje proizvoda,

Također nudimo 3 premium WordPress dodatke dizajnirane za ovaj zadatak.

1. WooCommerce Obnova napuštenih košarica

vaši kupci često pune svoje košare i ostave ih: zahvaljujući WooCommerce Obnova napuštenih košarica moći ćete ih kontaktirati, podsjetiti ih na ono što su kupili i pozvati ih da dovrše svoje radnje.

Postavite vremenski interval između napuštanja košarice i slanja personaliziranog podsjetnika e-poštom vašem kupcu s izravnom vezom na stranicu za kupnju kako bi vidio na čemu je. točka za kupnju.

Preuzmite | demo | Web hosting

2. WooCommerce Sakrij dodatak za cijenu i dodaj u košaricu

Dodatak WooCommerce Hide Prices omogućuje trgovcima da stvore više pravila za skrivanje cijena ili sakrivanje gumba "dodaj u košaricu" od ne prijavljenih kupaca ili korisnika koji imaju određena prava pristupa na vašu web stranicu e-trgovine.

Na određenim proizvodima ili u određenim kategorijama možete sakriti cijenu i gumb "dodaj u košaricu". Možete ih zamijeniti prilagođenim tekstom ili gumbom koji će ih odvesti na  kontakt obrazac, Možete stvoriti što više pravila koja će automatski sakriti cijenu i " Dodaj na panier ”, ovisno o tome što želite.

Preuzmite | demo | Web hosting

3. Prebacivanje valute u WooCommerce

Ovaj dodatak omogućuje vam prebacivanje cijena proizvoda s jedne valute na drugu u stvarnom vremenu.

To je posebno važno u e-trgovini jer je usmjereno na cijeli svijet. Ovaj dodatak osigurava da će bez obzira gdje se nalaze vaši kupci uvijek moći naručiti iz vaše internetske trgovine.

Preuzmite | demo | Web hosting

Preporučeni resursi

Otkrijte druge preporučene resurse koji će vam pomoći optimizirati performanse vaše internetske trgovine. 

• 50 WooCommerce dodaci za poboljšanje vaše online trgovine
• 9 WordPress dodaci za stvaranje pridruženih programa
• 9 WooCommerce dodatke kako biste poboljšali atribute svojih promjenjivih proizvoda
• 5 WordPress plugins za vizualno uređivanje CSS-a na vašem blogu

Zaključak

Ovdje je ! To je sve za ovaj vodič posvećen prilagodbi gumba Dodaj u košaricu WooCommercea. Ne ustručavajte se podijeliti ga sa svojim prijateljima na vašem društvene mreže poželjna. 

Međutim, također ćete moći konzultirati naše sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress.

Ali, u međuvremenu, recite nam nešto o svom Komentari i prijedloge u posebnom odjeljku.

...