Product page layout changes when the plugin is enabled
-
Hello,
I’m having an issue with this plugin.
It was working perfectly until a few days ago, but now it’s changing the entire layout of my product pages. Normally, the product image is displayed on the left with the product details (title, price, Add to Cart button, etc.) on the right. However, when I activate the plugin, the main product image becomes full-screen, and all the product details are moved below it.
Has anyone experienced the same issue or knows how to fix it? 🙁
-
Hi,
Thanks for reporting this. If the plugin was working normally and the issue started only recently, then the most likely cause is a change that was made on the site rather than a plugin update itself. Since you mentioned there were no recent updates, I’d recommend checking for any recent changes such as theme modifications, custom CSS/JS, WooCommerce template changes, or other plugins that could affect the product page layout.
A good next step is to roll back the most recent changes one by one until the layout returns to normal. If possible, try temporarily switching to a default theme or disabling other plugins to see whether the issue disappears. That will help identify the exact cause.
Thanks again for the report, and hopefully this helps narrow it down.
Maybe the theme was updated, but the issue started right after that. It seems that the plugin completely changes the layout by removing essential code, such as
data-gallery="default", which is required for the product page layout to work correctly.Hi, could you let me know if there’s a way to fix this issue? I can confirm that the theme has been updated, but it appears that the plugin is overriding the main layout.
Hi;
SVI has to replace the default theme/woocommerce product gallery to work, that’s how it always worked.Since we do not yet have the site URL, the theme name, or the exact setup being used, it is difficult to confirm the root cause from here. However, this does seem like an edge case, and a major layout break caused only by a theme update is unusual unless the theme made significant changes to the product page structure or WooCommerce templates.
If you can share the site URL, the active theme name/version, and whether any custom WooCommerce templates or custom code are being used, I can help narrow down the conflict more precisely.
Cheer
Product page: https://www.kirainushop.it/prodotto/orecchini-bianchi-fiore/
Woocommerce version: 10.9.4
Theme: Blocksy version: 2.1.50 (with blocksy child)Additional theme CSS:
textarea {
–theme-form-field-border-radius: 20px;
} footer [data-id=”text”] h3 {font-size: 17px; margin-bottom: 5px;}
.elementor-widget-n-accordion .e-n-accordion-item [aria-expanded=”false”] {
border-radius: 20px;
}.ct-breadcrumbs-shortcode {
–theme-text-color: #ffffffab;
–theme-link-initial-color: #ffffffab;
–theme-link-hover-color: var(–wp–preset–color–white);
}.ct-newsletter-subscribe-shortcode {
–theme-form-text-initial-color: var(–wp–preset–color–palette-color-5);
–theme-form-text-focus-color: var(–wp–preset–color–palette-color-5);
–theme-form-field-border-initial-color: var(–wp–preset–color–palette-color-1);
–theme-form-field-border-focus-color: var(–wp–preset–color–palette-color-2);
}.rank-math-question {font-size:1rem}
.ose-youtube {
display: block!important;
}
.ppcp-messages {
margin-top: 1rem;
}
/** Rimuovo la posizione sticky perché in conflicco con Packlink PRO **/
@media (min-width: 1000px) {
.ct-order-review, .sticky-summary .entry-summary, .sticky-gallery .woocommerce-product-gallery {
position: static;
}} pl-picker-modal:before {content: ''; display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: -1;}
.lp-content {
border-radius: 20px;
}
Would that be enough, or do you need anything else?Hi,
You can add the following snippet to your child theme’s functions.php as a temporary compatibility fix. It will make the SVI gallery wrapper expose the same data-gallery=”default” attribute that Blocksy expects, which should restore the normal product-page layout:
add_action( ‘wp_footer’, function () {
if ( ! is_product() ) {
return;
}echo '<script> document.addEventListener("DOMContentLoaded", function () { document.querySelectorAll(".gallery-svi.woocommerce-product-gallery").forEach(function (el) { el.setAttribute("data-gallery", "default"); }); }); </script>';} );
Perfect, it works again now! Thanks 🙂
Awesome, I’m so glad to hear that fixed it for you!
If you have a quick moment, would you mind leaving us a review? It really helps us out and lets other users know we’ve got their back. Thanks again!
Hi! Sorry, the plugin is giving me another problem with single products. It creates a lot of space between the first image and the gallery. But if I then click on the gallery, the layout is visible again. This problem doesn’t occur with products with variations. How can I fix it? Here are two examples:
Hi! Sorry, the plugin is giving me another problem with single products. It creates a lot of space between the first image and the gallery. But if I then click on the gallery, the layout is visible again. This problem doesn’t occur with products with variations. How can I fix it? Here are two examples:https://www.kirainushop.it/prodotto/tazza-cane-urlo-munch/ single product
https://www.kirainushop.it/prodotto/anello-legno-nero-galaxy/ product with variation
Thanks 🙂
It looks like the plugin’s JavaScript is incorrectly calculating the min-height inline based on the image height written in the code. Can this be fixed?
Hey ,
It look like your theme has had a new update and yo dont need the previous code. Also the min-height is not done by my plugin so you will have to reach out to the theme developers. THey should not interfer with elements that dont belong to them.
Cheers,
You must be logged in to reply to this topic.