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:
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.
Hola, como pueda crear un child theme para realizar modificaciones a mi tienda?
Deseo modificar el color y letra de los formularios y el carrito de woocommerce , pero no sé como realizarlo.
Te dejo el tutorial para un child theme. Saludos
¡Hola! ¿Cómo puedo modificar el shortcut del carrito, para que cuando no haya nada en el carro no me redireccione a la tienda sino a una página en específico? Muchas gracias.
No te sabría decir Laura.