Da bismo promijenili boju gumba WooCommerce, moramo promijeniti ili zamijeniti zadanu datoteku style.css gumba. Da bismo to učinili, trebamo 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 u svoje web stranice.

Korak 1: Instalirajte dodatak za WordPress Jednostavna Custom CSS i aktivirajte ga

Koristićemo a WordPress dodatak da ubacite CSS kod na stranice a WooCommerce Online Shop. Dodatak možete preuzeti: Jednostavna Custom CSS

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

Nakon aktiviranja dodatka, novi podmeni će biti dodan u meni Apparence :

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

Stavite sljedeći CSS u tekstualno polje, a zatim kliknite na " Update Custom CSS".

.woocommerce #content input.button.alt: hover, .woocommerce #respond ulaz # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: hover, .woocommerce stranica #content input.button.alt: hover, ulaz .woocommerce-stranici #respond # submit.alt: hover, .woocommerce stranica a.button.alt: hover, dugme .woocommerce-stranici. button.alt: hover, .woocommerce stranica input.button.alt: hover {background: crvena značajan; background-color: crvena važno; ! Boja: bijela važno; text-shadow: transparentan važno; box-shadow: none; granice boja: #ca0606 važno; } .woocommerce #content input.button: hover, .woocommerce #respond # podnijeti unos: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce stranica # sretan input.button: hover, ulaz .woocommerce-stranici #respond # dostaviti: hover, .woocommerce stranica a.button: hover, .woocommerce stranica button.button: hover, .woocommerce stranica input.button: hover {background : crvena važno; background-color: crvena važno; ! Boja: bijela važno; text-shadow: transparentan važno; box-shadow: none; granice boja: #ca0606 važno; } .woocommerce #content input.button, .woocommerce #respond ulaz # dostavi .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce stranica #content input.button, .woocommerce stranica # nim ulaz # podnijeti, .woocommerce stranica a.button, .woocommerce stranica button.button, .woocommerce stranica input.button {background: crvena značajan; ! Boja: bijela važno; text-shadow: transparentan važno; granice boja: #ca0606 važno; } .woocommerce #content input.button.alt: hover, .woocommerce #respond ulaz # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce stranica #content input.button.alt: hover, ulaz .woocommerce-stranici #respond # submit.alt: hover, .woocommerce stranica a.button.alt: hover, dugme .woocommerce-stranici .button.alt: hover, .woocommerce stranica input.button.alt: hover {background: crvena značajan; box-shadow: none; text-shadow: transparentan važno; ! Boja: bijela važno; granice boja: #ca0606 važno; }

Sada možete pristupiti svojoj internetskoj trgovini, primijetit ćete da su tipke zapravo promijenile boju.

Da biste prilagodili boju gumba da konačno dobijete željeni izgled,

Zamijeni svojstvo " backgroud: crvena važno! Autor: a boju po vašem izboru. Ažurirajte kodove i ponovo pristupite svojoj internetskoj trgovini. U stvari, pomoću stila koji smo upravo pružili moći ćete u potpunosti promijeniti strukturu tipki.

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

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

.woocommerce #content input.button, .woocommerce #respond ulaz # dostavi .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce stranica #content input.button, .woocommerce stranica #respond # podnijeti ulaz, .woocommerce stranica a.button, .woocommerce stranica button.button, .woocommerce stranica input.button {background-color: #6fba26; padding: 10px; položaj: relativna; font-family: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; boja: #fff; background-image: linearno-gradient (dno, RGB (100,170,30) 0% RGB (129,212,51) 100%); box-shadow: umetak 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; border-radius: 5px; } .woocommerce #content input.button.alt: hover, .woocommerce #respond ulaz # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce stranica #content input.button.alt: hover, ulaz .woocommerce-stranici #respond # submit.alt: hover, .woocommerce stranica a.button.alt: hover, dugme .woocommerce-stranici .button.alt: hover, .woocommerce stranica input.button.alt: hover {top: 7px; background-image: linearno-gradient (dno, RGB (100,170,30) 100% RGB (129,212,51) 0%); box-shadow: umetak 0px 1px 0px #0D496F, umetak 0px -1px 0px #0D496F; boja: #156785; text-shadow: 0px 1px 1px rgba (255,255,255,0.3); pozadine: RGB (44,160,202); }

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

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

1. WooCommerce oporavi napuštenu korpu

Vaši klijenti često pune svoje košare i ostavljaju ih: zahvaljujući WooCommerce oporavi napuštenu korpu 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 kolica i slanja personaliziranog podsjetnika e-poštom vašem kupcu s izravnom vezom na stranicu za kupovinu kako bi oni vidjeli na čemu su. tačka za kupovinu.

download | Demo | web hosting

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

Dodatak WooCommerce Hide Prices omogućava trgovcima da kreiraju više pravila kako bi sakrili cijene ili sakrili dugme "dodaj u košaricu" od ne prijavljenih kupaca ili korisnika koji imaju određena prava pristupa na vašu web lokaciju e-trgovine.

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

download | Demo | web hosting

3. WooCommerce Currency Switcher

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

Ovo je posebno važno za e-trgovinu, jer je usmjerena na cijeli svijet. Ovaj dodatak osigurava da bez obzira gdje se nalaze vaši kupci, oni će uvijek moći naručiti iz vaše internet trgovine.

download | Demo | web hosting

Preporučeni resursi

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

• 50 WooCommerce dodatke za poboljšanje vaše online trgovine
• 9 WordPress dodaci za kreiranje partnerskog programa
• 9 WooCommerce plugins za poboljšanje atributa vaših varijabilnih 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 korpu iz WooCommercea. Ne ustručavajte se podijeliti ga sa svojim prijateljima na vašem društvene mreže prednost. 

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

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

...