Add to Cart and Wish buttons disappear on Swatch Change in Mobile Browser

Hello,

Please check the following URL in any mobile browser:
https://woodmart.xtemos.com/shop/?opt=quick_shop

Change swatch of any variable product.

You will see that the Add to Cart (left-bottom) and Add to Wishlist (right-top) buttons will disappear. How fix this?

Mobiles:
Google Nexus 6
Samsung S7, S8, S9, S10, A30

Thanks

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

.woodmart-hover-quick .woodmart-buttons {
opacity: 1!important;
}
.woodmart-hover-quick .woodmart-add-btn {
    -webkit-transform: none!important;
    transform: none!important;
}

Best Regards

Hi,

1. I’m using the child theme so do let me know the media query in which I have to encapsulate the given rule.

2. It seems an issue after the newer theme release. When the next theme version will launch with the fix? An approximate time duration is enough.

Thanks

Hello,

No matter child theme or parent, navigate to Dashboard > Theme Settings > Custom CSS > find Mobile field, add the code.

The next update will be released within approximately two weeks.

Best Regards

Hi,

The version 4.1 has been out still this issue persists in this major release in the Woodmart theme.

It’s not a good idea to fix this issue in the child. Please fix this in the next release for sure.

Hello,

Please just add the custom code provided above to the Theme Settings > Custom CSS > Mobile. You do not need to install and activate the child theme. Or you do not need to switch to the parent theme if you use the child.

Best Regards

Hi,

I fully understand your explanation. However, I’m using a child theme as I’ve to modify the template files or declare functions.

So I can definitely add CSS rules provided at the proper location. But my concern is that additional CSS rules shouldn’t be added to fix any bug/issue in the theme. The sole purpose of adding such rules is to apply customization specific to the project.

Thus adding the rule is not a concern.
Concern is that, this is an issue and faulty behavior associated with the theme and it must be fixed at that level.

Hope you would be agree and resolve the same. If the team doesn’t consider button disappearing in the mobile browser as a bug and further has no plan to fix the same in the next release, do let me know.

Thank you

Hello,

Thumbnail preview on product loop is not a bug, this is the way it works. This behavior was implemented in our theme from the first version and can be visible on our demo site for the past several years. The icons are hidden in order to ensure a better view for the product image, a buyer should click the swatch once again to make the icons visible: https://gyazo.com/1147b8a8d79fc2c408dd9cf7ca18ddd1

We can’t change quick shop thumbnail preview easily in theme files without harming work experience of our other themes clients since the vast majority of them has already working sites that didn’t have any issues with thumbnail preview.

To change this behavior on your site try to use the provided media query custom code. You can safely use it within your child theme and it will work with our theme future updates without any conflict.

@media (max-width: 1024px) {
.woodmart-hover-quick .woodmart-buttons {
  opacity: 1!important;
}
.woodmart-hover-quick .woodmart-add-btn {
  -webkit-transform: none!important;
  transform: none!important;
}
}

Best Regards

Hi,

Thanks for the clarification. If it is that then I would add the CSS provided. Just for information, this behavior wasn’t there in the version 3.6 to 3.8 so I thought it’s an issue.

Thanks again.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

Hi,

Can’t be the behavior like:

1. Person clicks to the color swatch.
2. The cart/wishlist buttons slide out of the view with the animation until the loading spinner is visible.
3. Upon selected swatch image load, the buttons slide in again.

I’m pretty sure it was the default behavior while I purchased the theme.

Thanks

Hello,

We have checked quick shop variation attribute images preview in older 3.6-3.8 versions and it looks the same like is look now. Please check the video (https://gyazo.com/e1f67cb87189935cbdcb6823befb05f3).

If you want to investigate it with yourself, we can provide you with an older version of WoodMart theme.

Best Regards

Hi,

May be I’m mislead or have messed with other issues. However, I would also like to add my points along with quoting your statements.

The icons are hidden in order to ensure a better view for the product image.

This doesn’t seem a valid point alone. The presence of Hot as well as percentage discount labels weaker the purpose you expressed. Their presence also hide the clear view of thumbnails on shop pages. None except image views on the single product page can be the best suitable option.

A buyer should click the swatch once again to make the icons visible.

While entering in a shop people tend to push or pull the door as per their habits, no matter you’ve labeled “PUSH” at one side and “PULL” to another. So how can we expect the buyer to toggle swatch (s/he should click)?

Even I couldn’t identify that I need to bring the default image back to get the button. Also, double tap isn’t a quite common practice yet. It totally looks like a human mistake that forgot to put buttons back. The only option I thought was, click the image and let the product page appear.

Additionally, there is no data of how many theme buyers have implemented the quick shop design. May be there are more fancy designs. Further, the name says “Quick Shop” but the appearance of the shop buttons has been made tricky.

We can’t change quick shop thumbnail preview easily in theme files without harming work experience of our other themes clients since the vast majority of them has already working sites that didn’t have any issues with thumbnail preview.

The very first purpose of an e-commerce site is to make sales. Appearance is also a core part but not at the cost of display thumbnail but hide mandatory cart/wishlist buttons. Existing clients won’t notice it because its not a bug, it’s a conceptual concern.

Definitely you have provided custom CSS to keep them always visible. However, that looks more dirty with the absent of slide in/out CSS animation. So I asked for hiding them while spinner is visible and then slide back to the view.

Finally, a workaround can be adding a theme option that when checked, would suppress button hiding behavior (on loading completion) through another class but respect the animation. Or a new design called “Quick Buttons” can be introduced.

Hope you would consider my statement.

Thanks

Hello,

We shall consider this feature request and perhaps we shall add it to one of our future updates. We do not promise we shall do in the nearest updates.

Best Regards

[Author]

Posts