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 WooCommerce Modificar el estilo del 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.

Dime qué te ha parecido el artículo...

rating off Modificar el estilo del carrito de WooCommercerating off Modificar el estilo del carrito de WooCommercerating off Modificar el estilo del carrito de WooCommercerating off Modificar el estilo del carrito de WooCommercerating off Modificar el estilo del carrito de WooCommerce (Ninguna valoración todavía)
loading Modificar el estilo del carrito de WooCommerceCargando…
Advertisements

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

Veo que te gusta mi Blog...

Si te ha parecido interesante este artículo, no esperes a suscribirte a mi blog. Cuando vuelva a escribir otro seguro que te interesará y no desearás no haberte enterado. Puedes suscribirte con total tranquilidad de que no recibirás spam. Lo odio igual que tu. Solo quiero que aprendas cosas nuevas y te sientas agusto con mis artículos. ¡Gracias!

¡Gracias por suscribirte!

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!