Product gallery issues after update

Hi there!

We have just updated the theme and experience issues on the product pages with the product gallery display. All images are displayed below each other and the product labels are displayed largely above the images. We use a custom CSS for the labels previously provided by Xtemos support. The css worked fine before the update.
We have already troubleshot the site and the error is consistent with the theme, woo commerce, wood mart core and WP Page bakery active and all other plugins deactivated.

Attachments:

You must be logged in to view attached files.

Hello,

Please confirm permission for plugin deactivation and switching to the parent/default theme for testing.

Looking forward to collaborating with you!

Best Regards

Hey!

There is a staging site available via our backend.

thanks.

FYI: as the site is live, we have currently deactivated labels on product images in the theme settings. Please check the staging website to see the bug or reactivate temporarily.
Thanks

Hello,

I have checked the issue on your staging website. For testing, I deactivated the third-party plugins and activated the WoodMart parent theme. After updating the product and checking the product labels and gallery, both the product gallery and labels are displaying correctly.

I also noticed that you are currently working on the staging site and have re-enabled some plugins while disabling others.

To properly isolate the conflict, please deactivate all third-party plugins and keep only the following active:
– WoodMart Core
– WooCommerce
– WPBakery Page Builder

Then update/check the affected product and verify the gallery and labels again.

If the issue does not occur with only these required plugins active, please activate the third-party plugins one by one and check after each activation. This will help identify the plugin causing the conflict.

Please let us know the result after testing.

Best Regards.

Hi there!

Pleas note that you did not entered the staging site but carried out all tests on the !live website!.
We therefore had to interrupt your actions. The account that was working on our website, does not have access to the staging site so it`s impossible, that our account was interrupting your work on the staging site…

To enter the staging site, you have to click the link and then open the staging site within WP Staging plugin. You will need to log into the staging site again but the domain is different than delayon-eyewear.com.

As for the products: We have saved multiple products several times and we could not reproduce your fix.

Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Your issue has been resolved. I have deactivated plugins on your site and it is working fine.

See the screenshot for clarification: https://postimg.cc/Yv3XzHnH

Please check back your site again and check the issue. Please visit your site and reactivate the plugin one by one to check which one causes the issue.

Best Regards

Hi there,

Please advise what plugins have been deactivated. We have tried to find your fix however when reactivating the labels in theme settings the bug is persistent.

Thanks

Hello,

Please now visit your site and verify the issue on the staging site.

For clarification see this product:
https://delayon-eyewear.com/grissom/?product=pulse

I await your response.

Best Regards

Dear Aizaz,

I´m sorry but you have simply deactivated EVERY plugin except the theme ones and WooCommerce. I´m not sure this can be considered a solution to a live webshop that needs a bit more tech than just the bare minimum. Just by EU regulations we won’t be able to run the site like that…

Additionally, we have troubleshot the website again and even with the same bare minimum of plugins activated as you had, we were not able to resolve this issue in trouble shooting mode.

Please advise.

thanks

Hello,

Thank you for the clarification.

For testing purposes, I have deactivated the third-party plugins on the staging website only. I understand that your live website requires the additional plugins and that deactivating them is not a permanent solution.

On the staging site, I have added the following CSS under > Theme Settings > Custom CSS > Global CSS area.

.woocommerce-product-gallery .product-labels {
    position: absolute !important;
    top: 15px !important;
    inset-inline-end: 15px !important;
    z-index: 10 !important;
    flex: 0 0 auto !important;
    max-width: max-content !important;
    pointer-events: none;
}

.woocommerce-product-gallery .product-label img {
    max-width: 45px !important;
    height: auto !important;
    display: block;
}

Best Regards

Thanks for the CSS. it partially worked as we now see the labels again. However we have noticed issues with the “hot” label (heiß). While the color is set to red and is correctly loading in red, the color gets overruled and replayed with white once loading of the page has finished.

Attachments:

You must be logged in to view attached files.

Hello,

Try to add the following Custom CSS code in Theme Settings > Custom CSS.

.wd-single-gallery .product-labels .product-label,
.woocommerce-product-gallery .product-labels .product-label,
.wd .product-label.attribute-label,
.wd .product-label.hot,
.wd .product-label:not(.label-with-img) {
    background: #f72c2c !important;
    color: #ffffff !important;
}

Best Regards

Hi there!

The updated CSS does not work and only makes things worse (see mobile screenshot).

Further more: after updating the theme, we are experiencing several issues again:

1. Tabs & Accordions are displayed as buttons (style Modern), not underlined (classic setup) – when changing between styles, there is no difference between classic and modern. Classic is simply not effective in both elements. Additionally: tabs are not displayed in correct order and some elements are moved.

2. Pagination: all pagination elements are displayed vertically not horizontally.

3. Reviews: the CusRev review form is not displayed in full width, but reviews are displayed in the minimal width needed to display all text.

It seems the update has shot the display of central theme elements.

Attachments:

You must be logged in to view attached files.

Hello,

We are currently unable to access the WordPress dashboard because Jetpack Protect is blocking the login page and has flagged our IP address.
https://postimg.cc/7brjZCLQ

Please unblock our IP, or provide another secure way for us to access the WordPress dashboard of the staging site so we can investigate the reported issue.

Best Regards

You are now cleared

Hello,

Sorry it is still the same, Can you please remove the IP restrictions? or whitelist the country Pakistan.

Best Regards

Please check

Hello,

I have checked your site and have not seen the issue, It is showing fine in mobile and desktop.

See Screenshots for clarification:
https://postimg.cc/y30CNV7L
https://postimg.cc/gL3b0YG1
https://postimg.cc/6TZXchCr

Please try clearing all types of cache and double-check the issue. If you have any questions, feel free to contact us.

Best Regards

I’m sorry but this is becoming increasingly frustrating.

1. product labels: of course we have deactivated the product labels as we can not have the bugs ruin our live website. Feel free to activate the attribute labels for a minute or two to see for yourself. We have also updated the staging site that you can simply access via the WP Staging plugin via the backend.

2. Gallery pagination: same here; also deactivated on the live page, however needed!

3. Review forms width: you did not consider this part. Please check.

4. Tabs & accordion: as clearly visible on your screenshot, they are not displayed correctly. the classic setting should separate tabs and accordion elements with a line. Modern styling should display the buttons. However somehow the styling is broken and both tabs and accordion titles are displayed in buttons instead of lines.

Tabs sorting: as seen from your screenshot, the tab opens between the buttons. In your case: the content is displayed between the tab Sens® Red and Sens® Rose. So basically it’s an accordion instead of tabs.

thanks.

Hello,

Thank you for the clarification.

At the moment, I am unable to access either the live website or the staging site:

– When trying to access the live site’s login URL you previously provided, the URL is not working.

– When trying to access the login page through the Account link or /wp-admin, I receive a 403 Forbidden – You don’t have permission to access this resource error: https://postimg.cc/1nW7hbZ2

Because of this, I am currently unable to access the dashboard and investigate the reported issues directly.

Please provide the following:

1. The product page URL on the staging site where all of the reported issues can be reproduced, preferably on a single product page.

2. Valid WP-Admin login credentials for the staging site.

3. If there is any additional security or IP restrictions on the staging site, please make sure access from our side is allowed.

Once I can access the staging site, I will investigate the product labels, gallery pagination, review form width, and Tabs/Accordion styling and behavior.

Best Regards,

[Author]

Posts