Author : Jhon
Publicado : 5 octubre, 2022
El minicart de woocommerce es un widget oculto que aparece despues de seleccionar un producto para nuestro carrito, es un bloque donde podremos ver los productos de nuestro carrito y normalmente esta oculto, este aparece al hacer click sobre el icono del carrito, el codigo css que utizaremos para maquetarlo sera el siguiente.
/** minicart ajax header**/ .widget_shopping_cart { width: 300px !important; } @media (min-width: 768px) and (max-width: 1199.98px) { .widget_shopping_cart { margin-left: -110px; } } @media (min-width: 1200px) and (max-width: 1399.98px) { .widget_shopping_cart { margin-left: -110px; } } .widget_shopping_cart .woocommerce-mini-cart { width: 300px !important; background-color: rgb(222, 222, 222) !important; } .widget_shopping_cart .woocommerce-mini-cart .woocommerce-mini-cart-item { padding-left: 5px; } .widget_shopping_cart .woocommerce-mini-cart .woocommerce-mini-cart-item a { padding-left: 20px; color: #000 !important; } .widget_shopping_cart .woocommerce-mini-cart .woocommerce-mini-cart-item a::before { font-size: 18px; } .widget_shopping_cart .woocommerce-mini-cart .woocommerce-mini-cart-item .quantity { padding-left: 20px; } .widget_shopping_cart p { background-color: rgb(222, 222, 222) !important; } .widget_shopping_cart .woocommerce-mini-cart__buttons a:nth-child(1) { background-color: rgb(57, 110, 198) !important; } .widget_shopping_cart .woocommerce-mini-cart__buttons a:nth-child(1):hover { background-color: rgba(57, 110, 198, 0.8) !important; }
Con este código css obtendremos los resultados que podemos ver en la imagen del post.
Deja una respuesta