以垂直模式显示 Woocommerce 可变产品的颜色样本

Question

我有一家 Woocommerce 商店，里面有一些带有色样的可变产品。

如何以垂直形式而不是水平形式显示。我试过编辑它们，但我没有成功。

<div class="attribute-swatch" attribute-index="">
    <div class="swatchinput">
        <label selectid="colours-available" class="attribute_colours-available_White wcvaswatchlabel wcvasquare" data-option="White" selectedtext="White" style="background-color:#ffffff; width:32px; height:32px; "></label>
    </div>
    <div class="swatchinput">
        <label selectid="colours-available" class="attribute_colours-available_Anthracite grey ANTRA24 wcvaswatchlabel wcvasquare" data-option="Anthracite grey ANTRA24" selectedtext="Anthracite grey ANTRA24" style="background-color:#3a3b45; width:32px; height:32px; "></label>
    </div>
    <div class="swatchinput">
        <label selectid="colours-available" class="attribute_colours-available_Brown RAL 8017 wcvaswatchlabel wcvasquare" data-option="Brown RAL 8017" selectedtext="Brown RAL 8017" style="background-color:#41221d; width:32px; height:32px; "></label>
    </div>
</div>

Answer 1

如果您问题中的 html 代码是颜色样本的生成代码，您可以尝试在活动主题的 styles.css 文件中添加以下 CSS 规则：

.attribute-swatch .swatchinput {
     display: block !important; 
     float: none !important;
}

应该可以。但是，如果为您的色样生成的代码不同，它将无法正常工作...

以垂直模式显示 Woocommerce 可变产品的颜色样本

Show colors swatches in vertical mode for Woocommerce variable products

css

wordpress

woocommerce

product

variations