0

I'm bootstrapping a woocommerce site and I am stuck. Below is my code in the content-product_cat.php file

<?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>

This outputs like this:

<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>

The problem with this is if the images are not the same dimensions, the stacking gets interrupted. I need to be able to wrap it in this output:

<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>

Can anyone point me to the right direction? If you could help me out writing the code for me, I'll appreciate it immensely. I know it's better to learn than to have someone do it, but I literally have a ton of stuff to do in this site. I need to move fast.

Thanks a million

LOTUSMS
  • 10,317
  • 15
  • 71
  • 140
  • You sure you need to wrap it? Clearing the floating on every first column in a row (using nth-child pseudo class) might be enough. – CBroe Oct 26 '16 at 21:15
  • That's the first thing I tried. Didn't do the trick. I could spend more time looking for a css fix or overwrite or I can re-do the architecture to folloe bootstrap rules which will make thigns much easier specially on the responsive level – LOTUSMS Oct 26 '16 at 21:27
  • By the looks of it, the file you have shown just outputs a single list item. So you need to find the place where that template is used in the loop to output all items. That's the place where you want to intervene, using something like the usual modulo solution for outputting every x items grouped together. – CBroe Oct 26 '16 at 21:31
  • The file you see there outputs that
  • in a repeater. If I added the row div outside that loop it will still repeat all the li's inside the row which is useless to me. If I add the row div inside the loop or repeater but around the li opening and closing tag, it will repeat a row div after each li which is also the wrong output. There has to be a programmatic way to do this
    • – LOTUSMS Oct 26 '16 at 21:49
  • THings are easier with coding from scratch but I am not attemptign to re-write an e-commerce platform from scratch lol no way – LOTUSMS Oct 26 '16 at 21:50
  • As I already hinted, you need a loop counter, and check it using the modulo operator to decide whether or not to output a new closing and opening div tag. Whether that's possible using the repeater in use here, I can't tell you, not familiar with it. – CBroe Oct 26 '16 at 21:56
  • (By repeater you don't by any chance mean the standard wordpress loop? In that case, basically all you'd need to do is access the `current_post` property of the query object, use modulo on that, and output `
    ` after the closing `` tag ...)
     – CBroe Oct 26 '16 at 22:15
  • Yeah that's what I meant. I'm used to do things the .NET way and terminology. YOU wouldn't happen to know this code, woudl ya? I'm still not very versed in PHP and don't have too much time to finish this up – LOTUSMS Oct 27 '16 at 10:46