Display bug with of ‘add to cart’ on category

We need to have the option ‘Quantity input on shopping cart widget ‘ active so that customers can enter a quantity up to 100+ and add it to cart. If we enable this option, then there is a display issue on the product card.
The text ‘Add to cart’ simply does not fit on the space available and therefore is not fully displayed. Only the partial text is displayed on mobile: ‘dd to’.
The same issue occurs when a different language is used. The English text ‘Add to cart’ is very short compared to the translation in other languages. For example in Dutch its much longer: ‘Toevoegen aan winkelwagen’, which only displays ‘evoegen aan’ on desktop and ‘oevoe’ on mobile. See the attached screenshot.

The solution would be to display the cart icon on mobile or in cases where the text is too long to display. Or just give us an option to always display the cart icon. The cart icon currently is only displayed on hover. As far as I can see there is no option to always show this icon.

Please be so kind to let me know how to address this display bug or provide a fix.

Attachments:

You must be logged in to view attached files.

Hi,

Thanks for reaching to us.

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global CSS section:

:root .wd-add-btn-replace .add-to-cart-loop:before {
    transform: translateY(0) translateZ(0);
}

:root .wd-add-btn-replace .add-to-cart-loop span {
    transform: translateY(-100%) translateZ(0);
}

Regards.

Thank you for the swift response. Will a fix be included in the next release?
I see that there have been many support requests on this matter, so many customers encounter this issue.

[Author]

Posts