Change the Best Seller section to 2 columns

Hi there,

yeah, Woocommerce blocks, they decided to include their own CSS which overrides the Themes styles.
Couple of Options:

Option #1 - Don't use the Blocks, use the Woocommerce Shortcodes instead, those use the same templates and CSS as the rest of the plugin. So they will respect the theme settings and don't require a bunch of extra code.

Option #2 - Add this CSS to override the Woo blocks styles:

@media (max-width: 480px) {
    .wc-block-grid.has-4-columns .wc-block-grid__products {
        display: grid;
    }
    .wc-block-grid.has-4-columns .wc-block-grid__products:before {
        display: none;
    }
}

Hi, I used option 1, added woocommerce shortcode, [products limit="4" columns="4" best_selling="true"]

I also added the css code in the Customize - Additional CSS of the theme.

However, on mobile, the best seller section is still not displayed in 2 columns.

I think I still need some css code to support it.

Thanks.

Try this:

@media(max-width: 768px) {
   .woocommerce .related ul.products {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

I added these css codes and the problem was solved. Great, thank you.

Glad to hear that !