CSS per a personalitzar Woocommerce


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; 
}



, ,

Deixa un comentari

L’adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *

Información básica sobre protección de datos Ver más

  • Responsable: Jordi Juan Pérez.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a NICALIA que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver Política de cookies
Privacidad