从Woocommerce量输入字段隐藏“数量”标签

问题描述 投票:0回答:1

我只是用了一段代码中我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 );

现在,当我注释掉,数量回来,但与“量”的标签,它从未有过的。

为什么会出现这种突然发生,我怎么隐藏标签?

enter image description here

html css wordpress woocommerce product-quantity
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;
}

它应该工作,并隐藏在单一产品页面的“数量”的标签?

© www.soinside.com 2019 - 2024. All rights reserved.