如何通过PHP在HTML转WordPress主题中嵌入WooCommerce商品框架

前置准备 #

• 确认WordPress环境已经安装并激活WooCommerce插件，当前改造的主题已经完成基础WordPress适配，包含style.css、index.php等必备主题文件
• 提前整理好你需要用到的自定义CSS样式，商品相关的类名可以完全沿用你原有HTML里的定义，不需要和WooCommerce默认类名绑定

核心PHP实现代码 #

将以下代码插入到你需要展示商品列表的页面模板对应位置即可，代码完全支持自定义样式适配：

<?php
// 定义商品查询参数
$args = array(
    'post_type' => 'product', // WooCommerce商品对应的固定文章类型
    'posts_per_page' => 12, // 单页展示商品数量，可根据需求自行修改
    'post_status' => 'publish', // 仅查询已上架的公开商品
);

// 执行商品查询
$products = new WP_Query($args);

if ($products->have_posts()) : ?>
    <!-- 商品列表容器，可替换为你原有HTML里的自定义类名 -->
    <div class="custom-product-list">
        <?php while ($products->have_posts()) : $products->the_post(); 
            // 获取当前商品的WooCommerce对象
            $product = wc_get_product(get_the_ID());
        ?>
            <!-- 单个商品项，可替换为你原有HTML里的自定义类名 -->
            <div class="custom-product-item">
                <!-- 商品缩略图模块 -->
                <div class="product-thumb">
                    <a href="<?php the_permalink(); ?>">
                        <?php echo $product->get_image('medium'); // 图片尺寸可按需替换为thumbnail、large等 ?>
                    </a>
                </div>
                <!-- 商品标题模块 -->
                <h3 class="product-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h3>
                <!-- 商品价格模块 -->
                <div class="product-price">
                    <?php echo $product->get_price_html(); ?>
                </div>
                <!-- 加入购物车按钮模块 -->
                <div class="product-add-to-cart">
                    <?php echo do_shortcode('[add_to_cart id="'.get_the_ID().'" show_price="false"]'); ?>
                </div>
            </div>
        <?php endwhile; ?>
    </div>
    <?php 
    // 重置查询，避免干扰页面其他WordPress原生查询逻辑
    wp_reset_postdata(); 
else : ?>
    <p class="no-products-tip">当前暂无上架商品</p>
<?php endif; ?>

样式与功能调整说明 #

你可以直接将原有HTML里的类名替换到上述代码对应容器的class属性中，把你写好的CSS样式复制到主题的style.css文件里即可直接生效，不需要兼容WooCommerce默认样式。如果需要调整商品查询规则，直接修改$args数组参数即可：

• 要修改商品排序规则，可添加'orderby' => 'date'（按上架时间排序）、'orderby' => 'price'（按价格排序）等参数
• 要展示指定分类的商品，可添加'product_cat' => '目标分类别名'参数
• 需要分页功能的话，额外添加paged参数配合WordPress原生分页函数即可实现，不需要修改核心查询逻辑

常见问题排查 #

• 如果调用后商品区域空白，先检查WooCommerce是否正常激活，后台是否已经添加了上架状态的商品
• 如果自定义样式不生效，检查CSS类名和代码中容器、商品项的class属性是否完全一致
• 如果按钮功能异常，确认WooCommerce的购物车、结算页等默认页面已经正常生成

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