Treci la conținutul principal

Cum se personalizează butonul WooCommerce „Adaugă în coș”

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

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 un plugin WordPress pentru a injecta cod 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.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

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 tema dvs. WordPress (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

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

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 „adăugați la coș” de pe anumite produse sau din anumite categorii. Le puteți înlocui cu text personalizat sau cu un buton care le va duce la formularul de contact. Puteți crea cât mai multe reguli care vor ascunde automat prețul și butonul " 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. 

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

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ă.

... 

Acest articol conține comentarii 8

  1. bonjour,
    Poate să mă ajute același plugin să schimb culoarea stelelor „recenzii ale clienților” de pe paginile de produse woocommerce? mulțumesc anticipat

    1. bonjour,

      Trebuie să utilizați codul CSS pentru aceasta. În caz contrar, vă recomandăm pluginul Yellow Pencil pe care îl puteți descărca pe Codecanyon.

  2. Bună seara, am o întrebare. Cum schimbăm culoarea prețului în subcategoriile din WooCommerce ???

    Vă mulțumim deja pentru răspunsul dvs.

    Nico

    1. Bună ziua Nico,

      Multe teme premium oferă această opțiune, în caz contrar, puteți utiliza CSS pentru a personaliza.

      Cordialement

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
3 acțiuni
acțiune3
tweet
Registru