如何用CSS仅针对WooCommerce单品页面调整产品变体样式？

问题根源 #

你之前的tr { display: inline-grid; }是全局CSS规则，会影响所有页面的表格行（包括购物车页），必须限制其作用范围到单个产品页的变体区域。

1. 仅在单个产品页应用变体排版代码 #

使用WooCommerce单个产品页专属的body类.single-product，结合变体表格的类名table.variations，精准定位目标元素：

/* 仅作用于WooCommerce单个产品页的变体属性表格 */
.single-product table.variations tr {
    display: inline-grid;
    grid-template-columns: 100%; /* 强制单列，让属性名称和选项上下排列 */
    width: 100%; /* 确保占满容器宽度 */
}

/* 让属性标签和选项区域都占满整列，实现上下布局 */
.single-product table.variations tr td.label,
.single-product table.variations tr td.value {
    grid-column: 1 / -1;
}

2. 减少2个变体产品的间距 #

根据你的需求，分两种场景处理：

场景1：产品仅有2个属性变体（表格含2个<tr>）

/* 针对只有2个属性变体的产品，缩小属性间的间距 */
.single-product table.variations:has(tr:nth-child(2):last-child) tr {
    margin-bottom: 6px; /* 替换为你需要的间距值 */
}

场景2：单个属性下有2个选项（比如单选/下拉框含2个选项）

/* 缩小单个属性内2个选项的间距 */
.single-product table.variations .variations_form ul.variations li {
    margin: 3px 0; /* 自定义上下间距 */
}

兼容性说明 #

如果你的目标浏览器不支持:has()选择器，可以通过简单的JavaScript判断变体数量，给表格添加自定义类：

// 在单个产品页加载时执行
document.addEventListener('DOMContentLoaded', function() {
    const variationsTable = document.querySelector('.single-product table.variations');
    if (variationsTable && variationsTable.querySelectorAll('tr').length === 2) {
        variationsTable.classList.add('two-variations');
    }
});

然后用CSS替代:has()规则：

.single-product table.variations.two-variations tr {
    margin-bottom: 6px;
}

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