0

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 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>'
    ;
}
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 );
  • Thank you @user165319! It was indeed a great help and very well explained ! – João Teixeira Apr 18 '19 at 10:43
  • You're welcome, and I'd appreciate it if you can mark the answer as correct. :-) – user165319 Apr 18 '19 at 12:52
  • Done! :) I'd like to upvote your answer as well but my low reputation doesn't allow me to :( – João Teixeira Apr 25 '19 at 18:10
  • Thanks! And it's alright about the upvote. :-) – user165319 Apr 26 '19 at 5:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.