WPITECHWPITECH

    Subscribe to Updates

    Get Latest WordPress Tutorials and Updates

    What's Hot

    12 Best Ecommerce Software in 2021 & in the Future

    July 31, 2021

    Why Is My Canon Printer Not Printing Properly?

    July 31, 2021

    5 Best Google Analytics Plugins

    May 28, 2021
    Facebook Twitter Instagram
    Facebook Twitter Instagram
    WPITECH WPITECH
    Subscribe
    • Home
    • Tutorials
      • WordPress Tutorials
      • WordPress Plugin
      • WordPress Themes
      • WooCommerce
      • Ecommerce
      • PHP
    • Hosting
    • Deals
      • Hosting Deals
    • SEO TOOLS
      • Bulk Url Checker
      • Structured Data
      • Google Cache
      • Hyperlink Generator
      • Free URL Checker
    • Marketing
      • SEO
      • Advertising
    • Reviews
    • Write for Us
    • About Us
    WPITECHWPITECH
    Home » How to Display Category Wise Product in WooCommerce
    WooCommerce

    How to Display Category Wise Product in WooCommerce

    WPITECHBy WPITECHJune 19, 2019No Comments3 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    display WooCommerce categories
    Share
    Facebook Twitter LinkedIn Pinterest Email

    In this tutorial you will learn to display a particular category product in WooCommerce.

    You have several options on your WooCommerce store as to what you can show on your archive pages.

    1. Products
    2. Categories (on shop page)
    3. Subcategories (on category pages)
    4. Both products and categories

    When you setting up your WooCommerce store the third option should be best for you that is products and categories. This shows that the visitors can either select products from home page or improve their search by clicking through to a product category archive. Here you will see how to display categories in a distinct list before displaying the products.

    1. Differentiate WooCommerce code that is used to show categories and subcategories output on archive pages.
    2. Creating plugin for code
    3. Write a function to list categories before product listings.
    4. Styling Output

    Go to WooCommerce > Settings, choose the Products tab, and then select the Display option. For Shop Page Display and Default Category Display options, select Show both.

    Show categories and products

    Click on the Save changes button to save.

    display product categories

    Display Category Wise Product in WooCommerce

    function woocommerce_product_category( $args = array() ) {
    $woocommerce_category_id = get_queried_object_id();
    $args = array(
    'parent' => $woocommerce_category_id
    );
    $terms = get_terms( 'product_cat', $args );
    if ( $terms ) {
    echo '<ul class="woocommerce-categories">';
    foreach ( $terms as $term ) {
    echo '<li class="woocommerce-product-category-page">';
    woocommerce_subcategory_thumbnail( $term );
    echo '<h2>';
    echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
    echo $term->name;
    echo '</a>';
    echo '</h2>';
    echo '</li>';
    }
    echo '</ul>';
    }
    }
    add_action( 'woocommerce_before_shop_loop', 'woocommerce_product_category', 100 );

    There is a woocommerce_product_category() function that is displaying the categories or subcategories before running the loop that displays the products.

    display products page categories

    List WooCommerce Category Page Subcategories

    Here I will show you to easily get the subcategory of WooCommerce product categories using a custom function that takes parent product category slug.

    In this code snippet, WP_Term object gets the product category parent and the other gets the child ID in an array. Atlast, the child categories are displayed by running a loop through the child ID array.

    function woocommerce_get_product_category_of_subcategories( $category_slug ){
    $terms_html = array();
    $taxonomy = 'product_cat';
    $parent = get_term_by( 'slug', $category_slug, $taxonomy );
    $children_ids = get_term_children( $parent->term_id, $taxonomy );
    foreach($children_ids as $children_id){
    $term = get_term( $children_id, $taxonomy );
    $term_link = get_term_link( $term, $taxonomy );
    if ( is_wp_error( $term_link ) ) $term_link = '';
    $terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' . $term->name . '</a>';
    }
    return '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';
    }

    WooCommerce Display Product Category Description

    This code should be placed in WooCommerce template file that you later used to display your product details. In this code ‘wp_get_post_terms’ filter calls when the cache has the required term. After that, the filter will pass the term and array $args.

    global $post;
    $args = array( 'taxonomy' => 'product_cat',);
    $terms = wp_get_post_terms($post->ID,'product_cat', $args);
    $count = count($terms);
    if ($count > 0) {
    foreach ($terms as $term) {
    echo '<div class="woocommerce-get-product-category">';
    echo $term->description;
    echo '</div>';
    }
    }
    display product categories WooCommerce display product categories
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    WPITECH

    Related Posts

    5 Best WooCommerce Affiliate Plugins

    January 3, 2020

    How to Customize Add to Cart Button in WooCommerce

    October 21, 2019

    How to Customize WooCommerce Product Variations

    October 13, 2019
    Add A Comment

    Leave A Reply Cancel Reply

    Recent Posts
    • 12 Best Ecommerce Software in 2021 & in the Future
    • Why Is My Canon Printer Not Printing Properly?
    • 5 Best Google Analytics Plugins
    • 12 Best Email List Building Tools in 2021
    • 9 Amazing Benefits of Using WordPress for Your Projects
    Recent Comments
    • 20+ Top Ecommerce Marketing Agencies To Hire for 2020 on Conversion Rate Optimization Tips to Improve Conversions and Increase Revenue
    • Hottest B2B Content Marketing Trends and Statistics in 2019 on The Ultimate Guide to Broken Link Building 2020
    • Digital Chetan on SEO 2020 Google RankBrain Algorithm GUIDE
    Editors Picks
    Top Reviews
    Advertisement
    Demo
    Facebook Twitter Instagram Pinterest Vimeo YouTube
    • Home
    © 2022 All rights reserved

    Type above and press Enter to search. Press Esc to cancel.