How To Fix WooCommerce CLS (Product Page)

Cumulative Layout Shift (CLS) is one of the Core Web Vitals that measures the visual stability of a web page. A high CLS score indicates that users are experiencing unexpected shifts in page content during their visit. For WooCommerce store owners, this can be particularly troublesome as it affects the product pages, potentially leading to a poor user experience. This tutorial will guide you through fixing CLS issues on WooCommerce product pages.

Identifying CLS Issues

First, it’s important to identify where the CLS issues are occurring. Use Google PageSpeed Insights or the Lighthouse tool in Chrome DevTools to perform a site audit. Look specifically for CLS values.

Google Web Console might also help:

Fixing CLS with CSS Adjustments

One common solution involves making CSS adjustments to stabilize the layout during loading. Here’s a step-by-step guide:

1. Identify the Problem Element: Look for elements that cause layout shifts, such as images or dynamic content. In WooCommerce product pages, this is often the product gallery.
2. Apply CSS Fixes – The code sets a fixed height for the product gallery to prevent unexpected shifts as images load.

Desktop Code

@media screen and (min-width: 922px) {
    .woocommerce-product-gallery {
      min-height: 630px;
      max-height: 630px;
    }
}

Mobile Code

@media screen and (max-width: 921px) {
    .woocommerce-product-gallery > .flex-control-nav li {
        height: calc(25vw - 1.5em) !important;
    }
}
@media screen and (max-width: 500px) {
    .woocommerce-product-gallery {
        max-height: calc((25vw - 1.5em) + (100vw - 56px) + 1em);
    }
}
@media screen and (min-width: 545px) and (max-width: 921px) {
    .woocommerce-product-gallery {
        max-height: calc((25vw - 1.5em) + (100vw - 117px) + 1em);
    }
}

Recommended: Using a Gallery Plugin

If modifying CSS seems too complex, using a third-party WooCommerce plugin can also resolve CLS issues:

WooCommerce Additional Variation Images Gallery

This plugin helps manage different product images and maintains a consistent layout!

Addressing CLS issues on WooCommerce product pages can significantly enhance user experience and improve your site’s performance metrics. By applying targeted CSS fixes or leveraging a quality plugin, you can mitigate layout shifts and provide a more stable page presentation.

This fix is based on a solution I found on the WordPress Forums, which was very helpful. You can find the original discussion and solution here: Cumulative Layout Shift (CLS) Issue on Product Pages. – Thanks to Vishal Lohar ❤️

Additional Tips:

• Always inspect the DOM to tailor the CSS properties to your specific theme.
• Regularly update plugins and themes to benefit from ongoing improvements and fixes offered by developers.
• Consider consulting with your theme’s support team for additional insights relevant to their specific architecture if you encounter persistent issues.