Pentru a schimba culoarea butoanelor WooCommerce, trebuie să schimbăm sau să înlocuim fișierul de butoane implicit style.css. Pentru a face acest lucru, va trebui să adăugăm un cod CSS personalizat la noi tema WordPress a copiilor.

Există două moduri de a face acest lucru:

  • Adăugați un CSS personalizat în fișierul theme.css pentru copii
  • Folosiți câteva pluginuri pentru a injecta cod CSS personalizat în paginile dvs. Web.

Pasul 1: Instalați pluginul CSS personalizat simplu pe WordPress și activați-l

Vom folosi a WordPress plug-in pentru a injecta codul CSS în paginile unui Magazinul online WooCommerce. Puteți descărca pluginul: CSS personalizat simplu

Puteți citi tutorialul nostru pe instalarea și activarea pluginului WordPress.

După activarea pluginului, un nou submeniu va fi adăugat la meniu apariție :

CSS personalizat plugin plugin WordPress

Accesarea acestei secțiuni vă duce la o interfață cu o casetă de text în care puteți introduce cod CSS personalizat.

Simplu Custom CSS WordPress plugin interfață

Puneți următorul CSS în caseta de text, apoi faceți clic pe " Actualizați CSS personalizat".

.woocommerce #content input.button.alt: hover, .woocommerce #respond de intrare # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: hover, .woocommerce-page #content input.button.alt: hover, .woocommerce pagina de intrare #respond # submit.alt: hover, .woocommerce-page a.button.alt: hover, butonul .woocommerce-pagină. button.alt: hover, .woocommerce-page input.button.alt: hover {background: roșu semnificativ; culoare de fundal:! roșu este important; ! Culoare: alb importante; text-umbra:! transparent importantă; box-umbra: nici unul; border-color:! #ca0606 importante; } .woocommerce #content Input.button: hover, .woocommerce #respond de intrare # submit: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce-page # input.button fericit: mutați, .woocommerce pagina de intrare #respond # submit: hover, .woocommerce-page a.button: hover, .woocommerce-page button.button: hover, .woocommerce-page input.button: hover {background :! roșu este important; culoare de fundal:! roșu este important; ! Culoare: alb importante; text-umbra:! transparent importantă; box-umbra: nici unul; border-color:! #ca0606 importante; } .woocommerce #content Input.button, .woocommerce #respond de intrare # submit, a.button .woocommerce, button.button .woocommerce, input.button .woocommerce, .woocommerce-page #content input.button, .woocommerce-page # # prezinte intrare răspunde, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {background: red semnificativ; ! Culoare: alb importante; text-umbra:! transparent importantă; border-color:! #ca0606 importante; } .woocommerce #content Input.button.alt: hover, .woocommerce #respond de intrare # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-page #content input.button.alt: hover, .woocommerce pagina de intrare #respond # submit.alt: hover, .woocommerce-page a.button.alt: hover, butonul .woocommerce-pagină .button.alt: hover, .woocommerce-page input.button.alt: hover {background: roșu semnificativ; box-umbra: nici unul; text-umbra:! transparent importantă; ! Culoare: alb importante; border-color:! #ca0606 importante; }

Acum puteți accesa magazinul dvs. online, veți observa că butoanele au schimbat efectiv culorile.

Pentru a personaliza culoarea butoanelor pentru a avea în cele din urmă aspectul dorit,

Înlocuiți proprietatea " backgroud: roșu! important Prin a culoarea la alegere. Actualizați codurile și accesați din nou magazinul dvs. online. De fapt, folosind stilul pe care vi l-am furnizat, veți putea schimba complet structura butoanelor.

Cu puțină cercetare, veți putea crea butoane unice cu un stil care se potrivește cu dvs WordPress temă (mai ales dacă acesta din urmă nu este compatibil cu WooCommerce).

adaugă în coș butonul WordPress

