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.

Our theme previously used an icon instead of text in this case, but we received complaints from the majority of our clients who had their site set up the opposite way, with fewer columns and more space to display the text. As a result, we were forced to restore the text on the Add to Cart button.

Unfortunately, there is currently no universal solution that dynamically calculates the combination of grid column count and screen width to contextually show or hide text. For now, this can only be adjusted using the custom code we have provided.

However, we do plan to find a solution for this in the future, either through a dedicated option or by using the CSS conditional group rule @container. Unfortunately, this @container feature has not yet gained full support across all major browsers, but it is getting closer to becoming widely adopted by the end of 2025.

Kind Regards

[Author]

Posts