Скрыть метку "Количество" в поле ввода количества в Woocommerce

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

Теперь, когда я это комментирую, количество возвращается, но с меткой "Количество", которой раньше никогда не было.

Почему это происходит внезапно и как я могу скрыть ярлык?

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 класс, чтобы скрыть это с помощью следующего правила 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;
}

Он должен работать и скрывать метку "Количество" на отдельных страницах товара…