Separate Categories from WC Product loop when display type is set to both on the category

Question

In our site we used to display categories and products in different separate sections when display type was set to 'both' using woocommerce_product_subcategories() function.

I have recently updated woocommerce to the latest v3.4.3 and found out that the function woocommerce_product_subcategories() has been deprecated. Now they have introduced different functions to display categories, like woocommerce_output_product_categories(), woocommerce_maybe_show_product_subcategories().

But the problem I'm having is that, I could not stop showing categories in product loop. It keeps showing both categories and products in the same loop.

Can anyone show me a way, how I can display categories and products in a separate section?

EDIT

To clarify my question, in my category settings, display type is set to both.

When I'm browsing category archive page, both category and products are showing in the loop.

What I want, is to separate categories from the loop and show it in a different section. In the loop, I want to display only products.

Answer 1

I have found the solution I was looking for. Using the following code will stop displaying categories in the product loop.

remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' );

Then use the following function in a separate section of the page will render the categories in a separate section. woocommerce_maybe_show_product_subcategories()

Answer 2

Based on @Arif answer.

In function.php

// remove the subcategories from the product loop
remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' );

// add subcategories before the product loop (yet after catalog_ordering and result_count -> see priority 40)
add_action( 'woocommerce_before_shop_loop', 'wp56123_show_product_subcategories', 40 );

function wp56123_show_product_subcategories() {
    $subcategories = woocommerce_maybe_show_product_subcategories();
        if ($subcategories) {
          echo '<ul class="subcategories">',$subcategories,'</ul>';
    }
}

Tested on Woocommerce 3.9

Answer 3

Take a look at this tutorial. It is updated to the latest version of Woocommerce (3.6).

The tutorial on Tutsplus is great but no longer up to date.