Change Number of Product Columns on Shop Page

That seems to work fine for me. You will need to add a little CSS, but it’s only a couple of lines:

ul.products li.product {
width: 22.05%;
margin-right: 3.8%;
}

That filter just tweaks the position of the first and last class in product loops.

Thanks James. The “col-full” div is still using only 723 of 978 pixels on the shop page when I use your CSS, though it does display four product columns, whereas on a regular page also set to full width, it uses all 978 pixels.

It looks like on the shop page, the theme is including the right sidebar CSS even though I have the page set to use the full width template. If I look at the CSS on the shop page for the content-area, it’s including the right-sidebar CSS:

.right-sidebar .content-area {
    width: 73.913%;
    float: left;
    margin-right: 4.34783%;
}

Whereas if I look at a page that is correctly displaying as full-width, I see:

.page-template-template-fullwidth-php .content-area, .page-template-template-homepage-php .content-area {
    width: 100%;
    float: left;
    margin-left: 0px;
    margin-right: 0px;
}

Apparently, the problem is that the theme is not including the class “page-template-template-fullwidth-php” in the body tag on the shop page despite the fact that the page is set to full width.

I guess the real question is, why isn’t the “page-template-template-fullwidth-php” class being added to the shop page when the shop page is set to full width?

Hey,

The reason is that the shop page in WooCommerce is not actually a page. It’s a placeholder which redirects to the product post type archive. So you cannot apply a page template to it.

To make the shop page full width you’ll need to add some custom code to unhook the sidebar and then change the body class as well. If you don’t want to touch any code you can use our Storefront WooCommerce Customiser extension to do this and more.

Thanks.

Thanks for the reply James.

I don’t mind coding at all, but I searched around a bit and couldn’t find a code snippet or the appropriate hooks, and the client doesn’t want to pay for an additional plugin, so they are contemplating changing themes. In the meantime, I just added a couple of widgets to the sidebar to display on the Shop page so it doesn’t look so odd.

Hey,

Well, I would have thought that your costs of changing / setting up a new theme will probably come to more than the cost of the extension, but OK :p

For the body class you just need to filter body_class. There’s an example here: https://codex.www.ads-software.com/Function_Reference/body_class

Then you’ll just need to hook in your own custom function to conditionally check for the product archives and unhook the sidebar.

Cheers

I’m just starting to get familiar with WooCommerce by making a customized Childtheme for Shopfront.

Getting some control over the Sidebar and Column Display appears to be very tricky!

According to this somewhat dated thread on WordPress Support Forum:

Where is ‘shop’ defined?! Want to remove sidebar

You should be able to remove all sidebar occurrences by adding the following Code Snippet to your Theme Functions:

remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar');

Then you can modify the columns by using CSS as suggested by James above. Something like this:

.woocommerce #main{width:100%}
ul.products li {width:20%}

Even so, you will need another added Function to set the number of columns:

function set_columns($columns){
return 4;
}
add_filter('loop_shop_columns','set_columns');

My problem is that the remove all Sidebars Function isn’t working for me.

I have successfully removed the Sidebar from the Product Pages by using the following Snippet:

/* Remove Sidebar from Product Page */
add_action( 'get_header', 'remove_storefront_sidebar' );

function remove_storefront_sidebar() {
	if ( is_product() ) {
		remove_action( 'storefront_sidebar', 'storefront_get_sidebar',			10 );
	}
}

Perhaps, some kind could could point the way to a working tutorial or alternative snippet for Shopfront that will show us how to simply remove the Sidebar on the Shop Page?

Thx

Shunyata

Hey,

Just change this:

if ( is_product() ) {

to this:

if ( is_shop() ) {

and the sidebar will be removed on the shop page.

FYI our Storefront WooCommerce Customiser extension allows you to do this and more without touching any code.

Thanks James. for your prompt reply and solution… You’re awesome : )

I took a look at your Plugin Storefront WooCommerce Customiser and completely agree that it adds some extremely useful functionality.

If I didn’t have html and css under my belt I wouldn’t even be thinking of going taking another step into Functions and if that were the case your plugin would be a no brainer.

Now, I am hoping that you could enlighten me as to the best way to combine both and remove the sidebar from both the Shop and Product Pages

/* Remove Sidebar from Product Page */
add_action( 'get_header', 'remove_storefront_sidebar' );

function remove_storefront_sidebar() {
	if ( is_product() ) <strong>OR</strong> ( is_shop() ) {
		remove_action( 'storefront_sidebar', 'storefront_get_sidebar',			10 );
	}
}

Thanks again for your kind support… us Functional New’bies would be lost without you.

Hi James,

I’ve been searching around to see how to properly combine both conditions in a single if statement and came up with the following.

add_action( 'get_header', 'remove_storefront_sidebar' );

function remove_storefront_sidebar() {
	if ( is_product() // or if(is_shop()) {
		remove_action( 'storefront_sidebar', 'storefront_get_sidebar',			10 );
	}
}

But obviously something is wrong because it’s causing errors.

Any help would be much appreciated.

Thx

Shunyata

Hey,

Replace:

if ( is_product() // or if(is_shop()) {

with:

if ( is_product() || is_shop() ) {

You’ll need to include is_product_taxonomy() || is_product_category() || is_product_tag() as well to hit all product archives.

PS, remember to make these changes in a child theme or customisation plugin such as https://github.com/woothemes/theme-customisations

Hi James,

Thanks for that. It worked perfectly.

I promise I won’t bother you again with questions on php basics.

It seems the to fully customize WooCommerce and tap into it’s robust functionality, one should at least have a foundational understanding of PHP.

So, I’ve been learning it.

Thanks Again

Please Help!!
I am using Acesspress Store theme free version.
I have added above code to my child theme .

/ Change number of products per row to 4
add_filter(‘storefront_loop_columns’, ‘custom_loop_columns’);
function custom_loop_columns() {
return 4; // 4 products per row
}

and now my page as came like this please see the url. https://www.hookkart.com/product-category/women/clothing/dress-material/

Please suggest how to align to 4 coloumn.

Thanks in Advance

Please Help!!
I am using Acesspress Store theme free version.
I have added above code to my child theme .

/ Change number of products per row to 4
add_filter(‘storefront_loop_columns’, ‘custom_loop_columns’);
function custom_loop_columns() {
return 4; // 4 products per row
}

and now my page as came like this please see the url. https://www.hookkart.com/product-category/women/clothing/dress-material/

Please suggest how to align to 4 coloumn.

Thanks in Advance

Hey vijaybokade73,

This is the support forum for the Storefront theme and you would need to contact the developers of the theme you are using titled Acesspress Store for some guidance as this as the code for storefront will not work on your theme.

How to add border to column and row for each products come in border line

Thanks in advance