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

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?

Tags:

2

Answers


  1. 0

    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
);
    Login or Signup to reply.
  2. 0

    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

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

Back To Top
Search