skip to Main Content

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?

2

Answers


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