Проблема с флажком Woocommerce - PullRequest
       0

Проблема с флажком Woocommerce

0 голосов
/ 24 февраля 2019

На странице проверки 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...