Woocommerce PHP产品列表DIV - PHP

如果您正在使用WooCommerce进行电子商务网站开发，并且需要在您的网站上显示产品列表，那么您可以使用以下PHP代码片段来实现。

获取产品列表

在您的主题文件 functions.php 中，首先添加以下代码来获取产品列表。

$args = array(
    'post_type' => 'product',
    'posts_per_page' => 12,
);

$loop = new WP_Query( $args );

该代码使用 WP_Query 函数来查询 WooCommerce 产品 post 类型的所有帖子，并且设置每页显示 12 个产品。

显示产品列表

接下来，您可以在您的主题模板文件中添加以下代码来显示产品列表。

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

  <div class="products-list">

    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

      <div class="product">

        <?php woocommerce_template_loop_product_thumbnail(); ?>

        <a href="<?php the_permalink(); ?>">
          <h3><?php the_title(); ?></h3>
        </a>

        <?php woocommerce_template_loop_price(); ?>

      </div>

    <?php endwhile; ?>

  </div>

<?php else : ?>

  <p><?php _e( 'No products found' ); ?></p>

<?php endif; ?>

该代码使用了 while 循环来遍历查询结果，并使用了 WooCommerce 函数来显示产品图片、标题和价格。

样式化产品列表

您可以通过添加 CSS 样式来进一步样式化您的产品列表。例如，以下是一个简单的样式表，可以将产品列表中的产品放置在两列中。

.products-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product {
  width: 48%;
  margin-bottom: 30px;
}

在上面的代码中，我们使用了flexbox布局，将产品列表放置在两列中，并设置了产品 div 的宽度和底部边距。

现在您已经知道了如何使用 PHP 和 WooCommerce 来显示产品列表，并且可以通过添加 CSS 样式来进一步样式化您的产品列表。