Изменить Добавить в корзину текст при наведении

Question

Можно ли изменить кнопку Add to cart в Woocommerce на «Выбрать размер», например, если клиент еще не выбрал (обязательный) вариант.Затем измените его обратно на «добавить в корзину» после выбора опции?

Веб-сайт manolo blahnik имеет эту функцию, и я считаю, что это хороший UX для клиентов.На их веб-сайте первый этап - «Добавить в корзину».
Если кто-то наводит курсор на кнопку, но не выбрал свой вариант, отображается «Пожалуйста, выберите размер».
Но если кто-то выбралОпция остается «Добавить в корзину».

На мобильном устройстве, поскольку на ПК нет зависания, как на ПК, всегда отображается «Пожалуйста, выберите размер», пока не будет выбран вариант, затем оно меняется на «Добавить в корзину».

Мне интересно, возможно ли это сделать с помощью woocommerce.

Answer 1

Да, можно изменить текст при наведении курсора.Вы могли бы сделать что-то вроде этого;

#cart-btn {
  width: 200px;
  background: #000;
  color: #fff;
}
#cart-btn:after{
  content:'ADD TO BAG';
}
#cart-btn:hover:after{
  content:'PLEASE SELECT SIZE';
}

<button id="cart-btn" type="button"></button>

Answer 2

Вы можете использовать обработчики событий mouseover и mouseout для кнопки Add to cart.Следующий фрагмент кода демонстрирует функциональность.

При mouseover кнопки значения полей формы required проверяются, а кнопки text и title изменяются с помощью data-warnатрибут поля формы.

На mouseout кнопка text и title сбрасываются с использованием содержимого атрибута data-title на кнопке.

// handle to button
var addToCartBtn = document.getElementById('add-to-cart-button');
// 'mouseover' event handler
addToCartBtn.addEventListener('mouseover', function(event) {
  // get all form elements
  var inputs = this.form.elements;
  for (var i = 0; i < inputs.length; i++) {
    // find the first empty required field
    if (inputs[i].required && inputs[i].value == '') {
      // set the button's mouse over text
      event.target.title = inputs[i].dataset.warn;
      // set the button's text
      event.target.innerHTML = inputs[i].dataset.warn;
      break;
    }
  }
});
// 'mouseout' event handler
addToCartBtn.addEventListener('mouseout', function(event) {
  event.target.innerHTML = event.target.dataset.title;
  event.target.title = event.target.dataset.title;
});

 .form-field {
   margin: 20px;
 }
 
 #add-to-cart-button {
   font-size: 18px;
   width: 200px;
   height: 50px;
 }

<form action="#" name="add-to-cart-form">
  <div class="form-field">
    <label>
      <span>Select Size:</span>
      <select name="item-size" data-warn="Please choose a size" required>
        <option value="">Choose a size</option>
        <option value="s">Small</option>
        <option value="m">Medium</option>
        <option value="l">Large</option>
      </select>
    </label>
    </div>
    <div class="form-field">
    <label>
      <span>Select Colour:</span>
      <select name="item-colour" data-warn="Please choose a colour" required>
        <option value="">Choose a colour</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
      </select>
    </label>
    </div>
    <div class="form-field">
      <button type="submit" name="add-to-cart-button" id="add-to-cart-button" title="Add to Basket" data-title="Add to Cart">Add to Basket</button>
    </div>
  </form>

Answer 3

Это всего лишь часть CSS того, как вы можете получить результат

    .textSwap::before {
        content: "Add to Cart";
    }
    .textSwap:hover::before {
        content: "Please Select";
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
.textSwap
{
min-width:200px;
}
    .textSwap::before {
        content: "Add to Cart";
    }
    .textSwap:hover::before {
        content: "Please Select";
    }
    </style>
    <button type="button" class="btn btn-secondary btn-lg textSwap"></button>