如何使用 CSS 仅定位 WooCommerce 单一产品页面？

Question

当我添加

tr { display: inline-grid; }

时，它会导致购物车页面和其他页面出现问题。如何只在产品页面应用？

我需要将变体放在属性名称下。请看以下截图：

截图1：

截图2：

如果产品有 2 个变体，我还需要减少变体之间的空间：

tr { display: inline-grid; }

Answer 1

要定位单个产品页面，请使用主体类：

single-product

。

要定位可变产品的属性下拉表，请使用：

table.variations

大家一起：

.single-product table.variations tr { display: inline-grid; }

如果产品至少有 2 个属性下拉列表，要减少变体之间的空间，请使用：

.single-product div.product table.variations tr .value {
    margin-bottom: .5em; /* Reduced space on all dropdowns except last one */
}
.single-product div.product table.variations tr:last-child .value {
    margin-bottom: 1em; /* Normal space on last dropdown */
}

它应该按预期工作。

对于 Date 下拉列表，您似乎正在使用自定义字段，您应该提出一个新问题，提供所有相关代码和详细信息。