Button for removing product from Mini cart on Mobile

Hi guys
For Mobile devices.
We have received complaints from customers about the button for removing items from mini cart widget.
The button is very small, and 50% of the time when trying to click on that “X” it by mistake clicks on the product and page goes to single product page. When you need to remove 10 items from your mini cart, then it’s becoming very bad user experience.
It is frustrating for customers and for us to have this experience.
Is there any way we can change it to swiping to the left with red background (as you see everywhere in the apps actually – like deleting message on iphone)
Or do you have another solution to this problem?

Also sometimes customers ask how to empty the cart all at once with 1 button click?

Thanks!

Hi,

If you find it difficult to remove items from the sidebar cart widget due to the button size, we can provide a custom CSS solution to increase the remove button size by approximately 50%. This will enlarge the clickable area, reducing misclicks. To apply this, try adding the following custom CSS code to the Global Custom CSS Area in Theme Settings:

.cart-widget-side .woocommerce-mini-cart .remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    top: 5px;
    inset-inline-end: 5px;
    
}

.cart-widget-side .woocommerce-mini-cart .remove:after {
    font-size: 14px;
}

Regarding the “Clear Cart” button, unfortunately, our theme does not have such an option. If you believe this feature would be useful for WoodMart users, you can submit a feature request in the following section: https://woodmart.canny.io/feature-requests. If the request gains support from the WoodMart community, this functionality may be added in future theme updates.

Kind Regards

[Author]

Posts