Fixing Flatsome blinking cart when cached
- WooCommerce
It’s something that might indeed happen under certain conditions:
- The website is using page cache
- Cache is not bypassed after an item is added to the page
It can be fixed using one of these methods:
Bypass cache if the cart is not empty
If you are using a caching that support excluding pages from cache depending on a cookie value, you just need to make use of it and target the following cookie: woocommerce_items_in_cart
Delay showing the cart’s content until the page is fully loaded
That can be done using the following code snippets.
CSS
/**
* Flatsome Cart Blink Fix — CSS
*
* Hides the cart element initially to prevent the visual "blink" that occurs
* when a cached page loads with stale cart HTML that then gets replaced by
* AJAX. The element is revealed once JavaScript adds the loaded class.
*
* Usage: Add to your child theme stylesheet or Custom CSS.
* Pair with flatsome-cart-blink-fix.js.
*
* @category woocommerce
* @language css
*
* @author Adame Dahmani https://adame.io
* @support Support my family project: https://adame.io/fundraiser
*/
.header-nav.nav-right {
opacity: 0;
transition: all 0.3s ease-in;
}
.header-nav.nav-right.cart-item-loaded {
opacity: 1;
}This cause will hide initially the cart element, and only reveal it if the following class is applied to it .cart-item-loaded.
JavaScript
/**
* Flatsome Cart Blink Fix — JavaScript
*
* Reveals the cart element after the DOM is fully loaded by adding a class
* that triggers the CSS transition. Prevents the cached-page blink where
* stale cart content is briefly visible before WooCommerce AJAX updates it.
*
* Usage: Add to your child theme or enqueue via wp_footer.
* Pair with flatsome-cart-blink-fix.css.
*
* @category woocommerce
* @language javascript
*
* @author Adame Dahmani https://adame.io
* @support Support my family project: https://adame.io/fundraiser
*/
document.addEventListener('DOMContentLoaded', function () {
var cartItem = document.querySelector('.cart-item');
if (cartItem) {
var list = cartItem.closest('ul');
if (list) {
list.classList.add('cart-item-loaded');
}
}
});The code will inject a class to reveal the cart after the page is fully loaded.