如何将WooCommerce最新产品数据嵌入自定义HTML实现自动更新

直接用WordPress/WooCommerce自带的PHP功能就能搞定，不用写复杂的JS，新增产品会自动更新内容。以下是适配你现有HTML结构的完整解决方案：

方案1：直接替换主题模板中的静态代码 #

把你原来的两个静态div（每个包含4份产品HTML）全部删掉，换成下面的PHP代码，这段代码会自动拉取最新8个产品，分成两个div各放4个：

<?php
// 查询最新8个已发布的WooCommerce产品
$latest_products = new WP_Query([
    'post_type' => 'product',
    'posts_per_page' => 8,
    'orderby' => 'date',
    'order' => 'DESC',
    'post_status' => 'publish'
]);

if ($latest_products->have_posts()) : 
    $product_count = 0;
    // 第一个产品组div
    echo '<div class="product-group">';
    
    while ($latest_products->have_posts()) : $latest_products->the_post();
        global $product;
        $product_count++;
        ?>
        <!-- 你的产品HTML结构，替换静态内容为动态数据 -->
        <a class="product" href="<?php echo get_permalink(); ?>">
            <figure class="product__figure">
                <img
                    class="product__figure__img"
                    src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'woocommerce_thumbnail'); ?>"
                    alt="<?php echo get_the_title(); ?>"
                />
                <figcaption class="product__figure__figcaption">
                    <h3 class="product__title"><?php echo get_the_title(); ?></h3>
                    <span class="product__price"><?php echo $product->get_price_html(); ?></span>
                </figcaption>
            </figure>
            <span class="product__button">Options</span>
        </a>
        <?php
        // 每4个产品切换到第二个div
        if ($product_count === 4) {
            echo '</div><div class="product-group">';
        }
    endwhile;
    
    echo '</div>'; // 关闭第二个产品组div
    wp_reset_postdata(); // 重置查询，避免影响页面其他内容
endif;
?>

关键动态替换说明 #

• get_permalink()：自动获取产品的永久链接，替换你原来的#
• get_the_post_thumbnail_url(...)：自动拉取产品的特色图片（用WooCommerce默认缩略图尺寸），替换静态图片的#
• get_the_title()：自动显示产品名称，替换静态的Lorem ipsum dolor sit
• $product->get_price_html()：自动显示产品价格（会根据你WooCommerce设置的货币自动显示€符号，支持促销价、折扣价等场景）

方案2：用短代码插入（不用改主题文件） #

如果你不想修改主题模板文件，可以在主题的functions.php中添加以下代码，创建一个自定义短代码：

function latest_8_woocommerce_products() {
    ob_start();
    
    // 查询最新8个产品
    $latest_products = new WP_Query([
        'post_type' => 'product',
        'posts_per_page' => 8,
        'orderby' => 'date',
        'order' => 'DESC',
        'post_status' => 'publish'
    ]);

    if ($latest_products->have_posts()) : 
        $product_count = 0;
        echo '<div class="product-group">';
        
        while ($latest_products->have_posts()) : $latest_products->the_post();
            global $product;
            $product_count++;
            ?>
            <a class="product" href="<?php echo get_permalink(); ?>">
                <figure class="product__figure">
                    <img
                        class="product__figure__img"
                        src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'woocommerce_thumbnail'); ?>"
                        alt="<?php echo get_the_title(); ?>"
                    />
                    <figcaption class="product__figure__figcaption">
                        <h3 class="product__title"><?php echo get_the_title(); ?></h3>
                        <span class="product__price"><?php echo $product->get_price_html(); ?></span>
                    </figcaption>
                </figure>
                <span class="product__button">Options</span>
            </a>
            <?php
            if ($product_count === 4) {
                echo '</div><div class="product-group">';
            }
        endwhile;
        
        echo '</div>';
        wp_reset_postdata();
    endif;
    
    return ob_get_clean();
}
add_shortcode('latest_8_products', 'latest_8_woocommerce_products');

添加完成后，你可以在WordPress后台的页面/文章编辑器中输入[latest_8_products]，就能自动显示最新8个产品的列表了。

注意事项 #

1. 确保你的WooCommerce后台已经正确设置货币为欧元（WooCommerce > 设置 > 常规 > 货币）
2. 每个产品需要设置特色图片，否则会显示主题默认的占位图（如果主题支持的话）
3. 新增产品后，这段代码会自动拉取最新的8个，无需手动更新HTML

内容的提问来源于stack exchange，提问作者Paul