CODEWITHSUNDEEP
javascriptphpwoocommerce
p_e_88
p_e_88

Reputation: 1037

Change Add to Cart text on hover

Is it possible to change the Add to cart button in Woocommerce to "Select size", for example, if a customer has yet to choose an (required) option. Then, change it back to "add to cart" once the option is selected?

The Website of manolo blahnik has this feature, and I find it's a good UX for customers. On their website, the first stage is "Add to cart".
If someone hovers over the button, but hasn't chosen their option, it displays "Please select a size".
But if someone has choosen an option, it stays as "Add to cart".

On Mobile, because there is no hover like on pc, it always shows "Please select a size" until the option is chosen, then it changes to "Add to cart".

I'm wondering if it is possible to do this with woocommerce.

Example

Upvotes: 0

Views: 986

Answers (3)

Dan Nagle
Dan Nagle

Reputation: 5425

You can use mouseover and mouseout event handlers on the Add to cart button. The following code snippet demonstrates the functionality.

On mouseover of the button, the values of the required form fields are checked and the button text and title are amended using the data-warn attribute of the form field.

On mouseout the button text and title are reset using the content of the data-title attribute on the button.

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

Upvotes: 1

Manu Joseph
Manu Joseph

Reputation: 81

This is just the CSS part of how you can get the result 

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

Upvotes: 0

Dennis Wanjiru
Dennis Wanjiru

Reputation: 96

Yes, it is possible to change the text on hover. You could do something like this;

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

Upvotes: 0

Related Questions