Woocommerce : Can't get product info in loop

Question

I am creating a custom Theme that uses Woocommerce. On the frontage I have a loop that display the 12th newest products. I also created a custom template for Woocommerce but I can't display some info (like the price or the image) but I can display the title or the permalink for example.

Here is my loop (front-page.php) :

<?php 
  $args = array(
    'post_type'=>'product',
    'shortby'=>'date',
    'posts_per_page'=>12
  );
  $loop = new WP_Query($args);
  if($loop->have_posts()) {
    while($loop->have_posts()) {
      $loop->the_post();
      wc_get_template_part("content", 'carousel');
    }
  } else {
    echo 'No products found';
  }
  wp_reset_postdata();
?>

and here is my template (content-carousel.php) :

<div class="item">
  <div class="img"></div>
  <h2><?php the_title(); ?></h2>
  <p>
    <span class="sale-price"><?php echo $product->get_price_html(); ?></span>
    <span class="old-price">Old Price</span>
  </p>
  <a href="<?php the_permalink(); ?>"><div class="button see">More Information</div></a>
  <a href="#!"><div class="button">+ 1</div></a>
</div>

For example the price in .sale-price will create an error and stop displaying the other products after.

When .sale-price have content

When .sale-pice is empty

Answer 1

First of all, get_price_html() outputs html code for product price. To get sale price specifically, use get_sale_price() instead, and get_price() to get regular price.

Use Chrome web dev tool to inspect for any php error. The Loop breaks after outputing title, so my guess would be to look for error there.