Want to increase the columns in product gallery

Hello @devilmakq,

Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

@media(min-width: 1200px) {
    .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li {
        margin: 0 0 20px 0 !important;
    }
}

Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note: if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

__

You can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/
For more information about media queries, please read this article:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

I hope that helps.
Best Regards

Hello, thank you for your response. It did work for the product page that was mentioned above but it doesn’t work for all products. They are not aligned to left and space between each product page thumbnails is different.
Basically there is no consistency between product pages. I want it to be aligned to left. If there are only 2-3 thumbnails then the above code doesn’t look good.

Hello @devilmakq,

Unfortunately, there is no solution for this because CSS is not smart(to recognize it).
However, you can a little bit improve it, you can use this CSS:

@media(min-width: 1200px) {
    .woocommerce #wrap div.product .woocommerce-product-gallery .flex-control-thumbs {
        display: flex;
        flex-wrap: wrap;
        align-content: initial;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    
    .woocommerce #wrap div.product .woocommerce-product-gallery .flex-control-thumbs li {
        margin: 10px !important;
    }
}

The best solution is to choose a style and implement it.
For instance: each product has 6 images.

Best Regards