Për të ndryshuar ngjyrën e butonave të WooCommerce, duhet të ndryshojmë ose zëvendësojmë skedarin e butonave të paracaktuar style.css. Për ta bërë këtë, do të duhet të shtojmë një kod CSS personal te tona temë për fëmijë WordPress.

Ka dy mënyra për ta bërë këtë:

• Shtoni një CSS të personalizuar në skedarin e temës së fëmijës.css
• Përdorni disa shtojca për të injektuar kodin CSS të personalizuar në faqet tuaja të internetit.

Hap 1: Instalo plugin Simple Custom CSS në WordPress dhe aktivizo atë

Ne do të përdorim një plugin WordPress për të injektuar kodin CSS në faqet e a Dyqani Online WooCommerce. Mund ta shkarkoni shtojcën: Simple Custom CSS

Ju mund të lexoni tutorial tonë instalimi dhe aktivizimi i shtojcës WordPress.

Pas aktivizimit të shtojcës, një menu e re do të shtohet në menu shfaqje :

Hyrja në këtë seksion do t'ju çojë në një ndërfaqe me një kuti teksti ku mund të futni kodin personal të CSS.

Vendosni CSS-në e mëposhtme në kutinë e tekstit dhe pastaj kliko në " Përditëso Custom 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 faqesh #content input.button.alt: rri pezull, të dhëna .woocommerce faqesh #respond # submit.alt: hover, .woocommerce faqesh a.button.alt: hover, butonin .woocommerce faqesh. button.alt: hover, .woocommerce-page input.button.alt: hover {sfond: e kuqe! e rëndësishme; background-color: e kuqe! e rëndësishme; ngjyra: e bardhë! e rëndësishme; tekst-hije: transparente! e rëndësishme; kuti-hije: asnjë; ngjyra kufitare: #ca0606! e rëndësishme; } .Woocommerce #content input.button: hover, .woocommerce #respond # paraqesë input: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce-faqe # lumtur input.button: hover, input .woocommerce-faqe #respond # paraqesë: hover, .woocommerce-faqe a.button: hover, .woocommerce-faqe button.button: hover, .woocommerce-faqe input.button: hover {background : e kuqe! e rëndësishme; background-color: e kuqe! e rëndësishme; ngjyra: e bardhë! e rëndësishme; tekst-hije: transparente! e rëndësishme; kuti-hije: asnjë; ngjyra kufitare: #ca0606! e rëndësishme; } .Woocommerce #content input.button, .woocommerce #respond dhëna # paraqesë, a.button .woocommerce, .woocommerce button.button, .woocommerce input.button, .woocommerce faqesh #content input.button, .woocommerce-faqe # sponds dhëna # paraqesë, .woocommerce-faqe a.button, .woocommerce-faqe button.button, .woocommerce-faqe input.button {background: red rëndësishëm; ngjyra: e bardhë! e rëndësishme; tekst-hije: transparente! e rëndësishme; ngjyra kufitare: #ca0606! e rëndësishme; } .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 faqesh #content input.button.alt: rri pezull, të dhëna .woocommerce faqesh #respond # submit.alt: hover, .woocommerce faqesh a.button.alt: hover, butonin .woocommerce faqesh .button.alt: hover, .woocommerce faqesh input.button.alt: rri pezull {background: red rëndësishëm; kuti-hije: asnjë; tekst-hije: transparente! e rëndësishme; ngjyra: e bardhë! e rëndësishme; ngjyra kufitare: #ca0606! e rëndësishme; }

Tani mund të hyni në dyqanin tuaj online, do të vini re se butonat në të vërtetë kanë ndryshuar ngjyrat.

Për të personalizuar ngjyrën e butonave që më në fund të kenë pamjen që dëshironi,

Zëvendëso pronën " backgroud: e kuqe! e rëndësishme Me anë të një ngjyra e zgjedhjes suaj. Përditësoni kodet dhe shkoni përsëri në dyqanin tuaj online. Në fakt, duke përdorur stilimin që sapo ju kemi siguruar, do të jeni në gjendje të ndryshoni plotësisht strukturën e butonave.

Me një kërkim të vogël, do të jeni në gjendje të krijoni butona unikë me një stil që përputhet me tuajin WordPress theme (veçanërisht nëse kjo e fundit nuk është në përputhje me WooCommerce).

Për shembullin vijues, mund të përdorni kodin e mëposhtëm CSS.

