How to change the number of products columns on the shop page in Shop Isle

The first step is to create a child theme. So, if you do not already have one, we recommend you to go through " How to create a child theme" tutorial. It will help you to start with a basic child theme and be ready for any future modifications.

After creating the child theme, you have to add the following code to your functions.php file:

add_filter('loop_shop_columns', 'loop_columns', 999);
if (!function_exists('loop_columns')) {
    function loop_columns() {
        return 3; // 3 products per row
    }
}
function child_styles_method() {
    $nb_of_prod = loop_columns();
    wp_enqueue_style(
        'custom-style',
        get_template_directory_uri() . '/css/custom_script.css'
    );
    $column_width = 100 / $nb_of_prod;
    $custom_css = "
            ul.products li.product{
                width: {$column_width}% !important;
            }
        ";
    wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'child_styles_method' );

where 3 is the numbers that should be replaced with the numbers that you actually need.Then you should add the following code to your style.css.

ul.products li.product {
	clear: none !important;
}
ul.products li.product.first {
	float: left !important;
	clear: left !important;
}
@media (max-width: 992px) {
	ul.products li.product:nth-child(2n+1){
	    clear: left !important;
	    float: left !important;
	    width: 50% !important;
	}
	ul.products li.product {
	    width: 50% !important;
	}
	ul.products li.product.first {
	    float: left !important;
	    clear: none !important;
	}
}
@media (max-width: 600px) {
	ul.products li.product,
	ul.products li.product:nth-child(2n+1),
	ul.products li.product.first {
	    width: 100% !important;
	    float: none !important;
	}
}

The percentage must be changed according to the number of columns you choose in the first step.