Strange Issue: Header, Main Menus, Top Header Not visible on Shop Category pages

Bit Important:
Hello Luke,

There is one strange issue. The Header, Main menu and Top header is not visible on the Shop and Category pages.
However, those are visible on other pages like Home, Product page, standard pages like About Us, Contact Us and others.

You can try to replicate the same behaviour by checking the Shop and Category pages as a Visitor or Guest user. Not as Admin.

Even if we assume that WP Rocket could be the reason, then why the Main Menu and header is visible on other pages including Home and product pages.
And what needs to be Excluded in the WP Rocket settings, so as to make these work, if at all that makes the difference.

The site is already Live. If at all it requires you to deactivate any plugin, then you can do so at your end. Once resolved, please activate them back.

Regards

Hello Luke,

In addition to my previous message, here is the screenshot of what it appears like on Shop and Category pages while being Logged-Out or as a visitor.

https://i2.paste.pics/65e6e04fd9fc1a7f0a41ff7d7b28e34f.png

Regards

Hello,

Such happens when the “Mobile DOM optimization (experimental)” option is enabled in Theme Settings -> Performance -> Other: https://take.ms/7nM5Z

It’s an experimental option so in such cases as you have, you need to disable it, clear the cache and recheck the issue.

Thanks for your patience. Hopefully, you are doing well.

Kind Regards

Hello,

But this is happening even on Desktop also. Means, while viewing on Desktop.
Also, is there any other alternative or way to keep mobile DOM optimization enabled and have that worked as well.
Means, the Header Main menu is visible

Regards

Hello Luke,

In addition to our previous message, I would like to inform you the Mobile DOM optimization was enabled since more than 20 months or so (or almost beginning). So how can this is causing the issues now.

Other than that, the issue is visible on Desktops also (as I mentioned earlier).

Other than that, please take a note, that the Header and Main Menu is visible on Home page (and other pages) as well as on Single Product pages.
The only area, these are not visible is – Shop and Category pages.
So there must be something related to that.

Regards

[Luke Nielsen]

Hello,

