Oxygen Builder Tutorial

Get WooCommerce Parent Categories

Get Help with Oxygen
Blue globe and ball image
Categories:
Get WooCommerce parent categories

Oxygen's Categories List element isn't currently able to display WooCommerce parent categories only. However, there is a simple workaround using Oxygen's Code Block element. To use the workaround, add a Code Block to your design and set the width of the Code Block to 100% via Advanced > Size & Spacing.

Next, add the following PHP to the Code Block:

<?php
$terms = get_terms(['taxonomy' => 'product_cat', 'hide_empty' => false, 'parent' => 0]);

if ($terms)
{ ?>

<div class="oxy-woo-product-categories oxy-woo-element">
   <div class="woocommerce columns-4">
      <ul class="products columns-4">
  
  <?php
    foreach ($terms as $term)
    {
        // GET IMAGE
        // get the thumbnail id
        $thumbnail_id = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true);

        // get the image URL
        $image = wp_get_attachment_url($thumbnail_id);
        $srcset = wp_get_attachment_image_srcset($thumbnail_id, array(
            300,
            300
        ));

        if (empty($image))
        {
            $image = '/wp-content/uploads/woocommerce-placeholder-300x300.png';
        }

        // GET NAME
        $cat_name = $term->name;

        // GET URL
        $cat_url = get_term_link($term->term_id, 'product_cat');

?>

         <li class="product-category product first">
            <a href="<?php echo $cat_url; ?>">
               <img src="<?php echo $image; ?>" srcset="<?php echo esc_attr($srcset); ?>" alt="<?php echo $cat_name; ?>" width="300" height="300">		
               <h2 class="woocommerce-loop-category__title">
                  <?php echo $cat_name; ?>	
               </h2>
            </a>
         </li>

<?php
    }

?>
  
      </ul>
   </div>
</div>

<?php
}

?>

That should be all you need to do to see your parent categories! If you wish to hide empty categories, then you can set "hide_empty" to "true" on the second line.

Phe Simmonds

Tutorial written by Phe Simmonds

Director & Web Developer at WinuSoft Web Design. When she's not working, Phe can usually be found mountain biking with her partner, Luis and dog, Bubba.
Blue background image Blue ball image

Other Tutorials

Blue circular lines

Get In Touch

Whether your business is just getting started or you’re in the middle of a growth spurt, we can design and develop a website that will help you scale.

"*" indicates required fields

Name*
This field is for validation purposes and should be left unchanged.
Copyright © 2024 WinuSoft Web Design
crosschevron-downarrow-right