Make Radio Button In-Line

Hi @eventaus,

to make radio field inline for event submission form, you need to add below css in your child theme css file :

#submit-event-form .wpem-form-group .field label {
    float: left;
    margin-right: .8rem;
}

I hope your your issue would be resolve.

Thank you.

Thank you, that works. However the description is also across inline, how can I make the description below the choices ?

Hi @eventaus,

You need to override template file called radio-field.php from wp-content\plugins\wp-event-manager\templates\form-fields to wp-content\themes\YOUR_CHILD_THEME\wp-event-manager\form-fields, then at your theme side file you need to override code with below :

<?php
/**
 * Radio Field. Example definition:
 *
 * 'test_radio' => array(
 * 		'label'    => __( 'Test Radio', 'wp-event-manager' ),
 * 		'type'     => 'radio',
 * 		'required' => false,
 * 		'default'  => 'option2',
 * 		'priority' => 1,
 * 		'options'  => array(
 * 			'option1' => 'This is option 1',
 * 		 	'option2' => 'This is option 2'
 * 		)
 * 	)
 */
$field['default'] = empty($field['default']) ? current(array_keys($field['options'])) : $field['default'];
$default          = !empty($field['value']) ? $field['value'] : $field['default'];

foreach ($field['options'] as $option_key => $value) : ?>
	<label>
		<input type="radio" name="<?php echo esc_attr(isset($field['name']) ? $field['name'] : $key); ?>" id="<?php echo esc_attr($key); ?>" attribute="<?php echo esc_attr(isset($field['attribute']) ? $field['attribute'] : ''); ?>" value="<?php echo esc_attr($option_key); ?>" <?php checked($default, $option_key); ?> /> 
		<div><?php _e(esc_html($value)); ?></div>
	</label>
<?php endforeach; 

if (!empty($field['description'])) : ?>
	<small class="description">
		<?php echo wp_kses_post($field['description']); ?>
	</small>
<?php endif; ?>

The description is also across inline, how can I make the description below the choices ?

• This reply was modified 1 year ago by eventaus.

Hey after putting that code in, the image is as below

• This reply was modified 1 year ago by eventaus.

Hi @eventaus,

Please share me screenshot that how you exactly want to show, so it would be easy to guide you.

Hi for example,

Pricing Plan

Option 1 Option 2

{DESCRIPTION HERE}

Thank you

Hi, Can I please get an update on this. Thank you

Hi @eventaus,

You need to override template file called radio-field.php from wp-content\plugins\wp-event-manager\templates\form-fields to wp-content\themes\YOUR_CHILD_THEME\wp-event-manager\form-fields, then at your theme side file you need to override code with below :

<?php
/**
 * Radio Field. Example definition:
 *
 * 'test_radio' => array(
 * 		'label'    => __( 'Test Radio', 'wp-event-manager' ),
 * 		'type'     => 'radio',
 * 		'required' => false,
 * 		'default'  => 'option2',
 * 		'priority' => 1,
 * 		'options'  => array(
 * 			'option1' => 'This is option 1',
 * 		 	'option2' => 'This is option 2'
 * 		)
 * 	)
 */
$field['default'] = empty($field['default']) ? current(array_keys($field['options'])) : $field['default'];
$default          = !empty($field['value']) ? $field['value'] : $field['default'];

foreach ($field['options'] as $option_key => $value) : ?>
	<label>
		<input type="radio" name="<?php echo esc_attr(isset($field['name']) ? $field['name'] : $key); ?>" id="<?php echo esc_attr($key); ?>" attribute="<?php echo esc_attr(isset($field['attribute']) ? $field['attribute'] : ''); ?>" value="<?php echo esc_attr($option_key); ?>" <?php checked($default, $option_key); ?> /> 
		<div><?php _e(esc_html($value)); ?></div>
	</label>
<?php endforeach; 

if (!empty($field['description'])) : ?>
	<div class="radio-description">	
		<small class="description">
			<?php echo wp_kses_post($field['description']); ?>
		</small>
	</div>
<?php endif; ?>

Also, you need to add below css in your child theme css file :

.radio-description{
    clear: both;
}

I hope this script will use to resolve your issue.