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
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 />
;For custom checkout radio buttons fields, you can use
woocommerce_form_field_radio
composite hook to add a<br />
tag like: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: