Добавление цикла класса строки для реализации начальной загрузки в woocommerce

Я запускаю сайт woocommerce и застрял. Ниже мой код в content-product_cat.php файл

<?php

if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>

<li <?php wc_product_cat_class( 'col-xs-12 col-sm-6 col-md-3' ); ?>>
<?php
/**
* woocommerce_before_subcategory hook.
*
* @hooked woocommerce_template_loop_category_link_open - 10
*/
do_action( 'woocommerce_before_subcategory', $category );

/**
* woocommerce_before_subcategory_title hook.
*
* @hooked woocommerce_subcategory_thumbnail - 10
*/
do_action( 'woocommerce_before_subcategory_title', $category );

/**
* woocommerce_shop_loop_subcategory_title hook.
*
* @hooked woocommerce_template_loop_category_title - 10
*/
do_action( 'woocommerce_shop_loop_subcategory_title', $category );

/**
* woocommerce_after_subcategory_title hook.
*/
do_action( 'woocommerce_after_subcategory_title', $category );

/**
* woocommerce_after_subcategory hook.
*
* @hooked woocommerce_template_loop_category_link_close - 10
*/
do_action( 'woocommerce_after_subcategory', $category ); ?>
</li>

Это выводит как это:

<ul class="products">
<li class="col-xs-12 col-sm-6 col-md-3 product-category product first"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></li>
<li class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></li>
<li class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></li>
<li class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></li><li class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></li><li class="col-xs-12 col-sm-6 col-md-3 product-category product last"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></li>

...

<li class="col-xs-12 col-sm-6 col-md-3 product-category product first"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></li>
</ul>

Проблема в том, что если изображения не одного размера, укладка прерывается. Мне нужно иметь возможность обернуть его в этот вывод:

<div class="products row">
<div class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></div>
<div class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></div>
<div class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></div>
<div class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></div>
</div>
<div class="products row">
<div class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></div>
<div class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></div>
<div class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></div>
<div class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></div>
</div>
...

<div class="products row">
<div class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></div>
<div class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></div>
<div class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></div>
<div class="col-xs-12 col-sm-6 col-md-3 product-category product"><a href="#"><img src="#"><h3>Category title <mark class="count">(1)</mark></h3></a></div>
</div>

Кто-нибудь может указать мне правильное направление? Если бы вы могли помочь мне написать код для меня, я буду очень благодарен. Я знаю, что лучше учиться, чем заставлять кого-то делать это, но у меня буквально есть масса вещей, которые можно сделать на этом сайте. Мне нужно двигаться быстро.

Бесконечно благодарен