Compatibility with wp rocket

Hey again,

We are having an issue since the 6.x updates of the theme.
First i need to explain the situation in which it happens:
-wp rocket’s cache of a page has expired or has been removed in wp-admin
-a visitor thats not logged in has a product in their cart
-they click on a page (for example /contact)

When the above happens, wp rocket creates a cached version of that page including the current cart price.
We already found both of wp rockets own suggestions which were either disabling the ajax request, which breaks the sidebar cart view, or not caching cart related script, but that last one was a plugin from 2017 with no updates and didnt work.

Now, before updating to 6.x, this worked fine, so is there anything you, or we, can do to solve this?

PS: on the homepage, on the white part of the header, “klantenservice” has this ghost cart issue, so please take a look. “contact” and “webwinkel” do not have it so you can also see what we expect, versus what actually happens (klantenservice).

Greetings, Koen

Hello,

Yes, it is how WooCommerce works with WP Rocket. It has nothing related to our theme. You can check and see the same behavior with the Storefront theme for example.

Kind Regards

Well, the previous 5.x woodmart version didnt do this, and we’d like that behavior again.
In other words, how can we make sure you don’t see a filled cart for 200ms upon loading a cached page?

You mention in the 6.0 update that using wp rocket works great so please help us resolve this issue

Thanks, and greetings

It was always working this way. You can see the same behavior on our demo. If you want, we can send you our previous version archive and you can test this. Moreover, you can check this mechanism with any WordPress theme that has a WooCommerce cart widget in the header.

Which script file(s) (js) is/are involved in showing the current cart price? because wp rocket can exclude js files from the cache wich may stop this from happening. Also, i too can provide a 5.x version of woodmart and provide a url, i can confirm it works fine there, so it started happening after the 6.x updates.

Thanks

It is a WooCommerce script not related to our theme. Could you please send us a link where we can see that it works with Woodmart 5.x?

After simulating the same situation, i have noticed similar behavior now on the development version, still, here’s is the url if you want to see.

So if the update wasn’t the issue, but it did happen at that time, what else do you think may be the cause?

Also, if this is the expected behavior, then what are our options?
disabling AJAX works, but that would mean that the sidebar and popup carts wont work, and we then also wouldnt be able to show current cart price. Could you maybe give some suggestions and / or options?

Thanks

Hello,

Yes, it is how it works and there are no other options for this. So you can remove the shopping cart widget from the header completely or not use the page cache.

Kind Regards

Alright, seeing as disabling page cache would work, albeit a tad slower…
Is it possible to use cache on mobile and tablet but no cache on desktop?

Thanks

You would better ask plugin developers for this. But as far as we know, you can’t enable this function for mobile devices only.

Hey again,

I did as you suggested, and asked wp-rocket support.
They responded with very helpful info that i’ll leave here in case anyone else stumbles upon this. But before i do, i want to ask one more question, is there really no way for you to (help) fix the issue? You suggest asking wp-rocket, but wp-rocket suggests asking you.

Here is their e-mail:
Here is what is happening.

The mini cart is not fully AJAXified. It’s content is hard coded on the page, which is then overridden by an AJAX request:

That behavior is not page caching compatible.

WP Rocket is just caching the page (Klantenservice in this case) like it will do for any other page. If it happens to have the mini cart populated, the resulting cached page will have the mini cart populated.

The only way to change that behavior in our end is to exclude page caching when an item is added to the cart by adding the following cookie to WP Rocket > Advanced Rules > Never Cache Cookies:
woocommerce_items_in_cart

But it’s best to check with the theme developers if they can fully AJAXify the mini cart to make it page caching-friendly. Otherwise, you will be loosing the benefits of page caching once an item is added to the cart.

And thats the end of their e-mail.

TL;DR
So, can you guys fix this? if not, then the workaround for others who find this post is to add the following cookie to WP Rocket > Advanced Rules > Never Cache Cookies:
woocommerce_items_in_cart

Thanks again,
Koen

Hello,

Yes, that was exactly what we meant. But the only one wrong thing here: our shopping cart is not our theme functionality. It is a standard WooCommerce widget. We just changed its style a bit and adapted it to our header builder. And it is FULLY AJAXified. Maybe we are talking about different AJAX options. What do you actually mean by AJAXify this widget?
Do you mean not to display the widget (don’t hardcode) when the page is loaded? And show the information only after AJAX request? If so, then it would be possible simply to hide this widget with CSS before the page is fully loaded.

Kind Regards

Hey,

Well honestly i don’t know, this is what wp-rocket had to say.
Though wouldn’t hiding with CSS still mean it gets loaded? Its just going to be invisible right?
Either way I will check with my colleague if the cookie method is sufficient for us, if not, maybe we can all three be involved in the e-mail conversation with wp-rocket. but I understand if that’s not something you’d do.

Thanks again,
Koen

Hello,

Yes, it will be hidden initially but still loaded. Then, when the page is fully loaded, it will be shown with the actual value loaded by AJAX.

No problem, let us know if you have any further details.

Kind Regards

Hey,

What CSS would we need and where should we put it to make this work?

Thanks,
Koen

Try to add the following code snippet to the Custom CSS area in Theme Settings to do this

html:not(.js_active) .wd-header-cart {
  display: none;
}

Hey again,

Thanks for your answer. sadly i will not be marking it as solution.
It actually adds another step. now instead of showing this:
-wrong price
-right price

it now goes like this:
-shows no price (hidden cart widget)
-still shows wrong price shortly
-right price.

because of this i recommend everyone to use wp-rocket’s cookie method instead, marking that as solution. No further assistance needed on this thread.

Thanks and greetings,
Koen

OK, thank you for sharing your experience here. Have a nice day.

[Author]

Posts