WooCommerce Shop Columns

BB Theme
1

Anyone know how to change the number of columns on the WooCommerce Shop page using the BB Theme? I’m trying to change this page. I know the BB Pagebuilder can’t control the WooCommerce shop page.

2

Hey Dustin! You’re right, Beaver Builder won’t be able to modify the default WooCommerce shop page. You could probably recreate the page using Beaver Builder if you needed more control & drag/drop functionality. The link you provided doesn’t seem to be working. Can you double check it for me? I will gladly take a look and see if there is a quick CSS snippet that will work for ya. Thanks!

3

Yes, I created a page builder shop page. I thought they would find their way back to the original archive, but it seems not. Once again, Page Builder solves everything :slight_smile:

FYI, I installed this plugin, but the columns setting had no effect on the WooCommerce shop page: https://wordpress.org/plugins/woocommerce-product-archive-customiser/

Thanks for your help.

4

Oh I just realized that all of the product category pages will default back to the WooCommerce shop page, not the PageBuilder layout. If you come across that CSS or another solution for columns, let me know. Thank you.

Here’s the site: http://tinatang.com.s83067.gridserver.com/shop/

5

How many columns are you hoping to have?

6
  1. The columns scale nicely without the woocommerce sidebar, but with the sidebar, it’s 3 columns.
7

Hey Dustin,

After toying with this a bit, I am afraid the solution I had in mind would be pretty “hacky” and really not an ideal option. How familiar are you with CSS / Media Queries? I was playing with some CSS to make 4 columns, and this snippet works, but it gets a bit haywire on small screens.

.woocommerce .fl-content-right ul.products li.product,
.woocommerce-page .fl-content-right ul.products li.product {
  float: left !important;
  margin-right: 1% !important;
  max-width: none;
  width: 24.1%;
}
.woocommerce .fl-content-right ul.products li.product:nth-child(3n),
.woocommerce-page .fl-content-right ul.products li.product:nth-child(3n) {
	  margin-right: 1% !important;
}
.woocommerce .fl-content-right ul.products li.product:nth-child(4n),
.woocommerce-page .fl-content-right ul.products li.product:nth-child(4n) {
  	margin-right: 0% !important;
}

You would probably need to tweak that a bit and write some similar code for the smaller screen media queries. This would probably be a good feature request for our User Voice page, though :slight_smile:

Sorry I don’t have a better answer for you.

8

I have a decent understanding of it, you definitely worked that out better than I could of. I appreciate you doing that. I see what you mean so I’ll play around it and I’ll add a feature request. Thanks again.

9

Excellent! You may need to write some media queries to make the 4 column layout work on smaller screens. Feel free to take that code and run with it. Do let me know if you run into any roadblocks or have any other questions :slight_smile:

10

The more I uncovered, the more I just advised the client against 4 columns. There’s a reason WC and all of their own themes use 3 columns with a sidebar and the fact that there’s not an easy fix to be found thru online searching suggests it’s because it is not recommended. I’m not even going to bother making the request now, realizing that it just wouldn’t be a feature worth doing :slight_smile:

11

That works for me :slight_smile:

Let me know if there’s anything else we can help with!