如何缩小WooCommerce商品页属性下拉菜单及加购按钮的间距

问题分析 #

你之前尝试的CSS代码无效，大概率是选择器优先级不够，或者页面的间距并非来自.value元素的margin-bottom，而是表格行（<tr>）本身的间距，或是其他容器的内边距/外边距导致的。

有效解决方案 #

尝试以下CSS代码，直接针对表格行和加入购物车按钮上方的间距进行调整：

1. 缩小属性下拉菜单之间的间距 #

/* 调整属性表格每行的上下内边距，缩小下拉菜单间的垂直间距 */
.single-product div.product table.variations tr {
    padding: 0.25em 0 !important; /* 按需调整数值，0.25em可根据需求改小或改大 */
}

/* 移除或减小每个下拉菜单容器的底部外边距 */
.single-product div.product table.variations .value {
    margin-bottom: 0.3em !important; /* 替换原无效的margin-bottom值 */
}

2. 缩小最后一个下拉菜单与加入购物车按钮的间距 #

/* 调整属性表格整体的底部外边距，拉近和加入购物车按钮的距离 */
.single-product div.product table.variations {
    margin-bottom: 1em !important; /* 按需调整，默认可能是2em或更大 */
}

/* 如果按钮上方还有额外间距，直接调整按钮容器的顶部外边距 */
.single-product div.product .woocommerce-variation-add-to-cart {
    margin-top: 0.5em !important; /* 按需调整数值 */
}

使用说明 #

• 将上述代码添加到你的WordPress后台「外观」→「自定义」→「额外CSS」中，保存后刷新页面查看效果。
• !important用于强制覆盖主题或插件的原有样式，如果不加也能生效，可以去掉。
• 数值可以根据实际视觉效果微调，比如把0.25em改成0.1em进一步缩小间距。

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