Woocommerce two columns

Support
#1

Hi.
I am working on this page: www.beboundless.se/shop and on a mobile device I am trying to get the shop to show the products in two columns instead of one. Is that possible?
I found this code in the forum but couldn’t get it to work:

@media screen and (max-width: 480px) {
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 48% !important;
}
}

Tomas

#2

Hey Tomas,

That code is for the archive page. What’s used on your page is a WooCommerce Product Block. We do not have a theme option to modify the said block so you’d need to write another custom CSS for that.

To the question, if it’s possible, almost every style can be achieved with customization. Regretfully though, we do not offer custom development as part of product support. I’d recommend you consult with a developer to help you with this.

If you can wait for our Layout Builder to be released, I’d strongly recommend it as it will allow you to create custom archive and single post templates so you won’t need to custom coding.

Otherwise, you must learn CSS and also the use of a browser’s element inspector so you could see WooCommerce’s CSS and know what to override.

I’ll post a sample code here to help you get started. Please don’t treat this as part of product support and this may or may not work in your site. If you can’t make it work or this causes issues in your site now or in the future, again, please consult with a developer or learn coding.

@media (max-width: 480px) {
    .wc-block-grid.has-3-columns .wc-block-grid__products {
        display: flex;
    }
    .wc-block-grid.has-3-columns .wc-block-grid__product {
        flex: 1 0 50%;
        max-width: 50%;
    }
}

If you need us to answer custom development questions or receive customization guidance, you can subscribe to our One service here https://theme.co/one

Please note that the codes we provide in the forum serve only as a guide. We do not provide support for them so we can’t fix nor maintain them.

Hope that helps and thank you for understanding.

#4

Hi.
Ok. Thanks. Unfortunately i didnt get the expected result form the code. But what is the layout builder. Will that have any impact on this particular issue?
Tomas

#5

Hey Tomas,

Since the code didn’t work for you, you need to consult with a developer.

The Layout Builder feature will allow users to create custom archive pages like a product grid. You can learn more about the upcoming features in our June Status Report here https://theme.co/content/status-report-june-02-2020

I just like to add that alternatively, you can try using the bundled grid plugins. Both plugins offer an option to set the number of grid columns per screen size. Please visit the links below for more details and plugin usage instructions.

Thanks.

#6

Still - this is the best theme I have ever worked with. And support. So - this is going to be good anyway:)

#7

Hey Tomas,

Thank you for your nice words, we’re glad that we could be of help.

Cheers!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.