Woocommerce gallery not working properly when I use product page shortcode

Support
#1

Woocommerce gallery is not working properly when I use product page shortcode.

I have a few product pages I need to add more information that is possible on normal produt page. That’s why I have made separate pages for products and use product page shortcodes to add the product itself there.

I am quite positive that my page worked fine after the help I got from you. ( https://theme.co/apex/forum/t/problems-with-responsive-view-using-chrome/4366)
But now I spotted out a problem. When I use magnifier trying to see product images bigger, the image opens behind all the other content.

Gallery works fine on normal product pages.

Could you help me with this? How can I make gallery work correctly?
I’ll add secure note including url and login information.

Thank you!

#2

Hello There,

Thanks for writing in! I have logged in and investigated the issue. I can confirm that this issue is happening in your site. I have tested this over and over in our local testing servers and we could not replicate the issue. This could be caused by a 3rd party plugin. Could you please do a test for plugin conflict? You can do it by temporarily disable the plugins one at a time. And still if that does not work, could you please re install X and WooCommerce?

Please let us know how it goes.

#3

Hi,

Thank you for your reply @RueNel! I tested plugins but the problem stayed the same. Could you give me some instruction how to do the re installation? The way that I don’t broke anything. :slight_smile:

#4

Hi there,

I went to your website and removed all the custom CSS which you have added in X > Launch > Options > CSS and tested the website. The result was as expected with no problems:

Please, kindly double check the code to find the section which is responsible for the problem.

Thank you.

#5

Hi @christopher.amirian!
Thank you for your help.

I found out that this code caused the problem:

footer,
.x-section {
z-index: 99999999999;
}

Unfotunately this was given to me by your staff to solve another problem. Could you please check out this topic. https://theme.co/apex/forum/t/problems-with-responsive-view-using-chrome/4366/15

Could you help me to find a solution to make this page work as it should?

Thanks.

#6

Hello There,

Thanks for updating in! I am the one who provide the code which have work in the other site. Most of the time, the custom css given is specific to the site experiencing the issue. That is why sometimes the code will work on another site and there are times that it will not. To resolve your issue, please have your site updated and make use of this code instead:

footer,
.x-section {
   z-index: 9999;
}

We only limit it to 9999. Please let us know how it goes.