APO cache problems for Woocommerce product pages

[hensobo]

Hi there,

I’m looking for some help since I really don’t know what to do anymore. Here is my problem (and I hope I can describe it well enough to make it understandable):

I’m using APO & Argo on Pro account for better performance of my Woocommerce store, which is working great for 99% of the time. I also activated the Cloudflare caching features with the recommended page rules setup and APO’s “Cache By Device Type” box activated. For my product pages, I’m using two little plugins to place 3 popups beneath the add to cart box (popup for size guide, style guide and charity information), so when a user needs more information on that topics he just has to click on one of the buttons to open the popup for further info:

1. plugin: “Woocommerce Single Product Page Customizer”
   Since in Woocommerce you are not allowed to place custom content on the product pages as you wish, I need that plugin to place the three buttons for the popups there.

2. plugin: “Popup by Supsystic”
   This plugin generates the shortcodes for the popups and the popups themselves, which I can then use for the 1. plugin to place. It also handles the styling by applying a css class to the placed shortcodes.

Now with APO and cache by device type activated, the content for the buttons is being displayed on the product pages, but the css class from the 2. plugin is not being applied all the time so the popups are not being rendered and can not be opened – The strange thing is when I manually update one of my product pages in the backend (I just hit the “Update” button on a random product page without any real changes on the page) and purge cache, everything is working great for a couple of minutes, but then switching back to a non-working version of the product page. This is what makes me thinking that is must be a caching problem. Also: Every time I hit the update button and the popups are working again, they are only working on one device type – so either they are working on desktop, but not on mobile; or they are working on mobile, but not on desktop. This does not happen, when I disable the APO cache by device option.

This is what I tried so far:
– Paused all Cloudflare features
– Disabled APO
– Disabled APOs cache by device functionality
– Deactivated all my plugins that could possibly engage with cache (Cloudflare plugin, Assetclean up, WP rocket, Varnish on the server side)

The paused all Cloudflare features and the APO deactivation did the trick, but I need both features for performance reasons.

I hope someone can give me a hint on what is going on here.

I attached a screenshot for better visualization. If I have to supply further information, I am very happy to do so.

Thanks & Best,
HenSobo

Link to my website: https://childish.wtf
Link to an exemplary product page: "Next Chicken Wings" T-Shirt Big Print – Childish Clothing

Screenshot:

[sdayman]

Without witnessing the glitch, it’s difficult to troubleshoot, but your browser’s Dev Tools can help here.

1. When you right click on an element, you can see the relevant CSS. In this case, it’s inline CSS. I can replicate the error by disabling the CSS:
   

   

2. Again, Dev Tools (F12 in Chrome). You can look at the Network tab to see if something isn’t loading, but that’s typically files, so I don’t think that’s the issue. There’s also Console, and that will show any page errors.

I’d be surprised if APO is specifically causing this problem. I’m not sure what you mean by “Paused All Cloudflare Features.” Where is this option?

[hensobo]

Hi @sdayman,

thanks for your reply and for your support!

I took a look with Dev tools, but could not find anything unusual there. Console error log also shows nothing related to that problem (just one thing related to the Facebook pixel).

With the “Paused All Cloudflare Features” I was referring to the advanced action – correct name: “Pause Cloudflare on Site” feature – that you can find within the overview tab of your website on the right site at the very bottom…remembered the name wrong, sorry for that.

I did find something new though: I remembered that my hoster (Cloudways) is running Redis by default on their servers. I installed the corresponding plugin for Wordpress and flushed the Redis object cache. In addition, I also did the database optimization within WP rocket for the transients → Voilà currently the popups are running again. So maybe this has nothing to do with Cloudflare after all. Still wondering why the deactivation of APO did the trick for me the first time – is that functionality somehow triggering the object cache?

Could you maybe do me a favor and have a look, if the popups also running on your side again (maybe you have to flush browser cache)? That would be awesome.

Thanks & Best,
HenSobo

[sdayman]

Pausing Cloudflare completely bypasses Cloudflare and sends requests directly to your server. But it’s possible that the APO plugin’s headers were affecting caching at your server.

[fritexvz]

Is the cart updated or not?
The topic where the user has some similar issues with APO cache and WooCommerce here:

CF APO & Woocommerce

Hi, I have Free Clouflare for a WP website using woocommerce. I have issues with the basket update and it comes from the caching of content. So I installed the wordpress Automatic Platform Optimization (APO) and purchased for 5$ per month because it is said it bypasses those caches. But the issue remains. Does anyone know why ? Is APO my solution or should I cancel and just add some page rules to bypass manually ? Thanks ! Emma

Could be the checkbox “Cache by device” under the button for APO option to be “enabled/disabled” at Cloudflare dashboard?

Moreover, when I tried I got error Uncaught ReferenceError: ppsPopups is not defined for resource https://childish.wtf/wp-content/plugins/popup-by-supsystic/modules/popup/js/frontend.popup.js?ver=1.10.2:113.

The pop-up shows, with some delay of one or two seconds.

After adding first product:

After adding 4-5 more products of this one:

[hensobo]

Hi @fritexvz,

thank you so much for looking into this!

As far as I can see from my side that cart functionality has remained working fine. At least I had no issues so far. But I heard about problems with the mini-cart functionality (I have this disabled on my shop), since it uses some cookies to work currently, which you only can bypass via page rules on a higher Cloudflare plan (I think it was the enterprise plan). I bet that is the reason on Emma’s website, too.

I also tried to enable/disable the “Cache by device” checkbox at APO settings. That worked in a way, but I need that feature enabled since I’m using some features on mobile devices only (e.g. mobile menu). So I had to enable it again.

The error log you’ve got is very interesting. I do not get that log at all in my tests. The error is definitely referring to the correct plugin, so that could be a possible hint. But the popups are still working anyway, correct?

I can see that in your screenshots the product details are displayed differently after adding 2nd/more products. I think that is some other error, maybe coming from side-cart feature of my theme or from minification…I will have a look at that. Thanks!!

As long as the popups are working again now, I’m happy

Thanks & Best,
HenSobo

[yevgen]

– Deactivated all my plugins that could possibly engage with cache (Cloudflare plugin, Assetclean up, WP rocket, Varnish on the server side)

Could you try once again to deactivate all the non Cloudflare plugins, clear CF cache and test again? It should be a combination of the APO and other caching mechanism you have on the site that results in the issue.