如何为WooCommerce product grid单个产品设置自定义背景色

两种方案可按需选择，都不需要依赖复杂插件。

方案1：纯CSS快速实现（适合当前10-15个产品的量级） #

WooCommerce输出产品网格时，会给每个产品卡片自动添加对应产品ID的专属class，直接针对这个class写样式即可，不需要改任何模板文件。

• 第一步：获取每个产品的ID
  进入WordPress后台「产品」列表页，鼠标悬停在对应产品名称上，浏览器底部状态栏会显示该产品的编辑链接，链接中post=后面的数字就是产品ID，比如链接里出现post=27，该产品的专属选择器就是.post-27。
• 第二步：添加自定义CSS
  进入后台「外观」-「自定义」-「额外CSS」，按产品ID逐个添加背景色样式即可，参考代码如下：

/* 产品ID为27的卡片设置浅黄背景 */
.woocommerce ul.products li.product.post-27 {
    background-color: #fff3cd;
    padding: 15px;
    border-radius: 8px;
}
/* 产品ID为34的卡片设置浅蓝背景 */
.woocommerce ul.products li.product.post-34 {
    background-color: #cfe2ff;
    padding: 15px;
    border-radius: 8px;
}
/* 产品ID为41的卡片设置浅绿背景 */
.woocommerce ul.products li.product.post-41 {
    background-color: #d1e7dd;
    padding: 15px;
    border-radius: 8px;
}

如果你的主题修改了WooCommerce默认的产品网格类名，按F12打开浏览器开发者工具，点选对应产品卡片，复制外层带产品ID的class替换上述选择器即可；代码里的padding、border-radius是适配卡片的配套样式，不需要可以直接删除。

方案2：后台可视化选色实现（无需写CSS，适合后续会持续加产品的场景） #

如果不想每次调整颜色都改CSS，可以给产品编辑页加原生的颜色选择字段，直接在后台选色保存即可，把下面的代码加到当前主题的functions.php文件（推荐用代码片段插件添加，避免主题更新丢失代码）：

// 产品编辑页常规选项卡添加背景色选择器
add_action( 'woocommerce_product_options_general_product_data', 'add_product_grid_bg_field' );
function add_product_grid_bg_field() {
    woocommerce_wp_text_input( [
        'id' => '_grid_bg_color',
        'label' => '产品网格背景色',
        'type' => 'color',
        'desc_tip' => true,
        'description' => '选择该产品在网格布局下的卡片背景色',
        'custom_attributes' => ['style' => 'width: 6em; height: 3em;']
    ] );
}
// 保存背景色字段值
add_action( 'woocommerce_process_product_meta', 'save_product_grid_bg_value' );
function save_product_grid_bg_value( $post_id ) {
    $bg_color = isset( $_POST['_grid_bg_color'] ) ? sanitize_hex_color( $_POST['_grid_bg_color'] ) : '';
    update_post_meta( $post_id, '_grid_bg_color', $bg_color );
}
// 前端输出对应产品的背景样式
add_action( 'woocommerce_before_shop_loop_item', 'render_product_grid_bg_style', 1 );
function render_product_grid_bg_style() {
    global $product;
    $bg = get_post_meta( $product->get_id(), '_grid_bg_color', true );
    if ( $bg ) {
        printf(
            '<style>.woocommerce ul.products li.product.post-%d {background-color: %s; padding:15px; border-radius:8px;}</style>',
            esc_attr( $product->get_id() ),
            esc_attr( $bg )
        );
    }
}

代码添加完成后，进入任意产品的编辑页，在「常规」选项卡下就能看到颜色选择控件，选好颜色更新产品即可生效，后续新增产品也可以直接设置。

样式适配提示：如果主题本身的产品卡片自带背景、内边距导致显示异常，删掉代码里的padding、border-radius属性，或调整数值和主题原有样式匹配即可。

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