CODEWITHSUNDEEP
phphtmlwordpresswoocommerceradio-button
Stijn Heymans
Stijn Heymans

Reputation: 23

Add a <br> html tag to WooCommerce checkout radio buttons form field options

Before the update of woocommerce:

   $args = array(
   'type' => 'radio',
   'class' => array( 'form-row-wide', 'update_totals_on_change' ),
   'options' => array(
      '0'   => 'Niet vandaag, misschien later (totally oké) <br />',
      '2'   => 'Drinkt iets van mij (€2) <br />',
      '3'   => 'Van mij krijgt ge een bio thee\'tje (€3) <br />',
      '5'   => 'Vier ze! Ik schenk je een Kombucha (€5)',
   ),
   'label_class' => 'labelafter',
   'default' => $chosen
   );
     
   echo '<div id="checkout-radio">';
   echo '<h3>Wil je mij virtueel trakteren?</h3>';
   woocommerce_form_field( 'radio_choice', $args, $chosen );
   echo '</div>';

My radio buttons showed up vertically aligned on my website checkout page

After the update The same code now shows the '<br />' (in the radio button option list on line 5) tag and does not convert the '<br />' tag to an actual line break.

I've got no clue why wordpress is suddently showing the tag iso converting it. Anyone got an idea?

Upvotes: 1

Views: 759

Answers (2)

LoicTheAztec
LoicTheAztec

Reputation: 254378

For custom checkout radio buttons fields, you can use woocommerce_form_field_radio composite hook to add a <br /> tag like:

add_action( 'woocommerce_form_field_radio', 'customize_form_field_radio', 20, 4 );
function customize_form_field_radio( $field, $key, $args, $value ) {
    if ( ! empty( $args['options'] ) && 'radio_choice' === $key && is_checkout() ) {
        $field = str_replace( '</label><input ', '</label><br /><input ', $field );
        $field = str_replace( '<label ', '<label style="display:inline;margin-left:8px;" ', $field );
    }
    return $field;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

Don't forget to remove all <br /> from your options array.

So the display will be:

enter image description here

Upvotes: 4

Chris Haas
Chris Haas

Reputation: 55457

Ideally you'd probably solve this in CSS instead, by just targeting them an applying a display:block on each field.

But otherwise you can apply a bit of hack. Instead of an HTML <br /> tag, use some string that you know will never exist in any radio button fields, and that is HTML-safe, and replace it in a filter with your <br />;

// Pick something you know won't exist
$lineBreakHack = '~!LINE-BREAK!~';

// Woo will call this hook for all radio buttons, not just yours, but that shouldn't be too much of a perf issue
add_filter(
    'woocommerce_form_field_radio',
    function($field, $key, $args, $value){
        return str_replace($lineBreakHack, '<br />', $field);
    }
);

// This is mostly the same except we're concatenating our special string
$args = array(
'type' => 'radio',
    'class' => array( 'form-row-wide', 'update_totals_on_change' ),
    'options' => array(
      '0'   => 'Niet vandaag, misschien later (totally oké)' . $lineBreakHack,
      '2'   => 'Drinkt iets van mij (€2) <br />' . $lineBreakHack,
      '3'   => 'Van mij krijgt ge een bio thee\'tje (€3)' . $lineBreakHack,
      '5'   => 'Vier ze! Ik schenk je een Kombucha (€5)',
    ),
    'label_class' => 'labelafter',
    'default' => $chosen
);

Upvotes: 1

Related Questions