.woocommerce #content input.button, .woocommerce #respond dhëna # paraqesë, a.button .woocommerce, .woocommerce button.button, .woocommerce input.button, .woocommerce faqesh #content input.button, .woocommerce-faqe #respond # paraqesë të dhëna, .woocommerce faqesh a.button, .woocommerce faqesh button.button, .woocommerce faqesh input.button {background-color: #6fba26; mbushje: 10px; pozicion: relative; font-family: 'Open Sans', sans-serif; font-Siperfaqja: 12px; text-decoration: asnjë; Ngjyra: #fff; sfondit-imazhi: linear-gradient (poshtë, rgb (100,170,30) 0% rgb (129,212,51) 100%); box-shadow: kuadrat 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; rrezja kufitare: 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 faqesh #content input.button.alt: rri pezull, të dhëna .woocommerce faqesh #respond # submit.alt: hover, .woocommerce faqesh a.button.alt: hover, butonin .woocommerce faqesh .button.alt: hover, .woocommerce faqesh input.button.alt: rri pezull {lartë: 7px; sfondit-imazhi: linear-gradient (poshtë, rgb (100,170,30) 100% rgb (129,212,51) 0%); box-shadow: kuadrat 0px 1px 0px #0D496F, kuadrat 0px -1px 0px #0D496F; ngjyra: #156785; tekst-hije: 0px 1px 1px rgba (255,255,255,0.3); sfondi: rgb (44,160,202); }

Për ata që dëshirojnë të optimizojnë performancën e dyqanit të tyre online qoftë në drejtim të konvertimit ose shitjes së produkteve,

Ne gjithashtu ofrojmë shtesa shtesë premium 3 WordPress të dizajnuara për këtë detyrë.

1. WooCommerce Recover Shporta e braktisur

Klientët tuaj shpesh mbushni shportat e tyre dhe lërini ato: faleminderit WooCommerce Recover Shporta e braktisur do të jeni në gjendje të kontaktoni me ta, t'i kujtoni ato që kanë blerë dhe t'i ftoni të përfundojnë veprimet e tyre.

Vendosni intervalin kohor midis braktisjes së një karroce dhe kur një email rikujtues i personalizuar i dërgohet klientit tuaj që përmban një lidhje të drejtpërdrejtë në faqen e blerjeve që ata të shohin se në çfarë ishin pikë për të blerë.

Shkarko | DEMO | web hosting

2. Shtojca e butonit WooCommerce Fshih çmimin & Shtoni në shportë

Shtojca WooCommerce Hide Prices lejon tregtarët të krijojnë rregulla të shumëfishta për të fshehur çmimet ose fshehur butonin "shto në shportë" nga klientët e pa regjistruar ose përdoruesit që kanë të drejta të caktuara të hyrjes në faqen tuaj të internetit të tregtisë elektronike.

Ju mund të fshehni çmimin dhe butonin "Shto në shportë" në produkte të caktuara ose në kategori të veçanta. Mund t'i zëvendësoni me tekst të personalizuar ose një buton që do t'i çojë në  formularin e kontaktit. Mund të krijoni sa më shumë rregulla që automatikisht do të fshehin çmimin dhe "" Shtoni në panier ”në varësi të asaj që dëshironi.

Shkarko | DEMO | web hosting

3. WooCommerce Currency Switcher

Kjo shtojcë ju lejon të ndryshoni çmimet e produktit nga një monedhë në tjetrën në kohë reale.

Kjo është veçanërisht e rëndësishme në tregtinë elektronike sepse i drejtohet të gjithë botës. Kjo shtojcë siguron që pa marrë parasysh se ku ndodhen klientët tuaj, ata gjithmonë do të jenë në gjendje të porosisin nga dyqani juaj online.

Shkarko | DEMO | web hosting

Burimet e rekomanduara

Zbuloni burime të tjera të rekomanduara që do t'ju ndihmojnë optimizoni performancën e dyqanit tuaj online. 

• 50 Woocommerce plugins për të përmirësuar dyqan tuaj online
• 9 plugins WordPress për të krijuar një program Filialin
• Shtojcat 9 WooCommerce për të përmirësuar atributet e produkteve tuaja të ndryshueshme
• Shtojcat 5 WordPress për të redaktuar vizualisht CSS në blogun tuaj

Përfundim

Ketu eshte ! Kjo është e gjitha për këtë manual të dedikuar për personalizimin e butonave Shto në shportë e WooCommerce. Mos hezitoni ta ndani atë me miqtë tuaj në tuaj rrjetet sociale preferuar. 

Megjithatë, gjithashtu do të jeni në gjendje të konsultoheni me ne RESSOURCES, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress.

Por, ndërkohë, na tregoni për tuajat komente dhe sugjerime në pjesën e dedikuar.

...