Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Add an id or class to the label element of a radio button for wordpress – Woocommerce

In the checkout page I want to add separate images instead of each radio button. I found how to do this here.

The problem here is that I cannot add a separate ID or class to the label element and it seems that is required to replace the radio buttons with an actual image. Below what I got so far. I cannot target the labels specifically as shown on the GitHub thread.

Does anyone have an idea how to add a class using PHP or JavaScript maybe? Or any other way for that matter.

Thanks in advance!

Here the HTML:

<span class="woocommerce-input-wrapper">

    <input type="radio" class="input-radio " value="Banana" name="radioButtonForm" id="radioButton1">
    <label for="radioButton1" class="radio ">Banana</label>
    
    <input type="radio" class="input-radio " value="Apple" name="radioButtonForm" id="radioButton2">
    <label for="radioButton2" class="radio ">Apple</label>
    
    <input type="radio" class="input-radio " value="Pear" name="radioButtonForm" id="radioButton3">
    <label for="radioButton3" class="radio ">Pear</label>
    
    <input type="radio" class="input-radio " value="Tomato" name="radioButtonForm" id="radioButton4">
    <label for="radioButton4" class="radio ">Tomato</label>
    
</span>

And here the CSS:

.woocommerce-input-wrapper input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}


#radioButton1 .radio{
    background-image:url(http://i.imgur.com/SJbRQF7.png);
}

#radioButton2 .radio{
    background-image:url(http://i.imgur.com/lXzJ1eB.png);
}

#radioButton3 .radio{
    background-image:url(http://i.imgur.com/SJbRQF7.png);
}

#radioButton4 .radio{
    background-image:url(http://i.imgur.com/lXzJ1eB.png);
}
Tags:

2

Answers


  1. 0

    We can use preg_replace to target our labels tag and add our classes.

    <?php
add_action( 'wp_loaded', function() {
  function wp_custom_radio_add_class( $subject ) {
    if( ! is_admin() && is_checkout() || is_page( 'checkout' ) ) {
      $search = [
        '/<label for="radioButton1" class="radio ">/',
        '/<label for="radioButton2" class="radio ">/',
        '/<label for="radioButton3" class="radio ">/',
        '/<label for="radioButton4" class="radio ">/',
        // ... etc.
      ];
      $replace = [
        '<label for="radioButton1" class="radio label_custom_class_1">',
        '<label for="radioButton2" class="radio label_custom_class_2">',
        '<label for="radioButton3" class="radio label_custom_class_3">',
        '<label for="radioButton4" class="radio label_custom_class_4">',
        // ... etc.
      ];
      $subject = preg_replace( $search, $replace, $subject );
      return $subject;
    };
  };
  ob_start( 'wp_custom_radio_add_class' );
} ); ?>
    Login or Signup to reply.
  2. 0

    If I understood your problem correctly, you don’t needd to necessarily add custom ids or classes to your markup. Switching your CSS selectors to use the + -sibling selector should suffice. I made a JSFiddle to demonstrate this kind of solution:

    https://jsfiddle.net/6rsf79xz/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search