the cart icon button recently display messy on shop page

Hello team,

The cart icon button recently display messy, this problem occurs in portrait mode on mobile and ipad mini.
it should be a cart icon the same as before. please help to do something, thank you!

Regards,

attachment for screenshot

Attachments:

You must be logged in to view attached files.

Hello,

Please, provide us with your admin access so we can log in and check this on your side.

Thank you in advance.

Hi, Yes, admin account it’s been pasted in, please use it! thanks!

Hi,

This issue is caused by customization in your child’s theme. Try to switch to the parent theme and check again.

Kind Regards

Hi,

I tried to switch to the parent theme, it seems no problem with parent. so you may help please!

Kind Regards

Hi,

We have disabled your child theme and add to cart button on mobile is shown correctly:

https://prnt.sc/dWQ9R0fj8YVq – with child theme.
https://prnt.sc/4O681GRkQb_V – with the parent theme.

This issue is caused by customization in your child’s theme. Try to remove the following customization.

Kind Regards

Hello,

I asked yith plugin team and got answered with a negation, they said as below:

“The added styling that makes the icon not show is not added by us but by the theme you are using. As you can see in the following image I have disabled some elements of the CSS rule and the icon appears without any problem:

The file that is adding these CSS rules is the following -> wp-content/themes/woodmart/css/parts/woo-mod-add-btn-replace.min.css
”

Regards,

Attachments:

You must be logged in to view attached files.

Hi,

This issue is not caused by our theme styles and removing parts of our theme CSS is not fix the issue.

You have chosen the “Show summary on hover” product design. The following design has a feature – its add to cart button on desktop becomes add to cart icon on mobile devices to save space on the small screen.

How it works (https://woodmart.xtemos.com/shop/):
“Show summary on hover” on desktop (https://prnt.sc/2YbWm7aGBQwB) – add to cart button with text and primary color background.
“Show summary on hover” on mobile (https://prnt.sc/cl9EvZwnFa74) – add to cart buttons with no text in form of an icon without background.

The following design is realized by adding “wd-add-small-btn” to the product hover structure on mobile devices and without following class product hover is looks broken. The video shows how it looks with and without following “wd-add-small-btn” class (https://gyazo.com/4578538818061803090510137dc171f5).

Your child theme contains custom code which is removing the following “wd-add-small-btn” class and broke product hovers style, so the following issue is caused by customization in your child theme. The code that is causing the issue is located on string 89 (screenshot https://prnt.sc/_Nf80NVNysvU) of your child theme functions.php file. To fix it try to remove the following custom code from the child theme or disable the child theme entirely.

Kind Regards

Hello，

Thank you very much for your time to help!
I did remove the code where is located on string 89, and got a good outcome on ipadmini portrait, but it seems to lead to another new issue on ipad mini landscape? So,please help to check again, thanks alot!

Kind Regards

Attachments:

You must be logged in to view attached files.

Hi,

This issue is caused by your custom code related to the add to cart button and tablet (1024) screen width (https://prnt.sc/83rIasAWWlG4). Try to remove or disable custom code related to the product hover design add to cart button.

Kind Regards

Hello team，

Thank you for your great help! Could you please circle the specific content of code? so that I can try to remove!

Kind Reagrds

Hi,

The issue is caused by custom CSS code located in the (min-width: 1024px) media query (https://prnt.sc/RhxsA9LuDqLS). Remove this code or change media query value to 1025pxso it can’t be visible on portrait iPad Mini.

Kind Regards

Hello,

It’s been fixed well finally, thank you so much!

Kind Regards

[Author]

Posts