[Resolved] Product template breaks when making edits

[Author]

Posts

[sunilM-2]

Tell us what you are trying to do?

I have a Woocommerce product template for all my products.

Recently, whenever I make even a small edit, the product pages completely break.

Here is a product page on a staging site where I made a small edit: hidden link

And you can see what the page is supposed to look like on my main site: hidden link

The change I was trying to make was set left-hand padding in the section below to zero on mobile: hidden link

This has happened for each of my last 3 edit attempts. I have WP Rocket, Perfmatters and Cloudfront CDN .... not sure if these might be causing some issue. I deactivated these plugins (cloudfront operates via perfmatters) and cleared the caches of both Cloudfront and WP Rocket, but the issue persisted.

Please advise and let me know if you need me to give you extra info.

[Shane]

Hi Sunil,

Thank you for getting in touch.

In a case like this when the plugins are not functioning as intended we recommended that you disable the non-toolset plugins.
What this means is that you will need to go through your list of plugins and disable each of your plugins one at a time while checking to see if the issue still remains.

Thanks,
Shane

[sunilM-2]

Hi Shane,

Are there any conflicts between Toolset and the latest version of Spectra (Astra page builder)? I have disabled plugins but the issue remains. When I am logged in it looks normal, but logged out/incognito looks broken

[Shane]

Hi Sunil,

Based on the fact that when you logged it looks normal, I suspect that the issue is caused by caching.

If you have any caching plugin installed, can you disable it and then check the frontend again to see if the issue remains ?

If it does please let me know.
Thanks,
Shane

[sunilM-2]

Hi Shane yes this is what I have done:

I have WP Rocket, Perfmatters and Cloudfront CDN .... not sure if these might be causing some issue. I deactivated these plugins (cloudfront operates via perfmatters) and cleared the caches of both Cloudfront and WP Rocket, but the issue persisted.

Would you like login details to my staging site?

[Shane]

Hi Sunil,

Yes please provide me with the login details.

Thanks,
Shane

[sunilM-2]

Hi Shane,

Have you had a chance to look at this issue?

[Shane]

Hi Sunil,
This seems to be an issue with the Spectra plugin. It appears that the css for the plugin isnt being loaded onto the page.

Take a look at my screenshot

As you can see there are quite a few error 404's on the css for the spectra plugin. Not sure what could be causing this.

Are the sites running on the same server?

Please let me know.
Thanks,
Shane

[sunilM-2]

hi shane,

I am using runcloud as the control panel. Stagin site has an AWS lightsail instance, main site is a Vultr instance.

But both face the same issue: the product template completely breaks with even a tiny edit

[Shane]

Hi Sunil,

Would you mind providing me with admin access to the live site so that I can grab a copy of it ?

This way I can try to test the issue locally to see if this is something that I can replicate?

I've enabled the private fields once more.
Thanks,
Shane

[sunilM-2]

Hi Shane a few extra thoughts that might be helpful:

1) You can disable the cdn inside Perfmatters

2) All css and js minification and aysnc css is done by wp rocket. Delayed + deferred javascript is done by Perfmatters

Thanks,
Sunil

[Shane]

Hi Sunil,

I took a look at the site once more by take a copy and deploying it locally here.

My assumptions were correct in that your server seems to be blocking the css for the Spectra plugin. On my test I was able to make changes to the template and save, while the template still retains its structure. See Screenshot

As you can see there is the text "test refs" at the bottom of the screenshot.

What I recommend here is to get in touch with your server hosts as well as the Spectra plugin's support team as the site works fine on a different server environment.

Thanks,
Shane

[sunilM-2]

Hi Shane,

So do tell them that it is not a plugin or cdn issue, but specifically a server issue? And is there anymore specific information I can give them. I am presuming you mean Runcloud, the control panel.

Also please advise me on what exactly I should ask Spectra

Thanks,
Sunil

[Shane]

Hi Sunil,

They will need to look into the issue as I mentioned in the thread with the screenshots that the css files are returning an error 404. Unfortunately i'm not able to give an accurate description as to why this is occurring , the only thing i currently know is that it works fine on my end.

Perhaps checking with your website hosts and having them look at the console of the site to see the 404 errors on the screenshot will let them know what is blocking the files. It can be the firewall rules for the server.

You can provide them the screenshot I sent as well with the error for them to have a look.

Thanks,
Shane

[sunilM-2]

Hi Shane I found the issue. As you said pointed out, it is a spectra CSS problem. More specifically it was how WP Rocket was removing unused CSS.

I had purged cache and deactivated the plugin before, but the issue was only resolved after I deselected the CSS option within WP Rocket and then cleared the cache.

I will message Spectra as you have suggested. Thank you for all your help!