I am using Storefront theme with woocommerce and I want to create a custom layout in the shop page.

This custom layout has no product thumbnail the title and price must be inside the same div so I can easily customize it with css.

However when I try to get the price inside the h2 tags it doesn't has the result I expected. It appears but above the Title and outside the custom div. What am I doing wrong?

See image for reference

remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

add_filter( 'woocommerce_shop_loop_item_title' , 'custom_woocommerce_template_loop_product_title', 10);

function custom_woocommerce_template_loop_product_title () {
    echo '
    <div class="custom-title-wrapper">
    <h1 class="woocommerce-loop-product__title custom-loop-product-title">' . get_the_title() . '</h1>
    <h2>' . woocommerce_template_loop_price() . '</h2>
    </div>'
    ;
}

I am using Storefront theme with woocommerce and I want to create a custom layout in the shop page.

This custom layout has no product thumbnail the title and price must be inside the same div so I can easily customize it with css.

However when I try to get the price inside the h2 tags it doesn't has the result I expected. It appears but above the Title and outside the custom div. What am I doing wrong?

See image for reference

remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

add_filter( 'woocommerce_shop_loop_item_title' , 'custom_woocommerce_template_loop_product_title', 10);

function custom_woocommerce_template_loop_product_title () {
    echo '
    <div class="custom-title-wrapper">
    <h1 class="woocommerce-loop-product__title custom-loop-product-title">' . get_the_title() . '</h1>
    <h2>' . woocommerce_template_loop_price() . '</h2>
    </div>'
    ;
}

• woocommerce-offtopic

1 Answer 1

It appears but above the Title and outside the custom div. What am I doing wrong?

It's because woocommerce_template_loop_price() echoes the output.

So to fix the problem, just use ?> HTML here <?php instead of echo 'HTML here';:

function custom_woocommerce_template_loop_product_title() {
    ?>
    <div class="custom-title-wrapper">
        <h1 class="woocommerce-loop-product__title custom-loop-product-title"><?php the_title(); ?></h1>
        <h2><?php woocommerce_template_loop_price(); ?></h2>
    </div>
    <?php
}

And (although this isn't a big issue,) you should use add_action() and not add_filter() because woocommerce_shop_loop_item_title is an action and not a filter:

add_action( 'woocommerce_shop_loop_item_title', 'custom_woocommerce_template_loop_product_title', 10 );