0

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

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

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

在此处输入图像描述

4

1 回答 1

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;
}

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

于 2019-02-04T15:23:15.863 回答