dividing sub-categories by parent category - WordPress

Question

I am aware this question is very similar to previous questions however none of the provided answers seem to work for me.

but my question is, how do I divide sub-categories by parent category?

For instance, If I click Balloons on this website (see first image), it then brings me to a new page where the sub categories are divided and the children of the sub category organised underneath it (see image 2 & 3).

I have tried all the answers and none of them seem to work, also I would like to keep the same hierarchical structure regardless of depth (with the exception of the products) I have tried the below code but it doesn't seem to work or show any change at all

$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;

I have also tried the following which seemed to be what i needed but it just caused 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 '<a href="' . esc_url(get_term_link($subcat, $subcat->taxonomy)) . '">' . $subcat->name . ' - </a>';

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

        foreach ( $grandchildren as $grandchild ) {
            echo '<a href="' . esc_url(get_term_link($grandchild, $grandchild->taxonomy)) . '">' . $grandchild->name . ' - </a>';
        }
    }
}

I am now trying a different approach and here is what I have so far, I am also using the code snippets plugin (I don't know if that makes a difference)

//Return the child categories of a 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 '<li>'.$child ->cat_name.'</li>';
}

Answer 1

This code seems to achieve the hierarchical structure I wanted, however the way it is displayed is still incorrect, the first noticeable issue is I am using the incorrect hook, the next issue is I want to display the parent title not the parent image & I want to display the children images and not the title but the code works fine in terms of functionality.

// Adding Child Category List to Main Category Display Grid

add_action('woocommerce_after_subcategory_title', '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>';
}