How do I add the product category into the woocommerce product loop in Divi theme?

Question

I'm working in WordPress Divi theme and customizing the shop module. The design calls for displaying the category under the product name in the product grid. I'm attempting to do this by overriding the woocommerce_template_loop_product_title function. I'm able to grab the product ID but cannot seems to get the category. Any help would be appreciated. Here is the code I have so far and here is a page showing the shop module http://atelier.jdwebstaging.com/test-page/

    // Add the product category below title//
if ( ! function_exists( 'woocommerce_template_loop_product_title' ) ) {
function woocommerce_template_loop_product_title() {
    // Display the title.
    echo '<h2 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . ' </h2>'; 
    // Grab the product post ID
    $product_id = get_the_id();
        echo '<span class="cat_name">' . $product_id . '</span>'; //just to verify
    // Now get the category. Its an array, so it's a little tricky    
    $product_cat = get_the_category('$product_id');
        foreach($product_cat as $cd){
            echo '<span class="cat_name">' . $cd->cat_name . '</span>';
        } 
    }
}

Thanks for reading!