In general, such an issue (https://i2.paste.pics/65e6e04fd9fc1a7f0a41ff7d7b28e34f.png) could be caused only with enabled the “Mobile DOM optimization (experimental)” option.

It should work well when the cache plugin loaded various cache files for desktop and mobile. So please navigate to the settings of the WP Rocket -> Cache -> turn on the “Separate cache files for mobile devices”, then clear all caches and recheck the issue.

https://prnt.sc/ViJsx-czXvdu

Kind Regards

• This reply was modified 8 months, 2 weeks ago by Luke Nielsen.

Hello Luke,

Strange to know about that, if we enable the “Mobile DOM optimization option, then it is Not affecting on the mobile devices. Means correctly showing on the mobile device, atleast as of now.
Rather not showing correctly on Desktops. I could not understand the reason behind this.
Any ideas.

However, as per your suggestion, I tried to enable the setting to turn on the “Separate cache files for mobile devices”
But found that it is already enabled. I think probably you might have enabled that from your end.
Please confirm.

2. There is one another thing, that we recently come across. That the Price is Not visible on Shop or Category page, for the product that is Out of Stock.

I think that was not the case earlier –
https://i2.paste.pics/140b2dec644434710de99eeef10b4308.png
https://www.vasangini.com/product-category/chikankari-kurti/page/2/

Is this a bug or some issue. How can it be resolved.

Regards

Hello,

1. The reason why the header on the desktop is hidden is that at this moment the header is loaded from the mobile, on which the entire desktop template is deleted to reduce the DOM size.

Also, I did not enable that option and I still see that it is not enabled on your side: https://prnt.sc/VewCiXSC_YMi

2. This is the behavior from WooCommerce. In any case, you can check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand whether it is our theme issue.

Kind Regards

[harshwe]

Hello Luke,

1. First of all, the Headers are different for Mobile and desktop. So I could not find it logical at all that if Mobile DOM is enabled, then it will affect the Header for Desktop, even though if it is different.

I left the separate cache for mobile option unchecked and just Re-Saved the settings without changing anything. And found that it is currently working on Desktop. That means, without enabling the Separate Cache it is working. So it seems, there could be some other reason.

2. This does not seems default behaviour of Woocommerce. I think you might not have gone through the concern and our message properly, this time.
I tried on another of our domain with the default theme, and it shows the pricing for out of stock product on Shop page, as well as on Single product page, including the Read more text button
https://i2.paste.pics/05ba4d6cfa6b249bb321f82bff828b99.png

If you require, I can share the credentials of this as well.
PS: I tried this on another one, because, our site is Live, and it breaks the Widgets and few things while switching to theme.

Most importantly, I definitely remember, that with Woodmart theme also, when the product goes Out-of-Stock, it earlier used to show the “Show More” or “View Details” like text on the Shop page for that specific product. I think this has been changed recently in the woodmart theme (probably in one of the recent updates)
And now, nothing is showing up. Neither View details, View more, Read more, and with No price.

So either this could be due to some recent change in the theme or some sort of bug or issue. In either case, this should be resolved.

Also, we tried the same thing on Live site of that same other domain (using Xstore theme), and found that it is also showing the Price on products that are Out-of stock on same Shop and category pages.

Regards

• This reply was modified 8 months, 2 weeks ago by harshwe.

Hello,

1. It is an experimental option and if it does not work correctly for you, then you could turn it off.

2. Send me credentials to that website so I will investigate it. Also, please send access to the staging site so I will check it there as well.

Kind Regards

[harshwe]

Hello Luke,

1. This is Not actually the solution to the core problem.
Also, I am trying to provide more and more details and this time your response does not seems relevant at all.
Unfortunately, I was not expecting such a response on this problem.

There must be some solution on this, as well as some logical reason behind the issue.
Would appreciate, if you could please our last 2 messages again, that explains the issue. As well as, that we are using different header for mobile.
And even if we do not enable – “Use separate cache files” for mobile (in WP Rocket), then also, it sometime worked, when we just Re-saved it, without making any change.

2. Admin credentials of one of our another domain site is in Private content area. This is a staging site hence you can test accordingly.
PS: If you want you can also try with your theme also by Installing it. However, as per your suggestion we tested with the default theme on this site, and it is showing the Price as well as Read More button link, for the Out-of-Stock product

Regards

• This reply was modified 8 months, 1 week ago by harshwe.

Hello,

1. Do you have that issue on the live site?

2. On the clean version there is no such issue, so that means that the issue could be in the custom code or some plugins, therefore, please make a full clone of the live website and send me access to that so I will start to debug.

https://prnt.sc/Y7JBPoyxoXcs

I await your response.

Kind Regards

Hello,

1. Yes, on the Live site. That keeps appearing every next day or two with same settings. And can be found while we test in the Incognito mode and while being logged-out.

Sharing credentials of staging site (of the Live site) below. You can test on that as well.

2. That is what I was trying to inform since beginning. Not sure, why you wrote that this is the default behaviour of Woocommerce and will be same with default theme also. Which, is not the case, with the default them and it is showing the price and Read more button for Out-of-stock products. And that was the case with the Woodmart theme also, earlier.
Other than this, this is breaking the layout of Grid on Shop, Category archive pages. As the grid for the product that is Out-of-stock is smaller than others, making it inconsistent and bit Odd also.

However, Staging (exact cloning) site has been created for you to test. Please find credentials below

PS:
A request – If you could please try to answer with details, rather than short messages. And if you could have asked for such details and think about testing, then this would have take lesser back-and-forth communications.
And please try to answer more than once in a day, wherever possible. That could help us to resolve the issues quickly.

Regards

Hello,

1. I have enabled the “Separate cache files for mobile devices” option in the settings of the WP Rocket and it seems that everything works correctly, so show the video how it doesn’t work for you.

2. I checked on the default theme that issue and I see that there is the same issue, here is a screenshot: https://monosnap.com/file/EqiTWfihoDwhcqHNEJyYeGxerBYXa4 . So seems that the issue related to WooCommerce itself.

Kind Regards

[Author]

Posts