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

Important notice: This product is now in maintenance mode and is no longer being actively developed or supported. Updates and bug fixes will not be provided unless they relate to security concerns.

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.