Display WooCommnerce products and subcategories on separate rows with Astra

  • Resolved Lorangeo

    (@lorangeo)


    6 months, 2 weeks ago

    Hi,

    Woocommerce categories and products appear on the same row, in the same ul element. I personally find this confusing and was looking for a way to separate them. I wanted to show the categories before/above the products.

    I found this code:

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

// Add subcategories before the product loop with priority 5
add_action( 'woocommerce_before_shop_loop', 'cg_show_product_subcategories', 5 );

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

    Source: https://www.commercegurus.com/docs/shoptimizer-theme/products-subcategories-separate/

    It works, but the categories are now showing twice: In their new place (before the shop loop, just above the ordering filter options), AND in the shop loop alongside with the products (the default place where they already were before).

    WooCommerce support team said it looks related to the theme (see original topic). Can someone help me find the way to prevent them to show a second time in the shop loop?

    • This topic was modified 6 months, 2 weeks ago by Lorangeo.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @lorangeo,

    Actually, customization and/or custom code is something beyond our scope either.

    Anyway, if you temporarily switch the theme to the default WooCommerce theme, Storefront and add the code above, what do you get?

    I look forward to hearing from you.

    Kind regards,
    Herman ??

    Thread Starter Lorangeo

    (@lorangeo)

    Hi,

    Thank you for asking! I tried to activate the Storefront and it does exactly the same. It shows the categories twice! First, before the shop loop (just above the ‘Sort Products’ dropdown), and a second time in their original place alongside the products.

    So it’s definitely not an Astra issue. The code

    remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' );

    doesn’t seem to work as expected.

    As I already said, I think it would be much more logical to show the categories before the shop loop (above the ‘Sort Products’ dropdown), instead of showing them alongside the products. It really makes things much more clear (just try it on your own shop!). So it would be great if someone could help make the above code work as expected.

    Hi @lorangeo,

    Thank you for the update!

    Well, you might want to back on the WooCommerce forum and ask for help there. Just like us, their support won’t help you with custom code I believe, however maybe they can help you in a right direction. Or maybe some other WooCommerce users will do.

    Anyway, since this is not related to Astra, I would ask you to mark this thread as Resolved. And feel free to start a new thread if there’s anything else related to Astra, we can help you with.

    Kind regards,
    Herman ??

    Thread Starter Lorangeo

    (@lorangeo)

    Hi!

    After some troubleshooting, I decided to adjust the display settings in the Customizer. I set the “Shop page display” and “Category display” to “Show products” only. With these settings and my original code, the categories were no longer appearing either before or inside the shop loop.

    But I made these modifications to the code:

    add_action( 'woocommerce_before_shop_loop', 'cg_show_product_categories', 10 );

function cg_show_product_categories() {
    // Check if we're on a category page
    if ( is_product_category() ) {
        // Output subcategories for the current category
        woocommerce_output_product_categories( array(
            'parent_id' => get_queried_object_id(),
            'before'    => '<ul class="products subcategories">',
            'after'     => '</ul>',
        ) );
    } else {
        // Output root categories for the shop page
        woocommerce_output_product_categories( array(
            'before' => '<ul class="products subcategories">',
            'after'  => '</ul>',
        ) );
    }
}

    It now works as expected. With these changes, the categories (or subcategories) are displayed correctly – before the shop loop only!

    I will mark the topic as resolved. Thank you for the help!

    Hi there,

    Good to know that. And thank you for sharing it here. It will be useful for someone who wants to achieve the same thing.

    Feel free to start a new thread if there’s anything else related to Astra, we can help you with.

    Kind regards,
    Herman ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Display WooCommnerce products and subcategories on separate rows with Astra’ is closed to new replies.