Woodmart problems after update from version 8.2.7 to 8.3.0+

Hello,
After Woodmart theme update from 8.2.7 up – even to the current latest (8.3.3)
The homepage and single product page crash – like @ the screenshots.
Tried updating everything to the newest version – all plugins, woodmart core, patches.
Nothing helps.
Any ideas?
Urgent
Thank you

Attachments:

You must be logged in to view attached files.

further imgs

Attachments:

You must be logged in to view attached files.

Hello,

Could you please disable all plugins that are not related to our theme and provide us your admin access so we can check it?

Thank you in advance

Login details sent in private
This is dev site – please do what you need.
You’re allowed to disable plugins and do necessary tests.

Please disable all plugins that are not related to our theme so we don’t break anything. Also, it seems to be affected by the custom CSS you added to Theme Settings. Please temporarily remove that CSS as well.

Disabled all plugins except woodmart and elementor
Deleted all CSS
The problem still occurs.

1. Go to Elementor -> Settings and enabled the Optimized Markup option https://monosnap.ai/file/TXQH1zOYex7qiJvV8wseYsABt8x43T

2. As we can see, you still have some plugin that affects images and add some kind of lazy loading

That isn’t the issue.
The difference is, without these plugins, images are broken in the single product’s “related items” grid.
The page is broken nevertheless. (homepage and single product page)
That’s why I’ve activated these two back yesterday.
Now, they’re off – please have a look.
We’ve got woodmart core, elementor and woocommerce as the only active plugins.

Nothing changed; we still see some optimizations applied to images on the product page. Here is a screenshot https://gyazo.com/b8a8fab0c8b03eeac24c73f15e0c3089

hmm, honestly – no idea where it comes from…
Everything is switched off.
CSSes deleted
Code snippets (all custom code) off.

It may be something related to the server optimization extensions. Consult with your server’s provider for help.

Kind Regards

The thing is, everything works normally if I rollback the theme to 8.2.7.
So why doesn’t it work with all the plugins, extensions, etc. with 8.3.0 and above?
I don’t think it’s something on our side, but rather something that was modified in the theme.

Anyway, this lazy loading affects the images and causes this issue. You need to disable it first and test how it works without it.

Done some tests and the results are:
1. Images broken (stretched vertically) on the homepage and in single product layout are in fact broken by the current incompatibility with our server’s caching – I’ve tested the dev site on another server and it works good.
The question here is: What can we do about it? We still need the server caching as it has worked flawlessly until the 8.3.0+ update. We cannot get rid of it as our server is currently overwhelmed (in 1-2 weeks time we’re changing servers anyway, so we can wait with this issue until that time and see what happens after migrating to a new server)
2. The homepage’s section (only one, fortunately) is still broken – It has started behaving differently after the theme update. On the production site (woodmart v 8.2.7) it still works as normal, while on dev site (woodmart v 8.3.3) it’s broken – there’s nothing changed between them. I’ve reactivated all the plugins, CSS, code snippets, etc. and it stays like that all the time.
The only way to fix it is to change columns number in text editor from 2 to 1, but the previous design is the one we want to keep and there’s no way now to force the text editor to wrap the columns when there’s not enough inline space – and this is what happens – shown @ the screenshots – it just overflows, flooding the second container. What can we do about it?
Login details are still valid, so please feel free to login and have a look at it. (pages > home)
Cheers

Attachments:

You must be logged in to view attached files.

This is what the columns should look like – a screenshot from a live site (woodmart v 8.2.7 ATM)

Attachments:

You must be logged in to view attached files.

Here is a custom CSS code to fix the thumbnails issue

.wd-gallery-thumb img:is([sizes="auto" i], [sizes^="auto," i]) {
contain-intrinsic-size: auto 160px;
    object-fit: contain;
}

As for the home page, we see that you still use unoptimized markup. Please enable this option in Elementor settings https://monosnap.ai/file/sFepi4D9GBCkNHDeTaXvvRFJzR17Pq

Ok,
This CSS helped to fix the thumbnails. They’re square again (and they stay like that no matter how many times I refresh the page).
But, the problem comes up in many other places where imgs are present on the site – either product archive, related products in single product layout, etc.
Tried to improvise and modified the selector from:
“.wd-gallery-thumb img:is([sizes=”auto” i], [sizes^=”auto,” i])”
to:
“body img:is([sizes=”auto” i], [sizes^=”auto,” i])”
But it doesn’t behave super properly. It does feel like an “emergency medicine”, instead of proper tech collision fix. :/ When we fix it in one place, the problem shows up in a different one…
Do you have any idea what else can be the problem here? Why did it stop working suddenly after the update? If we could catch the core issue that causes it, it would be best to just eliminate the problem in the root.
Moreover, will this CSS rule work with old browsers? We’ve got a lot of customers using old PC’s, with old browsers installed.
Secondly, Homepage was also fixed by activating that function. Works alright.
Thank you

Attachments:

You must be logged in to view attached files.

Hello,

In this case, we have to return to the lazy loading applied to all images on your website, as shown in the screenshot. Since our theme has its own optimized lazy loading, it doesn’t support any 3rd party lazy loading for images. You need to disable this option on your server; otherwise, you will have these problems with images everywhere

Kind Regards

Ok, understood.
Was this lazy loading of yours added in the 8.3.0 version? Because as I said – 8.2.7 works good on live sites.
We’ll wait until the migration and see what can be done with the server-side caching.
I won’t be updating the production until then.
I’ll keep you posted.
Thanks

