CODEWITHSUNDEEP
phphtmlcsswordpresswoocommerce
Dravis800
Dravis800

Reputation: 93

How do I make this woocommerce radio checkbox to display horizontally next to each other instead of vertically?

This radio checkbox

add_action( 'woocommerce_review_order_before_payment', 'display_extra_fields_after_billing_address' , 10, 1 );
function display_extra_fields_after_billing_address () { 
    ?>
    <p><input type="radio" name="delivery_option" value="29 x 1" required />29 x 1</p>
    <p><input type="radio" name="delivery_option" value="27 x 2" />27 x 2</p>
    <p><input type="radio" name="delivery_option" value="25 x 3" />25 x 3</p>

<?php
}

What can I add in functions.php or in the custom CSS of the element to make them adjacent horizontally instead of vertically?

Upvotes: 1

Views: 105

Answers (1)

Nero
Nero

Reputation: 265

 You can use css `display: inline or display: inline-block` :
 <p style="display:inline-block"><input type="radio" name="delivery_option" value="29 x 1" required />29 x 1</p>
 <p style="display:inline-block"><input type="radio" name="delivery_option" value="27 x 2" />27 x 2</p>
 <p style="display:inline-block"><input type="radio" name="delivery_option" value="25 x 3" />25 x 3</p>

Upvotes: 1

Related Questions