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! Soy Javier. Soy informático y me gusta documentar todo lo que aprendo. En mi blog te enseño todo lo que sé y cómo puedes aprender a crear tu propia web, mejorar el SEO y aplicar técnicas de Marketing Digital para conseguir mayor visibilidad. Suscríbete para no perderte ninguna de mis guías sobre WordPress, posicionamiento SEO o Marketing Digital.
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.