Display subcategory list under main category thumbnail

So I’ve been looking for days now to either find a snippet of code or plugin online that somebody else has created to do this as well as trying to modify pieces of code that do something similar that I found while digging through the Woocommerce core files and can’t find anything that works.

What I am trying to do is take the existing “Product Categories” page that displays each of the main product categories with a thumbnail and category title and I want to add a list of subcategories under each of the main categories.

So what I have right now is a page that just displays my main product categories like this:

What I have Now

And what I have been trying to create is a page that looks like this:

Desired Look

Currently the Product Categories are displayed within the loop as list items using the template content-product_cat.php which looks like this:

<?php
/**
 * The template for displaying product category thumbnails within loops
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-product_cat.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 2.6.1
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<li <?php wc_product_cat_class( '', $category ); ?>>
	<?php
	/**
	 * woocommerce_before_subcategory hook.
	 *
	 * @hooked woocommerce_template_loop_category_link_open - 10
	 */
	do_action( 'woocommerce_before_subcategory', $category );

	/**
	 * woocommerce_before_subcategory_title hook.
	 *
	 * @hooked woocommerce_subcategory_thumbnail - 10
	 */
	do_action( 'woocommerce_before_subcategory_title', $category );

	/**
	 * woocommerce_shop_loop_subcategory_title hook.
	 *
	 * @hooked woocommerce_template_loop_category_title - 10
	 */
	do_action( 'woocommerce_shop_loop_subcategory_title', $category );

	/**
	 * woocommerce_after_subcategory_title hook.
	 */
	do_action( 'woocommerce_after_subcategory_title', $category );

// Begin my edit to display Subcategories

	$categories = $category->children;

	foreach ( $categories as $category ) {
		?>
			<li class="wc-block-product-categories-list-item">
				<a href=" <?php esc_attr( get_term_link( $category->term_id, 'product_cat' ) ); ?>">
					'<?php esc_html( $category->name ); ?>'
				</a>
			</li>
			<?php
	}

// End my edit to display Subcategories

	/**
	 * woocommerce_after_subcategory hook.
	 *
	 * @hooked woocommerce_template_loop_category_link_close - 10
	 */
	do_action( 'woocommerce_after_subcategory', $category );
	?>
</li>

I pulled and altered the code in between the edit lines from the file ProductCategories.php as this code is used to display the child categories within the full hierarchical category list that can be added as a block in the wordpress page builder. It is part of the Woocommerce core files.

I’ve tried adding an action that calls a function in the functions.php file as well as just directly modifying the template as above and I can get it to display plain text in the space below each main category but no matter which way I try I can’t get it to display the child categories.

Does anybody know what I’m doing wrong or if I’m going about this the wrong way or something?