Per a personalitzar colors en Woocommerce de botons i demés, podem utilitzar un codi CSS com aquest:
.woocommerce a{
color:#fff;
}
.woocommerce span.onsale{
color: #FFFFFF;
background-color: #595959 !important;
padding:8px !important;
border-radius:25px !important;
font-size: 11px !important;
z-index:3 !important;
}
/* Estilo básico para todos los botones de WooCommerce */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
background-color: #595959;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
}
/* Cambiar el estilo al pasar el ratón */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
background-color: #a4a4a4;
color: #000;
}
.woocommerce-checkout #payment{
background: #a4a4a4;
}
.woocommerce-checkout #payment div.payment_box{
background-color: #595959;
color:#fff;
}
/* Estilo para el botón de Proceder al Pago en la página del carrito */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout #place_order {
background-color: #000;
color: white;
font-size: 16px;
padding: 12px 30px;
border-radius: 4px;
border: none;
cursor: pointer;
text-align: center;
display: block;
width: 100%;
}
/* Estilo para el botón de Proceder al Pago al pasar el ratón */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-checkout #place_order:hover{
background-color: #595959;
color: #ffffff;
}
/* Estilo para los mensajes de éxito */
.woocommerce-message, .woocommerce-info {
border-top-color: #595959;
background-color: #000;
color: #fff;
box-shadow: 7px 0 #595959 inset;
}
.woocommerce-message::before,.woocommerce-error::before{
color:#a4a4a4;
}
.woocommerce a.remove{
color:#595959;
}
.woocommerce a.remove:hover{
background: #a4a4a4;
}
.woocommerce-message a, .woocommerce-info a{
color:#a4a4a4;
}
/* Estilo para los mensajes de error */
.woocommerce-error {
border-top-color: #a4a4a4;
background-color: #595959;
color: #fff;
box-shadow: 7px 0 #595959 inset;
}
/* Estilos celdas coloreadas en formularios de Woocommerce */
tr.cart_item, tr.cart-subtotal,tr.order-total{
background: black;
color:#fff;
}
/* Estilo general para el desplegable de ordenación de productos */
.woocommerce-ordering select.orderby {
background-color: #595959;
border: 1px solid #dcdcdc;
padding: 8px 10px;
font-size: 14px;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
/* Estilo al enfocar el desplegable */
.woocommerce-ordering select.orderby:focus {
border-color: #0071a1;
box-shadow: 0 0 5px rgba(0, 113, 161, 0.5);
}
/* Estilo al pasar el ratón sobre el desplegable */
.woocommerce-ordering select.orderby:hover {
border-color: #005780;
}