在 Woocommerce 的数量输入字段中隐藏 "Quantity" 标签

Question

我刚刚在 functions.php 文件中使用了一段代码来隐藏数量框 - 代码是：

//function custom_remove_all_quantity_fields( $return, $product ) {return true;}
//add_filter( 'woocommerce_is_sold_individually','custom_remove_all_quantity_fields', 10, 2 );

现在，当我注释掉它时，数量又回来了，但带有 "Quantity" 标签，这是以前从未有过的。

为什么突然出现这种情况，如何隐藏标签？

Answer 1

为此数量字段生成的 html 输出应该类似于：

<div class="quantity">
    <label class="screen-reader-text" for="quantity_5c5856feb38cb">Quantity</label>
    <input type="number" id="quantity_5c5856feb38cb" class="input-text qty text" step="1" min="1" max="35" name="quantity" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="Happy Ninja quantity">
</div>

因此，此数量字段的 <label> 标签使用 screen-reader-text class 通过以下 CSS 规则隐藏它：

.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

所以您在某处做了一些更改，这就是 "Quantity" 标签可见的原因。

编辑：

因此您可以尝试将以下 CSS 规则添加到活动主题的 styles.css 文件中：

.single-product div.quantity > label {
    display: block !important;
    border: 0;
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px !important;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

它应该可以工作并在单个产品页面上隐藏 "Quantity" 标签…

在 Woocommerce 的数量输入字段中隐藏 "Quantity" 标签

Hide "Quantity" label from quantity input field in Woocommerce

html

css

wordpress

woocommerce

product-quantity