Where is the error in the layout of the WooComemrce product page?

Question

WordPress

I pull the layout through hooks. But the problem is that the div with the wokomers content is created somehow compressed, here is the screen.

I checked the code inspector with the template - all the divs are in place, and I did it according to the training video. Maybe some woocommerce styles need to be disabled?

The styles at the root of the theme in the style.css file are all commented out.

Answer 1

output products with normal wp query loop just use post-type product

$args = array(
'post_type' => 'product',
  'posts_per_page' => 5,
  
);
<?php
// запрос
$query = new WP_Query( $args ); ?>

<?php if ( $query->have_posts() ) : ?>

  <!-- пагинация -->

  <!-- цикл -->
  <?php while ( $query->have_posts() ) : $query->the_post(); ?>
    <h2><?php the_title(); ?></h2>
  <?php endwhile; ?>
  <!-- конец цикла -->

  <!-- пагинация -->

  <?php wp_reset_postdata(); ?>

<?php else : ?>
  <p><?php esc_html_e( 'Нет постов по вашим критериям.' ); ?></p>
<?php endif; ?>