Schimba culorile butoanelor in Woocommerce

Cum sa schimbi culorile butoanele in Woocommerce?

 

Foarte simplu, cu acest cod CSS complet, in care trebuie doar sa pui codul noilor culori dorite, pentru a schimba butonul de ‘adauga in cos’ de pe pagina produsului sau din lista de produse, ‘cumpara acum’, sau butoanele de trimitere informatii.

Acest cod CSS il poti adauga in tema ta, fie direct in fisierul de stiluri al temei, ‘style.css’ (in tema child, pentru a nu pierde aceste informatii la urmatorul update al temei), sau, metoda recomandata, daca tema ta are aceasta optiune, sa il adaugi in optiunile temei, la sectiunea ‘custom css’

Ce trebuie sa schimbi in cod:
#codul culorii (poti obtine codul unei culori in Photoshop, sau pe site-uri precum color-hex.com

sau poti scrie direct numele culorii, daca este o culoare simpla, precum: color:white

culoare de fundal, precum: background-color:blue

adaugarea !important inainte de ; face ca aceasta setare sa fie prioritara, spunadu-i browserului sa o foloseasca, chiar daca aceste elemente mai au stiluri diferite.

 

.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-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background:blue !important;

background-color:blue !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}


button.single_add_to_cart_button.button.alt { background-color: blue; }

.single-product .product .single_add_to_cart_button.button{
	background-color: #333333;
	color: #FFFFFF;
}
.woocommerce .product .add_to_cart_button.button{
	background-color: blue;
	color: #FFFFFF;
}

.single-product .product .single_add_to_cart_button.button{
	background-color: #333333;
	color: #FFFFFF;
}
.woocommerce .product .add_to_cart_button.button{
	background-color:blue;
	color: #FFFFFF;
}

.product_detail .content_product_detail .single-buynow .button-buynow {
    background: #428bca;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    border-radius: 0;
    display: inline-block;
    vertical-align: top;
    padding: 0 28px;
    height: 46px;
    text-transform: capitalize;
    background-color:blue;
    line-height: 46px;
    margin: 0 3px;
}

Codurile iti par prea grele / plictisitoare? Poti construi webste-uri cu constructor de website-uri gratuit,
sau lasa-ne pe noi sa ne ocupam de ele, si comanda un website profesional