На странице проверки WC по умолчанию есть флажок для другого адреса доставки.Когда флажок установлен, появляется форма, когда исчезает флажок.
Мне нужно преобразовать этот флажок в 2 переключателя.По умолчанию первая кнопка-переключатель отмечена, а форма скрыта, когда я нажимаю, появляется вторая форма кнопки-переключателя ... при повторном нажатии первая форма радио исчезает.
Как я могу это сделать?
Я пытался редактировать код внутри form-shipping.php, но не могу заставить его работать.
Я тожесоздал 2 переключателя, как это:
<div class="radios">
<div class="form-group">
<input class="custom-radio" type="radio" id="radio_1" name="my-radio" value="1" checked>
<label for="radio_1"><span></span> My shipping and billing address are the same.</label>
</div>
<div class="form-group">
<input class="custom-radio" type="radio" id="radio_2" name="my-radio" value="1">
<label for="radio_2"><span></span> My shipping and billing address are different.</label>
</div>
</div>
Код CSS:
.radios {
border: 1px solid #ddd;
padding: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
margin-bottom: 20px;
}
.radios .custom-radio {
display: none;
}
.radios .custom-radio + label {
font-weight: normal;
cursor: pointer;
}
.radios .custom-radio + label span {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
width: 18px;
height: 18px;
cursor: pointer;
border-radius: 50%;
position: relative;
border: 1px solid #ddd;
}
.radios .custom-radio + label span::before {
content: "";
opacity: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
transform: translate(-50%, -50%);
transition: opacity 0.2s;
}
.radios .custom-radio:checked + label span::before {
opacity: 1;
}
.radios .custom-radio:disabled + label {
opacity: 0.5;
}
.radios .custom-radio:checked + label span {
background: #a2674c;
border: 1px solid #a2674c;
}