[Resolved] Change the Best Seller section to 2 columns

[XISONG]

Hi, I am using GeneratePress Pro and added the pre-made theme “Seller”.

I want to make the “Best Seller” section of the woocommerce single product page for mobile into 2 columns. This section is made in “GenerateBlack” using the “Best Selling Products” Gutenberg block.

I have changed “Product Columns” to 2 columns in “Customize” under “Layout” – “Woocommerce”.

However, now the “Best Seller” section of the single product page of the site still has 1 column.

Please help me to solve this problem, thanks.

[David]

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;
    }
}

[XISONG]

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.

[David]

Try this:

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

[XISONG]

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

[David]

Glad to hear that !

[Author]

Posts