22 产品卡片动态化：从静态卡片到 Product Loop
更详细地整理产品卡片动态化时，图片、标题、价格、按钮、促销标记分别如何接入 WooCommerce 数据。
本页学习重点
产品卡片动态化：先替换 6 个核心字段
产品图片静态 img 替换为产品缩略图。
产品标题静态标题替换为当前产品标题。
产品价格静态价格替换为 WooCommerce 价格 HTML。
产品链接View Product 按钮链接到产品详情页。
加入购物车简单产品显示 Add to Cart，可变产品显示 Select Options。
促销标记Sale / New / Featured 可以根据产品状态判断。
静态卡片和动态卡片对比
静态卡片
<article class="product-card">
<img src="assets/product-01.svg">
<h3>Product 01</h3>
<p class="price">$39.00</p>
<a class="button">View Product</a>
</article>
动态卡片
<article <?php wc_product_class( 'product-card', $product ); ?>>
<a href="<?php the_permalink(); ?>">
<?php woocommerce_template_loop_product_thumbnail(); ?>
</a>
<h3><?php the_title(); ?></h3>
<div class="price">
<?php woocommerce_template_loop_price(); ?>
</div>
<?php woocommerce_template_loop_add_to_cart(); ?>
</article>
产品卡片接入时要注意
尽量保留原来的 class比如 product-card、price、button，这样 CSS 不需要大改。
不要直接写死价格格式WooCommerce 价格可能包含促销价、区间价、税费显示、货币符号。
按钮文字会随产品类型变化简单产品、可变产品、缺货产品的按钮可能不同。
图片比例由 CSS 控制动态接入后，不同产品图片尺寸可能不同，需要统一 object-fit 和容器比例。
本页总结
产品卡片是动态化的最小单位。先让一个卡片能读取真实产品数据，再扩展到产品列表，会比直接改整页更稳。