Woocommerce product page bug

[avanaa]

Hello,

There seems to be a bug on the woocommerce product page image gallery. When a product is added to cart the product image collapses (but not the mini thumbnail) and it gets messy with the “added to cart” message overlapping.

Thanks for looking into this!

Here is an example.

Before the product is added to cart:

After the product is added to cart:

[christian]

Hey @avanaa,

I tested what you’ve described in my test site and the thumbnail disappear. I do see that the thumbnail disappears in your site but we need to check if this is not caused by third-party factors so would you mind doing the following troubleshooting steps and checking if the issue persists after each step.

2. If you’re using a caching plugin, clear all caches then deactivate your caching plugin and other optimization plugins. Also, clear the browser’s cache.

3. If you’re using a CDN, please clear the CDN’s cache and temporarily disable optimization services.

4. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

5. Activate the child theme.

Please do those steps if there’s an issue in your site.

@Themeco1

##How To Post A Support Question

When posting be as specific as possible in describing the issue. Simply saying “My site is broken” or “I did an update and now nothing works” is not helpful. List the issue in detail including any steps you have taken to troubleshoot and always remember to first test 3rd party plugins by deactivating them one by one and ensuring all caches have been emptied. The vast majority of issues we see can be resolved or at least identified by doing this.

Thanks.

[avanaa]

I checked on my staging website: no caching, no cdn, no plugin, only Woo Commerce and Cornerstone activated and I get the exact same behaviour. So I’m left wondering if it’s a problem with woocommerce or X ?

Thanks for looking into this!
Malik

[ruenel]

Hello @avanaa,

I have tried to replicate this issue in our local testing servers. We cannot replicate and it is evident in our shop demo here: http://demo.theme.co/shop-integrity/product/flying-ninja/

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

[avanaa]

Here are the info to my staging site:

[ruenel]

Hello @avanaa,

I have logged in and investigated the issue. It is caused by your custom css:

.woocommerce-message {
  width: 92%;
  float: right;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  left: -4%; 
  text-align: left;
  background-color: rgba(221,133,0,0.1);
  color: rgba(221,133,0,1);
  border-color: rgba(221,133,0,0.3);
} 

Please have it updated and use this instead:

.woocommerce-message {
  text-align: left;
  background-color: rgba(221,133,0,0.1);
  color: rgba(221,133,0,1);
  border-color: rgba(221,133,0,0.3);
} 

Kindly let us know how it goes.

[avanaa]

Hello
I tried the above code without any success.
I tried to erase all custom css: no success.
I tried to erase custom js: no success.
I tried to erase all functions.php code: no success!

;-(

Malik

[lely]

Hello Malik.

On that staging site, I have commented your custom CSS on Theme Options > Global CSS and added the one recommended by Ruenel.

This is the result now:

No overlap. It is now fixed. Please check.