如何自定义WooCommerce的content-product.php模板在店铺首页展示产品属性

修改思路 #

直接在原有模板的价格展示钩子后新增产品属性拉取与输出代码即可，你可以根据自身需求调整属性显示的位置、样式以及要展示的属性项。

修改后的完整模板代码 #

<h3><?php the_title(); ?></h3>
<?php
    /**
     * woocommerce_before_shop_loop_item_title hook
     *
     * @hooked woocommerce_show_product_loop_sale_flash - 10
     * @hooked woocommerce_template_loop_product_thumbnail - 10
     */
    do_action( 'woocommerce_before_shop_loop_item_title' );
?>


<?php
    /**
     * woocommerce_after_shop_loop_item_title hook
     *
     * @hooked woocommerce_template_loop_price - 10
     */
    do_action( 'woocommerce_after_shop_loop_item_title' );
?>

<!-- 以下是新增的产品属性展示代码 -->
<?php 
global $product;
// 此处填写你需要展示的属性slug，可自行增删
$target_attributes = [
    'pa_size' => '尺寸',
    'pa_color' => '颜色',
    'pa_material' => '材质'
];

foreach ($target_attributes as $attr_slug => $attr_title) {
    $attr_values = $product->get_attribute($attr_slug);
    if ($attr_values) :
?>
<div class="product-attr-item">
    <strong class="attr-title"><?php echo esc_html($attr_title); ?>：</strong>
    <span class="attr-value"><?php echo esc_html($attr_values); ?></span>
</div>
<?php
    endif;
}
?>

配置说明 #

• 请将$target_attributes数组中的键替换为你实际要展示的WooCommerce产品属性slug，值为前端要显示的属性标题
• 可通过调整product-attr-item、attr-title、attr-value对应CSS样式，实现你需要的排版效果
• 如果产品没有设置对应属性值，该属性项会自动隐藏，不会占用前端展示位

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