Recently one of my client requested to change no. of products per row on Shop and Category pages of his website from 4 columns(Default WooCommerce Settings) to 3 columns. It is pretty quick to do, thanks to flexibility of customisation provided by WooCommerce. You can achieve this using filter – loop_shop_columns.
But there is a caveat here (This is experienced in WooCommerce Version2.6.4). When you change products per row from 4 to 3, it distorts alignment on both pages – Shop and Category. This problem recently posted on WooCommerce forum by a user as well. So I thought to share the knowledge on how you can achieve it properly. Here is a little hack to correct the alignment issue by adding simple CSS to your child theme’s style.css file along with inserting PHP code block into functions.php file.
We need to make two changes to get proper result.
1. Here is snippet for functions.php
2. Here is the CSS block to be pasted in style.css file
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product