Support » Developing with WordPress » dividing sub-categories by parent category

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator bcworkz

    (@bcworkz)

    Given any parent category ID, you can get its immediate children with the “parent” argument. For example $children = get_terms(['taxonomy'=>'category','parent'=> $cat_ID,]);

    You can get all top level terms by passing 0 as the “parent” arg.

    You can instead get all children regardless of generation with the “child_of” arg in place of “parent”.

    • This reply was modified 5 days, 19 hours ago by bcworkz.
    Thread Starter reeko6616

    (@reeko6616)

    Thanks for the response, I have no idea how to implement this, im new to wordpress, is there any examples of this online that you know of?

    Moderator bcworkz

    (@bcworkz)

    Not exactly what you need, but the docs page for get_terms() has a number of user contributed examples.
    https://developer.wordpress.org/reference/functions/get_terms/

    You may need to cobble something together using concepts from different sources. Start with an example that gets terms and loops through the results to generate output. You probably will need one loop nested within the other. The outer loop to get and output top level terms. For each top level term, get its children and loop through those results.

    Instead, you might try wp_list_categories().
    https://developer.wordpress.org/reference/functions/wp_list_categories/
    It generates a hierarchical list. It works internally somewhat like I described above so you don’t have to. The drawback is you have less flexibility in output. For example, this will not let you include related images, whereas in the above approach you could include related image tag output in the inner loop.

    You could try a general internet search, for example “wordpress list child categories”

    Thread Starter reeko6616

    (@reeko6616)

    this seems to e the closest thing ive found, I am using the code snippets plugin but when i add the code no change seems to take affect.

    $taxonomies = get_terms( array(
    ‘taxonomy’ => ‘taxonomy_name’,
    ‘hide_empty’ => false
    ) );

    if ( !empty($taxonomies) ) :
    $output = ‘<select>’;
    foreach( $taxonomies as $category ) {
    if( $category->parent == 0 ) {
    $output.= ‘<optgroup label=”‘. esc_attr( $category->name ) .'”>’;
    foreach( $taxonomies as $subcategory ) {
    if($subcategory->parent == $category->term_id) {
    $output.= ‘<option value=”‘. esc_attr( $subcategory->term_id ) .'”>
    ‘. esc_html( $subcategory->name ) .'</option>’;
    }
    }
    $output.='</optgroup>’;
    }
    }
    $output.='</select>’;
    echo $output;
    endif;

    Thread Starter reeko6616

    (@reeko6616)

    or this actually seems to be the closest

    //return the child categories of parent
    $cat = get_category( get_query_var( ‘cat’ ) );
    $cat_id = $cat->cat_ID;
    $child_categories=get_categories(
    array( ‘parent’ => $cat_id )
    );

    //print
    foreach ( $child_categories as $child ) {
    // Here I’m showing as a list…
    echo ‘

    • ‘.$child ->cat_name.’
    • ‘;
      }

    • This reply was modified 4 days, 4 hours ago by reeko6616.
    Thread Starter reeko6616

    (@reeko6616)

    I have since found this code, which looks like its meant to achieve my desired output but when I activate the snippet it causes a critical error on my site.

    $term = get_queried_object();

    $children = get_terms( $term->taxonomy, array(
    ‘parent’ => $term->term_id,
    ‘hide_empty’ => false
    ) );

    if ( $children ) {
    foreach( $children as $subcat ) {
    echo ‘taxonomy)) . ‘”>’ . $subcat->name . ‘ – ‘;

    $grandchildren = get_terms( $subcat->taxonomy, array(
    ‘parent’ => $subcat->term_id,
    ‘hide_empty’ => false
    ) );

    foreach ( $grandchildren as $grandchild ) {
    echo ‘taxonomy)) . ‘”>’ . $grandchild->name . ‘ – ‘;
    }
    }
    }

    Thread Starter reeko6616

    (@reeko6616)

    IGNORE MY PREVIOUS COMMENTS

    I now have the desired functionality, however the way it displays is incorrect, I want to display the parent cats as titles not images and the children as images not titles, also they are all being listed under the the parent category image title, initially I presumed this was due to the ‘woocommerce_after_subcategory_title’ hook which I was using, but I changed it to ‘woocommerce_after_subcategory’ but that didn’t make any difference at all

    // Adding Child Category List to Main Category Display Grid
    
    add_action('woocommerce_after_subcategory', 'woocommerce_subcats_from_parentcat_by_ID', 20);
    
    function woocommerce_subcats_from_parentcat_by_ID($category) {
    	$parent_category_ID = $category->term_id;
    	$args = array(
    		'hierarchical' => 1,
    		'show_option_none' => '',
    		'hide_empty' => 0, // Set to 0 to show empty categories and 1 to hide them
    		'parent' => $parent_category_ID,
    		'taxonomy' => 'product_cat'
    	);
    	$subcategories = get_categories($args);
    	echo '<ul class="woo_subcategory_list">';
    	foreach ($subcategories as $subcategory) {
    		$link = get_term_link( $subcategory->slug, $subcategory->taxonomy );
    		echo '<li><a href="'. $link .'">'.$subcategory->name.'</a></li>';
    	}
    	echo '</ul>';
    }
    Moderator bcworkz

    (@bcworkz)

    Getting the right cats is a good start. I don’t know WooCommerce very well, but from your description and code, Woo is responsible for the parent cat images, our code has nothing to do with it. Something else needs modification to suppress parent images. But we can add images to the sub-cat listing. However, I don’t know how to determine the right image URL, that’s not a standard taxonomy term feature.

    I can provide a partial solution. Lets assume some other code has somehow gotten the image URL into $cat_image_url. The echo line then becomes
    echo '<li><a href="'. $link .'"><img href="'. $cat_image_url .'" alt="category icon" />'.$subcategory->name.'</a></li>';

    To get guidance on Woo specific features, I refer you to their dedicated support forum:
    https://wordpress.org/support/plugin/woocommerce/

    Thread Starter reeko6616

    (@reeko6616)

    Thank you for your response, a modification of this could fix the images or at least show how they are retrieved. I’m just not sure how to implement it in my own code. Also I have posted in the woo forum, thank you for that I didn’t realise there was one, new to wp forums

    function oox_woocommerce_category_image() 
    {
        if ( is_product_category() )
    	{
          global $wp_query;
    	  
    	  $image = null;
          $cat       = $wp_query->get_queried_object();
    	  
          $thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
          $image        = wp_get_attachment_url( $thumbnail_id );
    	  
    	  if (  !is_null($image)  ) {
              echo '<img class="arch-desc-img" src="' . $image . '" width="50" height="50" />';
          }
    	}
    }
    add_action( 'woocommerce_before_main_content', 'oox_woocommerce_category_image', 16 );
    Thread Starter reeko6616

    (@reeko6616)

    Tried this but it didnt seem to work, chrome inspector says unknown src

    foreach ($subcategories as $subcategory) {
    		$link = get_term_link( $subcategory->slug, $subcategory->taxonomy );
    		$thumbnail_id = get_term_meta( $subcategory->term_id, 'thumbnail_id', true );
          	$image= wp_get_attachment_url( $thumbnail_id );
    		echo '<img src="' . $image . '" width="50" height="50" />';
    	}
    	echo '</ul>';
    }
    Thread Starter reeko6616

    (@reeko6616)

    can fetch images now, layout is still incorrect however

    // Adding Child Category List to Main Category Display Grid
    
    add_action('woocommerce_after_subcategory', 'woocommerce_subcats_from_parentcat_by_ID', 20);
    
    function woocommerce_subcats_from_parentcat_by_ID($category) {
    	$parent_category_ID = $category->term_id;
    	$args = array(
    		'hierarchical' => 1,
    		'show_option_none' => '',
    		'hide_empty' => 0, // Set to 0 to show empty categories and 1 to hide them
    		'parent' => $parent_category_ID,
    		'taxonomy' => 'product_cat'
    	);
    	$subcategories = get_categories($args);
    	echo '<ul class="woo_subcategory_list">';
    	foreach ($subcategories as $subcategory) {
    		$link = get_term_link( $subcategory->slug, $subcategory->taxonomy );
    		$thumb_id = get_term_meta( $subcategory->term_id, 'thumbnail_id', true );
    		$term_img = wp_get_attachment_url(  $thumb_id );
    		echo '<a href="'. $link .'"><img src="' . $term_img . '" width="250" height="250" /> '.$subcategory->name.'</a>';
    	}
    	echo '</ul>';
    }
    Moderator bcworkz

    (@bcworkz)

    You need to wrap the link and image in <li> tags.
    echo '<li><a href="'. $link .'"><img src="' . $term_img . '" width="250" height="250" /> '.$subcategory->name.'</a></li>';
    This will generate valid HTML. If you still encounter layout issues, it’d be something managed with CSS.

    For help with CSS we’d need a live link to a page demonstrating the problem.

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.