How to add woocommerce products header title in woocommerce_breadcrumb hook to function.php

Iam new to WooCommerce theming and get stuck with category display page here is the code i have:

/**
 * Change several of the breadcrumb defaults
 */
add_filter('woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs');
function jk_woocommerce_breadcrumbs()
{
    if (is_product_category()) {
        global $wp_query;

        // get the query object
        $cat = $wp_query->get_queried_object();

        // get the thumbnail id using the queried category term_id
        $thumbnail_id = get_term_meta($cat->term_id, 'banner', true);

        // get the image URL
        $image = wp_get_attachment_url($thumbnail_id);

        // print the IMG HTML
        echo "";
        return array(
            'delimiter'   => ' / ',
            'wrap_before' => '<div class="c-main-banner c-main-banner--inner no-overlay w-100" style="background-image: url(' . $image . '"><div class="container"><ol>',
            'wrap_after'  => '</ol></div></div>',
            'before'      => '<li>',
            'after'       => '</li>',
            'home'        => _x('Home', 'breadcrumb', 'woocommerce'),
        );
    }
}

But i need to display like this:

<div class="c-main-banner c-main-banner--inner no-overlay w-100" style="background-image: url( category banner image as background );">
    <div class="container">
        <ol class="c-breadcrumb">
                <li><a href="breadcrumb slug"> breadcrumb-name </a></li>
        </ol>
        <div class="c-banner-content d-flex align-items-start justify-content-end flex-wrap flex-column">
            <big> woocommerce-products-header-title </big>
        </div>
    </div>
</div>