Question

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

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

在移动设备上，由于没有像PC那样的悬停，因此在选择该选项之前，它始终显示“请选择尺寸”，然后变为“添加到购物车”。

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

Answer 1

您可以在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 2

这只是获取结果的CSS部分

1    0.2   0.8    0.4    0.6
0.2   1    ...    ...    ...
0.8  ...    1     ...    ...
0.4  ...   ...     1     ...
0.6  ...   ...    ...     1

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

Answer 3

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

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

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

3 个答案: