Specify Different Category & Product Column Number

  • iftekhar
  • Apr 12, 2016
  • 0 comment
  • 1684 Views
  • Print

On my previous post, I discussed how to get a very specific number of product columns in WooCommerce. Not to mention, on that post I also warned that using snippet affects the main query thus number of product columns affects the number of product category page(content-product_cat.php) as well.

Today, In this post I will discuss how you can get different number of columns for both the product and category archive page. So, seat tight and keep reading.

In order to get separate number of columns, we have to make changes on both the product (content-product.php) and product category archive (content-product_cat.php) template files. For the sake of clarity, let’s create a folder at the very root directory of your theme. You must name this folder as “woocommerce” as we will override the default template files. Please take a look at this screenshot for better understanding.
WooCommerce folder on Custom WordPress theme
Now copy of both the files (content-product.php & content-product_cat.php) and paste them on your current theme’s “woocommerce” folder. This is particularly useful in a sense that even if we upgrade the WooCommerce, it won’t affect the template file because we are about to make some changes on our flies.

From our newly created “woocommerce” folder, open up the “content-product.php” page with your HTML editor and find the following lines.

<?php
// Store column count for displaying the grid
if (empty($woocommerce_loop['columns'])) {
   $woocommerce_loop['columns'] = apply_filters('loop_shop_columns', 4); }
?>

Change the number “4” with your desired number of columns you would like to see on your product archive page.

Similar snippet can be found on your “content-product_cat.php” page which is responsible for displaying your category and subcategories in columns. Change the number over there as well with your desired number. Save both the pages and refresh your site. Test the number of columns are right or wrong. All you have to do now is to make the necessary adjustments with your CSS code. You are good to go.

  •  
  •  

Comment

Leave a Reply

Note: Convet HTML, PHP, JavaScripts from Postable, before posting from comment section.
License: By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution. Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.