在 Woocommerce 的数量输入字段中隐藏“数量”标签答案

【问题标题】：Hide "Quantity" label from quantity input field in Woocommerce在 Woocommerce 的数量输入字段中隐藏“数量”标签
【发布时间】：2019-02-04 13:49:05
【问题描述】：

我只是在我的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 );

现在，当我将其注释掉时，数量又回来了，但带有以前从未有过的“数量”标签。

为什么会突然发生这种情况，如何隐藏标签？

【问题讨论】：

标签： html css wordpress woocommerce product-quantity

【解决方案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 类通过以下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;
}

所以您在某处进行了一些更改，这就是“数量”标签可见的原因。

编辑：

因此，您可以尝试将以下 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;
}

它应该可以工作并隐藏单个产品页面上的“数量”标签……

【讨论】：

好的，谢谢.. 那么我需要添加什么来隐藏它？谢谢！
嗨，我很抱歉。我完全错过了这个问题。我的结帐字段有一些我似乎无法修复的严重问题 :( 感谢您的回答。请使用此链接在此处查看问题 - 我只想隐藏“数量”标签 - flowersforeveryone.co.za/product/eternal-delight跨度>
@Michelle 我已经更新了我的答案……试试看，它应该隐藏这个“数量”标签……