Pentru exemplul următor, puteți utiliza următorul cod CSS.

.woocommerce #content input.button, .woocommerce #respond de intrare # submit, a.button .woocommerce, button.button .woocommerce, input.button .woocommerce, .woocommerce-page #content input.button, .woocommerce-page #respond # prezinte intrare, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {background-color: #6fba26; padding: 10px; Poziția: relativă; font-family: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; Culoare: #fff; background-image: liniar gradient (partea de jos, rgb (100,170,30) 0% rgb (129,212,51) 100%); box-shadow: inset 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; raza de graniță: 5px; } .woocommerce #content input.button.alt: hover, .woocommerce #respond intrare # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-page #content input.button.alt: hover, .woocommerce-pagina de intrare #respond # submit.alt: hover, .woocommerce-page a.button.alt: hover, butonul .woocommerce pagină .button.alt: hover, .woocommerce -page input.button.alt: hover {top: 7px; background-image: liniar gradient (partea de jos, rgb (100,170,30) 100% rgb (129,212,51) 0%); box-shadow: inset 0px 1px 0px #0D496F, medalion 0px -1px 0px #0D496F; culoare: #156785; text-umbra: 0px 1px 1px rgba (255,255,255,0.3); fundal: rgb (44,160,202); }

Pentru cei care doresc să optimizeze performanța magazinului lor online, indiferent dacă este vorba de conversie sau vânzare de produse,

De asemenea, oferim pluginuri WordPress 3 premium concepute pentru această sarcină.

1. WooCommerce Recuperați coșul abandonat

clienții adesea își umple coșurile și le lasă: mulțumită WooCommerce Recuperare Coș abandonate îi veți putea contacta, le reaminti ceea ce au cumpărat și îi puteți invita să-și finalizeze acțiunile.

Recuperați coșul abandonat pentru woocommerce

Setați intervalul de timp dintre momentul în care un coș de cumpărături este abandonat și când un e-mail de memento personalizat este trimis clientului dvs. care conține un link direct la pagina de cumpărături pentru ca acesta să vadă în ce se aflau punctul de a cumpăra.

Descarca | Demo | web hosting

2. WooCommerce Ascunde prețul și adaugă în coșul de comanda pentru butoane

Pluginul WooCommerce Hide Prices permite comercianților să creeze mai multe reguli pentru a ascunde prețurile sau pentru a ascunde butonul „Adăugați la coș” de la clienții sau utilizatorii care nu au conectat și care au anumite drepturi de acces la site-ul dvs. de comerț electronic.

Preț ascundere Woocommerce adăugare la coșul buton plugin ascundere după rolurile utilizatorului

Puteți ascunde prețul și butonul „adaugă în coș” pe anumite produse sau în anumite categorii. Le puteți înlocui cu text personalizat sau cu un buton care le va duce la  formular de contact. Puteți crea cât mai multe reguli care vor ascunde automat prețul și „ Adăugați la panier ”în funcție de ceea ce vrei.

Descarca | Demo | web hosting

3. WooCommerce Currency Switcher

Acest plugin vă permite să schimbați prețurile produselor de la o monedă la alta în timp real.Comutator valutar Woocommerce

Acest lucru este deosebit de important în comerțul electronic, deoarece este destinat întregii lumi. Acest plugin vă asigură că, indiferent unde se află clienții dvs., aceștia vor putea oricând să comande din magazinul dvs. online.

Descarca | Demo | web hosting

Resurse recomandate

Descoperă alte resurse recomandate care te vor ajuta optimizați performanța magazinului dvs. online. 

Concluzie

Aici este ! Asta este tot pentru acest tutorial dedicat personalizării butoanelor Adaugă în coș de la WooCommerce. Nu ezitați să îl împărtășiți prietenilor dvs. de pe rețelele sociale preferat. 

Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress.

Dar, între timp, spuneți-ne despre dvs. comentarii și sugestii în secțiunea dedicată.

...