En esta ocasión voy a mejorar el estilo del widget Carrito de WooCommerce para que sea más vistoso para los futuros compradores. El diseño que trae por defecto es demasiado simple y lo que he hecho es darle un poco de color, y añadirle algunos bordes y colores de fondo para que destaque un poco más.

Personalizar carrito Woocommerce

Para poder personalizar el carrito de Woocommerce vamos a añadir los siguientes estilos a nuestra plantilla:

/* Estilo del Widget del Carrito WooCommerce */
#woocommerce_widget_cart-2 {
border: 3px solid #772424; padding: 6px;
}
#woocommerce_widget_cart-2 > h4 {
background: #772424; color: white; padding: 9px;
}
.woocommerce .widget_shopping_cart .total, .woocommerce.widget_shopping_cart .total {
border-top: 3px double #772424;
}

Podemos añadir estos estilos a la plantilla que tengamos directamente en el fichero style.css o mejor incluso si lo añadís al fichero style.css de vuestro Child Theme. De esa manera, cuando actualicéis WooCommerce no perderéis el estilo que habéis definido.

Resultado del Carrito WooCommerce

El resultado de personalizar carrito woocomerce con estos estilos es el siguiente:

Carrito de WooCommerce

Si os fijáis he añadido un borde para destaque más sobre el resto de widgets. He cambiado el color de las líneas que separan los artículos del subtotal. Y he añadido un color de fondo al title del carrito para destacarlo aún más.

Espero que os haya gustado y podáis aplicarle vuestros colores para que se ajuste mejor a vuestra plantilla.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies