Aleš Sýkora wrote

Display all WooCommerce categories and their products inside

11. 2. 2021 in

If you need to display all your WooCommerce categories in the list and their products inside, you can use mine code. For example you need to create one page layout for food felivery.

Use my second tutorial, if you like to display all subcategories and its products on parent category archive.

Page = Food Delivery

  • Category 1
    • Product 1
    • Product 2
  • Category 2
    • Product 1
    • Product 2
$children = get_categories( array(
    'taxonomy'     => 'product_cat',
    'orderby'      => 'name',
    'pad_counts'   => false,
    'hierarchical' => 1,
    'hide_empty'   => false
) );

if ($children) {
  foreach ($children as $subcat) {
    echo '<h2><a href="' . esc_url(get_term_link($subcat, $subcat->taxonomy)) . '">' . // Display child taxonomy name
      $subcat->name . ' (' . $subcat->count . ')' . '</a></h2>' . $subcat->description; // Display child taxonomy item count
    $kategorie = $subcat->slug; // Set child category slug for each query of products
    $args = array(
      'post_type' => 'product',
      'product_cat' => $kategorie, 
    $loop = new WP_Query($args);
    if ($loop->have_posts()) {
      while ($loop->have_posts()) : $loop->the_post(); ?>
        <h4><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); //Display product title ?></a></h4>
        <?php $product = wc_get_product(get_the_ID()); // get the WC_Product Object ?>
        <p><?php echo $product->get_price_html(); // Display product Price ?></p>
        <?php endwhile; ?><?php
                        } else {
                          echo __('No products found');
                        wp_reset_postdata(); // Reset Query


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Astra Theme Container Width Fix
4. 9. 2019 in
If you encounter some issues with container width on mobile device when using Astra Theme and Toolset and Bootstrap try this CSS fixes.
Read More
Aleš Sýkora wrote
Display Child taxonomy link on taxonomy archive page
12. 3. 2021 in
Need to display a list of currrent taxonomy archive child taxonomies with links? You can use the wp_list_categories or get_categories. First approach -> using pre styled output with wp_list_categories. Second approach -> using custom html output with get_categories.
Read More
Aleš Sýkora wrote
Display only first image from multi value field in toolset
22. 7. 2020 in
I am using a custom field called “product images” where I upload images for my custom post type Coffee machines. When I want to show the image in the archive then, I just want to display the first Image. Not all of them. What happen is that toolset field automatically display all images from the […]
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram