Issue with Displaying Frontend Dynamic Shipping Fees on Cached Product Pages

I am encountering an issue with my WooCommerce product pages when using a caching plugin. The problem arises when a product page is cached, as the shipping fee information fails to display correctly. Instead of showing the calculated shipping fees based on user location and selected product variations, the page displays a message stating, “Please select a variation to see estimated shipping cost,” even when a variation is already selected.

I have tried several caching plugins, including WP Rocket, Cache Enabler, and WP-Optimize Premium. All of them exhibit the same issue: once a product page is cached, the dynamic elements that should update the shipping fee do not function correctly. I have also disabled geolocation settings, enabled AJAX requests, and even attempted to refresh the shipping information using custom JavaScript, but none of these methods have resolved the issue.

It appears that caching may be interfering with the AJAX functionality or nonces used by the shipping plugin, resulting in the dynamic content not being updated properly when a cached version of the page is served. I’m looking for advice on how to configure the caching or adjust the plugin settings to ensure that the shipping fee calculation works correctly even when product pages are cached. Any insights or recommended solutions would be greatly appreciated!