Add Product Category div in Shop Page and Single page ||OR|| Add Product only first Category in Shop Page and Single page

on

 /* Function.php */

/* Add Product Category div in Shop Page and Single page */

add_action('woocommerce_shop_loop_item_title','product_category_before_product_title', 9);
function product_category_before_product_title() {
global  $post;
$terms = get_the_terms ( $post->ID, 'product_cat' );
$product_cat = array();
foreach ( $terms as $term ) {
$product_cat[] .= $term->name;
}
    echo '<div class="pro-category"><h4>'.$product_cat[0].'</h4></div>';
}

/******************************************************************/

/* Add Product only first Category in Shop Page and Single page */

<?php
$terms = get_the_terms( $product_id, 'product_cat' );
$product_cat = array();
foreach ($terms as $term) {
   $product_cat[] .= $term->name;
}
echo ($product_cat[0]);
/*echo implode(', ', $product_cat);*/
?>
/* Function.js/
/* One button click call another button click event*/
$("a#checkout-side-place-order-btn").click(function(event){
event.preventDefault();
$("button#place_order").click();
});