MyTravel - Display subcategories in shop page

functions.php

add_action( 'woocommerce_before_shop_loop',              'mytravel_wc_maybe_show_product_subcategories', 25 );

if ( ! function_exists( 'mytravel_wc_maybe_show_product_subcategories' ) ) {
    function mytravel_wc_maybe_show_product_subcategories() {
        wc_set_loop_prop( 'loop', 0 );
        $product_cat_columns = apply_filters( 'mytravel_product_cat_columns', 3 );
        $product_columns     = absint( max( 1, wc_get_loop_prop( 'columns', wc_get_default_products_per_row() ) ) );
        wc_set_loop_prop( 'columns', $product_cat_columns );
        $wc_sub_categories = woocommerce_maybe_show_product_subcategories( '' );
        wc_set_loop_prop( 'columns', $product_columns );
        if ( ! empty( $wc_sub_categories ) ) {
            ?><section class="section-product-categories">
               
                <ul class="mb-4 list-unstyled loop-product-categories row row-cols-md-6 row-cols-lg-6 row-cols-xl-<?php echo esc_attr( $product_cat_columns ); ?>"><?php echo wp_kses_post(  $wc_sub_categories ); ?></ul></section><?php
        }
    }
}

style.css

.loop-product-categories  .product-category  .woocommerce-loop-category__title {
color: #3b444f;
font-size: 1.063rem;
font-weight: 500;
text-align: center;
}


.loop-product-categories  .product-category a:hover  .woocommerce-loop-category__title,
.loop-product-categories  .product-category a:hover  .woocommerce-loop-category__title .count,
.loop-product-categories  .product-category a:focus  .woocommerce-loop-category__title,
.loop-product-categories  .product-category a:focus  .woocommerce-loop-category__title .count {
color: #297cbb !important;

}

.loop-product-categories  .product-category  .woocommerce-loop-category__title .count {
background: transparent !important;
}

ul.loop-product-categories.row > * {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 100%;
max-width: 100%;
}
@media(min-width: 768px) {
ul.loop-product-categories.row > * {
flex: 0 0 50%;
max-width: 50%;
}
}
@media(min-width: 1200px) {
ul.loop-product-categories.row > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
}

Please add the above code in function.php in your child theme and add css code in Appearance > Customize > Additional CSS