Скрыть метку «Количество» в поле ввода количества в 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;
}

Это должно сработать и скрыть метку «Количество» на отдельных страницах продукта…