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