No, we had that function from the beginning. And we never declared support for third-party lazy loading. Actually, you don’t need to use them at all since our theme’s core lazy loading is the most optimized for performance.

I’m just looking for a reason why it stopped working all of sudden after the update.
We’ve had it working for a year flawlessly on 10 shops simultaneously – on the same server, with same configuration.
Right now, if I rollback to 8.2.7, it works again.

Could you please send us a link to the page where you rolled back so we can check how it works?

Sure:
https://warsztat.kurek.pl – this is a live site, v8.2.7
https://dev.kurek.pl – this one is a copy, v8.3.3

The primary issue with the images was that your website, running the WoodMart 8.3.3 theme, had CSS present that directly affects the image aspect ratio. Here is what it looks like, for example, on a product page when inspecting the gallery images (screenshot: https://monosnap.ai/file/T9AbpKmvApvEk6ASccetqYTtv7muHE). This CSS is not part of our theme or its update. We cannot know for sure where it originates, but we can approximately say that it is most likely part of an image processing or site optimization plugin. It was this specific CSS that we were trying to override with the custom code provided earlier (https://xtemos.com/forums/topic/woodmart-problems-after-update-from-version-8-2-7-to-8-3-0/#post-692405), in order to temporarily improve the appearance of the images on the 8.3.3 site.
The reason why images look normal on your other site with the WoodMart 8.2.7 theme is that it does not have the aforementioned CSS for images, and consequently, they display correctly.
To properly debug your websites and ensure that the incorrect image appearance is indeed caused by the theme update, you need to configure both sites identically so that they either both have, or both do not have, this CSS added by a third-party custom code or plugin. After comparing them in this identical state, it will be possible to confirm whether the problem is caused by the theme update, and if so, to fix it.

The CSS code that you see “active” on the screenshot, is a code provided by you a few messages earlier – to try fixing the page.
“.wd-gallery-thumb img:is([sizes=”auto” i], [sizes^=”auto,” i]) {
contain-intrinsic-size: auto 160px;
object-fit: contain;
}”

I’ve just deactivated it, so you can inspect again.
BOTH sites (dev.kurek.pl and warsztat.kurek.pl) are identical copies, on the same server, with the same settings and server-side caching.
Exactly the same shops that only differ in Woodmart version, which crashes when updated from 8.2.7 to 8.3.3.
Everything works good on the older version – without any changes.
This is clearly a theme update issue as we’ve done nothing prior to the crash.
And as I said, after rollback to 8.2.7, the dev site also works totally fine.

Hi,

As we already mentioned in our previous response, the code we provided to you only overrides existing code on your site. In your response, you are probably confusing the existing code on your site with the code we provided to override the existing one. In our previous response, we showed a screenshot (https://monosnap.ai/file/T9AbpKmvApvEk6ASccetqYTtv7muHE) of the already existing code, and it looks like this:

img:is([sizes="auto" i], [sizes^="auto," I]) { 
contain-intrinsic-size: 3000px 1500px; 
}

The code we provided to you to temporarily fix this has much smaller values in an attempt to reduce the image size and looks like this:

.wd-gallery-thumb img:is([sizes="auto" i], [sizes^="auto," i]) { 
contain-intrinsic-size: auto 160px; object-fit: contain; 
}

Therefore, from this, we can conclude that you are giving an example of a completely different code that is not the root cause, as the image problem is created by the CSS code with the value contain-intrinsic-size: 3000px 1500px, which we did not provide to you, and which is not part of our theme, although it is the main difference in why the images look different on the sites https://warsztat.kurek.pl and https://dev.kurek.pl.

For clarity, you can view both sites on the same product page: https://dev.kurek.pl/15-kg-o-08mm-mig-mag-drut-spawalniczy-g3si1-sg2/ and https://warsztat.kurek.pl/15-kg-o-08mm-mig-mag-drut-spawalniczy-g3si1-sg2/. If you inspect the same image, you can see that the site https://dev.kurek.pl/ has the aforementioned CSS with the value contain-intrinsic-size: 3000px 1500px;, and the site https://warsztat.kurek.pl/ does not have it. You can check this yourself using DevTools.

For demonstration, we show the same page on different sites where the styles are visible on one site and their absence on the other: video https://monosnap.ai/file/z4Xp97jBxFmxpR5120YPlTGTRlUibI. As we wrote earlier, this CSS that adds the styles “contain-intrinsic-size: 3000px 1500px;” to the images is not part of our theme and is related to the “sizes” attributes given to the images on your site.

To investigate why the two sites differ, we additionally need to review the settings of your live site https://warsztat.kurek.pl. Please provide us with access credentials for it so we can log in and check its configuration.

Kind Regards

Ok,
Login credentials sent.
If you’ll have any problems logging in, please provide me with the IP you’re using, so I can whitelist it.

Try to do the following:

1. Add this line to the functions.php file in the child theme

remove_action( 'pre_option_elementor_optimized_image_loading', '__return_zero' );

2. Enable the following option in Elementor’s settings https://monosnap.ai/file/p2EcrOu6DtA1l9wfJkK5gx4WBWMGLQ

Kind Regards

Tried that:
-added code to the theme’s functions.php
-tried adding as a code snippet
-enabled that option in elementor

Unfortunately, still no luck… 🙁

Attachments:

You must be logged in to view attached files.

Please, try to replace the previous code with the following one and test how it works.

add_action( 'pre_option_elementor_optimized_image_loading', function () {
	return '1';
}, 20 );

[Author]

Posts