How to hide the cart icon on products on mobile?
-
I would like to hide this icon on mobile devices, leaving only the option to add a product to a wishlist. Is this possible?
Attachments:
You must be
logged in to view attached files.
Hello,
Can you please share the page URL I will check and give you a possible solution.
Best Regards.
Hello,
Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:
.product-grid-item .wd-add-btn {
display: none;
}
Best Regards.
Can we do this icon square? 🙂
And can you write code to resize this element in PX?
Hello,
Please add the following Custom CSS code to Theme Settings > Custom CSS > Custom CSS for desktop:
.product-grid-item:hover:not(:is(.product-swatched,.quick-shop-shown,[class*="wd-loading)"])) .wd-buttons[class*="wd-pos-r"] {
height: 60px;
border-radius: 40px
}
Best Regards
This code does not produce any result. It just breaks the icon.
Please note that I only need this for the mobile version of the site.
The previous code with the circle icon works fine.
Hello,
Add below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile
.wd-buttons .wd-action-btn>a {
width: 60px;
height: 60px;
font-weight: 900;
}
.wd-buttons .wd-action-btn>a:before, .wd-buttons .wd-action-btn>a:after {
font-size: 30px;
}
Change the value as per your requirements.
Best Regards.