WooCommerce 2-Column Product Listings on Mobile

Hey guys -

Real simple - how do we set Pro to show 2 products per row (2 column listings) instead of one item on top of the other in all WooCommerce product listings on mobile phones?

I realize you’re going to respond asking me my URL and login (which I can provide) for a specific answer for me, but if possible I think it might be best to respond with a general snippet that would work for anyone on Pro with WooCommerce and the Renew stack, if possible…so this can act more like a knowledgebase article than a support response. I can’t be the only one who wants this.

I’ve attached an example from Macys of the layout I’m looking for. Thank you!

Hi There,

Please add to Theme Options CSS

@media (max-width: 480px) {

.woocommerce .cols-2 li.product {
width: 48% !important;
}}

Hope it helps!

Thanks but this does not have any effect. I tried it on 4 different WooCommerce sites we have running Pro…didn’t work on any of them. Even adjusted the max-width higher. No change on any browser/device. Sure this is the correct CSS?

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Thanks.

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

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

Let us know how this goes!

This worked perfectly, except on mobile phones the product carousel on the homepage now displays enormously large photos and is no longer a carousel…just all the images super large and all one after the other.

Hi There,

This issue is related to a 3rd party plugin and not directly related to the theme.

Unfortunately, we cannot cover third-party plugin issues.

We recommend you contact the plugin developer.

Thank you

Joao - can you ask someone more helpful to respond? Thanks.

Hello Again,

Sorry for the confusion. To prevent the product carousel being affected with the last code given by @Nabeel, please have it updated and make use of this code instead:

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

Please let us know how it goes.

1 Like

Perfect. Amazing. Thank you for your help, @RueNel and @Nabeel

Glad we could help.

Cheers!

Hi There,

I am trying to reach the same result as discussed above. I use Woocommerce with X Pro and trying to get two products on the same line for mobile screens.

Have tried below CSS but I could not get any response to the command. Do you know what I am doing wrong here?

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

Kind regards,

Xavier

Hi @vandepar,

Would you mind providing a sample URL? The above CSS is only specific to the provided site. Maybe yours need a smaller width due to larger spacing.

Thanks!

Hi @Rad the URL is: www.airdropcollector.com/shop

Kind regards,

Xavier

Hi @vandepar,

It’s not gonna work, your shop page uses something like WooCommerce Product Filter which is related to Product loops layout. I recommend contacting the plugin author for this kind of changes. The above CSS is only applicable for the layout provided through the theme.

Thanks!

Okay will do, thanks.

You’re welcome.

I’d like to +1 for this idea.

As designers/developers, having the option to display X amount of columns in each screen size would be the ideal solution. Even if you only offered a set number, (maybe 1-2 for mobile, 1-3 mobile landscape, 2-4 tablet, 2-6 tablet landscape, etc etc) it’d truly enhance your product IMO.

One of the problems that I see happening often in WooCommerce is setting it apart from the rest of the pack. It’s a bummer that the default look of WooCommerce can be called out/identified by anyone familiar with the plugin. As X & Pro stand out for their own merits, adding the functionality to allow our WooCommerce stores, built in X/Pro, to stand out would raise the bar of awesomeness that you folks are providing.

…just my .02 :wink:

cheers,
splaquet

Hello Splaquet,

Thanks for sharing the feedback. We have taken your vote. :slight_smile:

Thanks.

Hello @markomark,

You may have experiencing some caching issues.
Please check out this troubleshooting article here and follow the instructions for the following sections (where appropriate):

Testing for Plugin Conflict
Disabling Cache
Disabling CDN

If nothing is helping, we highly recommend that you open up your issue in a new thread and include your login details in a secure note so that we can investigate. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.