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:
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.
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,
Link to my website: https://childish.wtf
Link to an exemplary product page: "Next Chicken Wings" T-Shirt Big Print – Childish Clothing