Editing Woocommerce category/subcategory loop

Question

I'm currently building a custom WP theme with WooCommerce integration. So a little background first. My theme is using Foundation 6. I have disabled the WooCommerce styles and layouts. I am using overriding templates so that I can integrate Foundation.

My shop page is listing product categories, not individual products. Then once a category is selected, you get another list of sub-categories, then finally the products.

I'm able to put the products into 4 column rows just fine with the following code:

loop-start.php

<div class="row">

archive-product.php

<?php woocommerce_product_loop_start(); ?>

            <?php woocommerce_product_subcategories(); ?>

            <?php $counter = 1; while ( have_posts() ) : the_post(); ?>

                <?php wc_get_template_part( 'content', 'product' ); ?>

            <?php 

                if( $counter % 4 == 0 ) : echo '</div><div class="row">'; endif;

                $counter++;

                endwhile; // end of the loop. ?>

<?php woocommerce_product_loop_end(); ?>

loop-end.php

</div>

content-product.php

<div <?php if($wcp_last_loop) : post_class('medium-3 columns end'); else : post_class('medium-3 columns'); endif; ?>>
<?php
/**
 * woocommerce_before_shop_loop_item hook.
 *
 * @hooked woocommerce_template_loop_product_link_open - 10
 */
do_action( 'woocommerce_before_shop_loop_item' );

/**
 * woocommerce_before_shop_loop_item_title hook.
 *
 * @hooked woocommerce_show_product_loop_sale_flash - 10
 * @hooked woocommerce_template_loop_product_thumbnail - 10
 */
do_action( 'woocommerce_before_shop_loop_item_title' );

/**
 * woocommerce_shop_loop_item_title hook.
 *
 * @hooked woocommerce_template_loop_product_title - 10
 */
do_action( 'woocommerce_shop_loop_item_title' );

/**
 * woocommerce_after_shop_loop_item_title hook.
 *
 * @hooked woocommerce_template_loop_rating - 5
 * @hooked woocommerce_template_loop_price - 10
 */
do_action( 'woocommerce_after_shop_loop_item_title' );

/**
 * woocommerce_after_shop_loop_item hook.
 *
 * @hooked woocommerce_template_loop_product_link_close - 5
 * @hooked woocommerce_template_loop_add_to_cart - 10
 */
do_action( 'woocommerce_after_shop_loop_item' );
?>
</div>

So this works great for products not categories though. I know the categories and subcategories are being pulled in by

<?php woocommerce_product_subcategories(); ?>

I also know I will have to use a hook or filter to put every 4 categories in a row, but I'm not well versed in WP hooks and filters, so are struggling to find a solution. I've been trying to read up on hooks and filters, but are hoping to find some help more specific to what I'm trying to do.

Any advice would be greatly appreciated.

Jonathan Ryan Patterson Jonathan Ryan Patterson · Accepted Answer · 2017-04-06T18:43:41

So I did end up finding a solution, not sure if it is the best route to go but it worked.

For others who may run into the same issue, here is what I did.

Located the woocommerce_product_subcategories() in wc-template-functions.php. Copy the entire function, including the check to see if it exists.

Paste into your functions.php file. Rename the function, for example:

function new_name_product_subcategories( $args = array() ) { .... }

Look for the following foreach loop:

    foreach ( $product_categories as $category ) {
        wc_get_template( 'content-product_cat.php', array(
            'category' => $category
        ) );
    }

and change to:

        $cat_counter = 1;
        foreach ( $product_categories as $category ) {
            wc_get_template( 'content-product_cat.php', array(
                'category' => $category
            ) );
            if( $cat_counter % 4 == 0 ) : echo '</div><div class="row">'; endif;
            $cat_counter++;
        }

Then in your archive-product.php file, change:

<?php woocommerce_product_subcategories(); ?>

To

<?php new_name_product_subcategories(); ?>

If I find a way to do via WP hooks, I will post a reply, but this was the only way I could think to do it as of now.

Also, I didn't go over how I added the .columns classes the individual categories. I added those in the content-product_cat.php file.

Editing Woocommerce category/subcategory loop

1 Answers