product description is not getting display after feature image - woocommerce shop

Question

I am trying to make product short description below product feature image in the woocommerce shop page. I used the woocommerce shop hooks for the same. But the problem is, product description is getting displayed on top of the featured image. please see the image attached below.

Code Snipped in functions.php

function woocommerce_after_shop_loop_item_title_short_description() {
    global $product;
    if ( ! $product->get_short_description() ) return;
    ?>
    <div itemprop="description">
        <?php echo apply_filters( 'woocommerce_short_description', $product->get_short_description() ) ?>
    </div>
    <?php
}
add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_after_shop_loop_item_title_short_description', 5);

I searched and tried different solutions and tried different woocommerce shop hooks mentioned here: (woocommerce_shop_loop_item_title etc) https://www.tychesoftwares.com/woocommerce-shop-page-hooks-visual-guide-with-code-snippets/ but hard luck. Also can somebody tell me how to set fixed featured image size in shop page using woocommerce hooks, so that it won't get distorted (In below image size is not same) Any help would be really appreciated.

Answer 1

Based on your screenshot and the fact that this also happens with the default Storefront theme I would guess you customized they way your product thumbnail is being called. Moving it from the woocommerce_before_shop_loop_item_title hook to the woocommerce_after_shop_loop_item_title hook.

In that case changing the priority would help. Please try the following:

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_after_shop_loop_item_title_short_description', 20 );
function woocommerce_after_shop_loop_item_title_short_description() {
    global $product;
    if ( $short_description = $product->get_short_description() ) {
        printf( '<div itemprop="description">%s</div>', $short_description );
    }
}