在悬停时更改添加到购物车文本答案

【问题标题】：Change Add to Cart text on hover在悬停时更改添加到购物车文本
【发布时间】：2019-02-18 01:47:38
【问题描述】：

是否可以将 Woocommerce 中的 Add to cart 按钮更改为“选择尺寸”，例如，如果客户尚未选择（必需）选项。然后，一旦选择该选项，将其改回“添加到购物车”？

manolo blahnik 的网站有这个功能，我发现它对客户来说是一个很好的用户体验。在他们的网站上，第一阶段是“加入购物车”。
如果有人将鼠标悬停在按钮上，但尚未选择他们的选项，则会显示“请选择尺寸”。
但如果有人选择了一个选项，它会保留为“添加到购物车”。

在移动设备上，由于没有像在电脑上那样悬停，它总是显示“请选择尺寸”，直到选择该选项，然后它变为“添加到购物车”。

我想知道 woocommerce 是否可以做到这一点。

【问题讨论】：

当然，有可能。您可以使用 JS 在按钮上添加“悬停”事件并执行您想要的操作。

标签： javascript php woocommerce

【解决方案1】：

您可以在Add to cart 按钮上使用mouseover 和mouseout 事件处理程序。以下代码 sn -p 演示了该功能。

在按钮的mouseover 上，检查required 表单字段的值，并使用表单字段的data-warn 属性修改按钮text 和title。

在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>

【讨论】：

【解决方案2】：

是的，可以在悬停时更改文本。你可以这样做；

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

&lt;button id="cart-btn" type="button"&gt;&lt;/button&gt;

【讨论】：

感谢您的反馈。但是，如果客户选择了某些东西怎么办？然后它应该留在“添加到购物车”，因为他们做出了决定

【解决方案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>

【讨论】：