Woocomerce 代码获取产品列表

在WordPress中，如果你使用的是WooCommerce插件来管理产品，你可以通过WooCommerce提供的函数和WordPress的查询功能来获取产品列表。下面是一个简单的示例代码，展示如何获取并显示产品列表：

// 确保在适当的地方添加此代码，例如在你的主题文件中或通过创建一个自定义插件

if (function_exists('wc')) {
    // 创建一个新的WP_Query对象来获取产品
    $args = array(
        'post_type' => 'product', // 设置文章类型为产品
        'posts_per_page' => 10, // 显示的产品数量
    );

    $loop = new WP_Query($args);

    if ($loop->have_posts()) {
        while ($loop->have_posts()) : $loop->the_post();
            global $product;

            // 输出产品标题和链接
            echo '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
            
            // 如果需要，还可以输出其他产品信息，如价格等
            echo $product->get_price_html();
        endwhile;
    } else {
        echo __('没有找到产品');
    }

    // 重置文章数据
    wp_reset_postdata();
} else {
    echo 'WooCommerce插件未激活';
}

这段代码可以简单的列出商品列表，然后通过 WP_Query 的参数控制列表。下面是一个更详细的例子：

<?php
// 确保 WooCommerce 已激活
if ( ! function_exists( 'WC' ) ) {
    return;
}

// 设置查询参数
$args = array(
    'post_type'      => 'product',           // 查询产品类型
    'posts_per_page' => 10,                  // 每页显示的产品数量
    'post_status'    => 'publish',           // 只显示已发布的商品
);

// 创建 WP_Query 对象
$loop = new WP_Query( $args );

if ( $loop->have_posts() ) {
    echo '<div class="woocommerce">'; // 包裹整个商品列表的容器
    echo '<ul class="products">';     // 商品列表容器

    while ( $loop->have_posts() ) : $loop->the_post();
        global $product;

        // 获取商品信息
        $title       = get_the_title();                    // 商品标题
        $permalink   = get_permalink();                   // 商品链接
        $price_html  = $product->get_price_html();        // 商品价格（含格式）
        $rating_html = wc_get_rating_html( $product->get_average_rating() ); // 评分 HTML
        $stock_status = $product->is_in_stock() ? '有货' : '缺货'; // 库存状态

        // 获取特色图片
        if ( has_post_thumbnail() ) {
            $image = get_the_post_thumbnail( $loop->post->ID, 'shop_catalog' ); // 使用 WooCommerce 推荐的缩略图尺寸
        } else {
            $image = wc_placeholder_img( 'shop_catalog' ); // 如果没有特色图片，则显示占位符
        }

        // 开始输出每个商品的 HTML
        echo '<li class="product type-product">';

        // 商品图片链接
        echo '<a href="' . esc_url( $permalink ) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">';
        echo $image;
        echo '</a>';

        // 商品标题
        echo '<h2 class="woocommerce-loop-product__title"><a href="' . esc_url( $permalink ) . '">' . esc_html( $title ) . '</a></h2>';

        // 显示评分（如果有）
        if ( $rating_html ) {
            echo '<div class="star-rating">' . $rating_html . '</div>';
        }

        // 显示价格
        echo '<span class="price">' . $price_html . '</span>';

        // 显示库存状态
        echo '<p class="stock ' . ( $product->is_in_stock() ? 'in-stock' : 'out-of-stock' ) . '">' . esc_html( $stock_status ) . '</p>';

        // 购买按钮（添加到购物车）
        woocommerce_template_loop_add_to_cart(); // 使用 WooCommerce 默认的“添加到购物车”按钮模板

        echo '</li>';

    endwhile;

    echo '</ul>';
    echo '</div>';

    // 重置文章数据
    wp_reset_postdata();

} else {
    echo '<p>' . __( '暂无商品可显示。', 'your-text-domain' ) . '</p>';
}
?>

说明：

has_post_thumbnail() 和 get_the_post_thumbnail():
- 用于检查并获取商品的特色图片。
- 'shop_catalog' 是 WooCommerce 推荐用于商品列表的图片尺寸，你也可以使用 'thumbnail', 'medium', 或自定义尺寸。
wc_placeholder_img():
- 如果商品没有设置特色图片，则显示 WooCommerce 默认的占位图。
woocommerce_template_loop_add_to_cart():
- 这是 WooCommerce 提供的标准函数，用于输出“添加到购物车”按钮。它会根据商品类型（简单商品、可变商品等）自动适配按钮行为。
wc_get_rating_html():
- 输出商品的星级评分。
HTML 结构:
- 使用了 <ul class="products"> 和 <li class="product"> 结构，这是 WooCommerce 默认使用的类名，有助于样式继承。
安全性:
- 使用 esc_url() 和 esc_html() 来转义输出内容，防止 XSS 攻击。

自定义样式建议

你可以将以下 CSS 添加到主题的 style.css 中，以美化商品列表：

.woocommerce ul.products {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.woocommerce ul.products li.product {
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
    width: 200px;
}

.woocommerce ul.products li.product img {
    max-width: 100%;
    height: auto;
}

.woocommerce ul.products li.product .price {
    font-weight: bold;
    color: #d40000;
}

.woocommerce ul.products li.product .button {
    margin-top: 10px;
}