Change the number of Woocommerce webshop columns in Themify

Do you sometimes think it´s annoying not to be able to have more than 4 columns on your shop loop page? Below I will show you a way to change this. In this example I will use 6 columns. Without having to add any plugin.

The first thing you need to keep in mind is that this way requires your page to have a child theme. And, before making changes in any php-file in any theme – backup, backup, backup that file before starting.

Here’s what the Product Layout settings look like in Themify by default.

We will change this. We want 6 columns on the product page.

  • The Themify Ultra folder contains a file called theme-modules.php. (wp-content/themes/themify ultra/theme-modules.php). Copy it to your child theme catalog (wp content/themes/name-on-your-child theme/theme-modules.php)
  • Open the file that you just copied into your child themes directory in a text editor (Notepad ++ or similar)
    On line 1130 (approximately) there is some code that looks like this:

/**
* Entries layout options
* @var array
*/
$default_entry_layout_options = array(
array('value' => 'list-post', 'img' => 'images/layout-icons/list-post.png', 'title' => __('List Post', 'themify')),
array('value' => 'grid4', 'img' => 'images/layout-icons/grid4.png', 'title' => __('Grid 4', 'themify'), 'selected' => true),
array('value' => 'grid3', 'img' => 'images/layout-icons/grid3.png', 'title' => __('Grid 3', 'themify')),
array('value' => 'grid2', 'img' => 'images/layout-icons/grid2.png', 'title' => __('Grid 2', 'themify'))
);

Here is an image what it looks like:

  • What you want to do is to add an extra line of code:

array('value' => 'grid6', 'img' => '../your-childtheme-name/images/layout-icons/grid6.png', 'title' => __('Grid 6', 'themify')),

so it looks like this:

/**
* Entries layout options
* @var array
*/
$default_entry_layout_options = array(
array('value' => 'list-post', 'img' => 'images/layout-icons/list-post.png', 'title' => __('List Post', 'themify')),
array('value' => 'grid6', 'img' => '../your-childtheme-name/images/layout-icons/grid6.png', 'title' => __('Grid 6', 'themify')),
array('value' => 'grid4', 'img' => 'images/layout-icons/grid4.png', 'title' => __('Grid 4', 'themify'), 'selected' => true),
array('value' => 'grid3', 'img' => 'images/layout-icons/grid3.png', 'title' => __('Grid 3', 'themify')),
array('value' => 'grid2', 'img' => 'images/layout-icons/grid2.png', 'title' => __('Grid 2', 'themify'))
);

(Where it says “your-childtheme-name”, change it to the name of your child theme, of course)

  • Now we have added the layout and made a new css class (grid6) that we can use to make our last changes. I’ve also made a picture that you can use called grid6.png. Save it to your computer. Or, you can use any other image if you want to, up to you.

 

 

  • This image should be saved in a new folder in your child theme called layout icons (wp content/themes /your-childtheme-name/images/layout-icons/grid6.png) Ok, so now the Product Layout should look something like this:

  • Select the new grid layout and save changes. If you go to your product page, nothing has changed ??? Calm down, we have to add css code so the page shows 6 columns.
  • Paste the following code into your css stylesheet:

}
.woocommerce.grid6 ul.products .product {
width: 13%;
margin-left: 3.2%;
float: left;
}
.woocommerce.grid6 ul.products .product:nth-of-type(6n+1) {
margin-left: 0;
clear: left;
}

  • Reload your product loop page. It should now look something like this:

This method works for any type of shop loop grid. If you want 5 columns, add the code row in theme-modules.php, but instead of grid6, change it to grid5 etc. However, keep in mind that you must add css code to counter 5 columns, that is, change column width from 13% to something that works for 5 columns. Also check how the page behaves in mobile mode just in case. It should work as it is, but it is best to check. If you need to change anything in mobile mode, you can add media queries for mobile mode. To learn more about media queries, do a search on Google.

Because we made all changes to a child theme, your changes will not disappear even if you update the theme. However, after you update your theme, check that it is the same information in your theme-modules.php as in the newly updated one in the parent theme. The easiest way is to check the number of lines of text and see if they differ. (Remember, we added a text line in our child theme theme-modules.php, so your php- file should have one extra row right now.)

If you have any questions, leave a comment below.