CODEWITHSUNDEEP
jquerywordpresscheckboxwoocommerce
Alcalt
Alcalt

Reputation: 73

Change the "Ship to a different Address" Checkbox to a String

I am currently using woocommerce and I would like to know if it is possible to change a checkbox to a kind of string (anchor with spam, label,..).

The page I'm trying to modify is the checkout page. Bellow the billing details the client can click on a checkbox and place a different address. When checked a other field form show bellow the checkbox.

What I want to do is to remove the checkbox and replace it with a string with the same purpose.

Someone have an idea how I could do this?

Code:

<h2 id="ship-to-different-address">
  <label for="ship-to-different-address-checkbox" class="checkbox"><?php _e( 'Ship to a different address?', 'woocommerce' ); ?></label>
  <input id="ship-to-different-address-checkbox" class="input-checkbox" type="checkbox" name="ship_to_different_address" value="1"/>
</h2>

Upvotes: 0

Views: 2812

Answers (1)

Ted
Ted

Reputation: 14927

I'll offer up a solution that uses only CSS, and a slight re-ordering of your HTML elements. Run the snippet to see it work.

Essentially what is happening, is the <label> is styled like a button, the checkbox is hidden off-screen, and its :checked state is used for styling the active state of the label.

/*hide the checkbox*/
.checkbox-button .input-checkbox:not(:checked),
.checkbox-button .input-checkbox:checked {
  position: absolute;
  left: -9999px;
}
/*style the label like a button */
.checkbox-button .input-checkbox + label {
  font-family: Ariel, sans-serif;
  cursor: pointer;
  font-size: 14px;
  font-weight: normal;
  padding: 6px 10px;
  background: #efefef;
  border: 1px solid #cccccc;
  border-radius: 4px;
}
/* style the label/button active state*/
/* (only applied when the checkbox is 'checked' */
.checkbox-button .input-checkbox:checked + label {
  background: #656565;
  color: #ffffff;
  border: 1px solid #888888;
}
<h2 id="ship-to-different-address" class="checkbox-button">
    <input id="ship-to-different-address-checkbox" class="input-checkbox" type="checkbox" name="ship_to_different_address" value="1"/>
    <label for="ship-to-different-address-checkbox" class="checkbox">
      Ship to a different address?
    </label>
</h2>

Upvotes: 1

Related Questions