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?
Solutions
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>
Similar questions
SQL Tables are listed vertically instead of horizontal on PhpMyAdmin
I am trying to move my WordPress website to a server on Godaddy. I have moved all the files and while trying to move the database, I couldn't see all the table data. Upon a closer look, I found that it is showing the data vertically instead of horizontal and without any scroll button. Please have a look at the image below for a clear understanding ...
How do I display four category posts that align next to each other? - Wordpress
I'm trying to pull the 4 most recent posts from category "3" to be displayed within a 1000px div, but have each single post display in a 280px div and have them displayed inline. Right now, my code pulls the recent posts, but only styles the one most recent post. Here is the current URL: http://dylanpolniak.com/clients/c&c/ Here is my code:
Wordpress posts won't display next to each other
I have been searching for a number of hours now and have tried to figure it out myself however I am having great difficulties resolving it. Basically, I have a wordpress loop in which I have, on my homepage, the post thumbnails displayed. They all appear vertically and I want it so that at least 3 images appear next to each other before starting a ...
How do I vertically center the rounded avatar to other elements in the row?
On this page I want to vertically center my rounded avatar to other elements in the row (fb / twitter buttons). Here's a snippet of code of the row: Thank you in advance and please let me know if I can make this question easier to understand, if needed.
How to disable remaining radio buttons if a specific radio button is checked?
I have the following bit of code generated by WooCommerce to display available shipping options: What I need to be able to do is disable radio buttons 2 and 3 if the first radio button is selected. I have tried this to no avail: Any help would be much appreciated! Thanks, Cynthia
Woocommerce custom checkout fields how to put them next to each other?
Hi guys I am making a custom form in woocommerce when checking out. I want to make my fields next to each other. How do I accomplish this? This is what I have now and it just places them under each other The way I add these fields might be important as well. I am presently doing this: