Help with radio buttons on checkout wrapping

How To
1

I’ve spent way too much time trying to get this working and I’m fairly confident the issue has two be right in front of me so I’m hoping someone can help me.

I’m trying to add custom fields to my checkout form and everything works except the radio buttons which keep wrapping.

Screenshot 2024-11-22 at 9.49.08 AM
Screenshot 2024-11-22 at 9.49.08 AM1492×1026 47.1 KB

Background

WP: 6.7.1
Bricks: 1.11.1

My code

I’ve added this to my functions.php:

function gift_checkout_field( $checkout ) {

    echo '<div id="gift_checkout_field"><h2>' . esc_html__( 'Gift information' ) . '</h2>';

	woocommerce_form_field(
			'is_gift',
			array(
				'type'        => 'radio',
				'class'       => array( 'my-field-class form-row-wide' ),
				'label'       => __( 'Is this a gift order?' ),
				'options' => array(
					'' => 'No',
					'1' => 'Yes, this is a gift'
				),
				'style' => 'width:16px', 
			),

			$checkout->get_value( 'is_gift' )
	);

	woocommerce_form_field(
			'gift_wrap',
			array(
				'type'        => 'radio',
				'class'       => array( 'my-field-class form-row-wide' ),
				'label'       => __( 'Gift wrap' ),
				'options' => array(
					'' => 'No',
					'1' => 'Yes, basic gift wrap'
				),
				'style' => 'width:16px', 
			),
			$checkout->get_value( 'gift_wrap' )
	);

	woocommerce_form_field(
			'gift_name',
			array(
				'type'        => 'text',
				'class'       => array( 'my-field-class form-row-wide' ),
				'label'       => __( 'Recipient name' ),
				'placeholder' => __( 'Who is the gift for...' )
			),
			$checkout->get_value( 'gift_name' )
	);

	woocommerce_form_field(
			'gift_message',
			array(
				'type'        => 'textarea',
				'class'       => array( 'my-field-class form-row-wide' ),
				'label'       => __( 'Gift message' ),
				'placeholder' => __( 'Enter a message to the recipient...' )
			),
			$checkout->get_value( 'gift_message' )
	);
	echo '</div>';
}

This is the CSS code that came with the Brixies layout.

/* -- The root styles must go in the element of the structure with the name "Checkout"(Section). --*/

.woocheckout {
  /* Form details */
  .woocheckout__form-details {
    h3 {
      margin-bottom: var(--space-s);
    }

    /* Checkout form  styles*/
    .form-row {
      margin-bottom: var(--space-s);
    }

    #ship-to-different-address label{
      width: 100%;
      padding-inline-end: var(--space-m);
    }

    .checkbox{
      border: none;
    }

    /* Inputs styles */
    .input,
    input:not([type=submit]),
      select,
      textarea {
        border: 1px solid var(--dark-20);
        border-radius: var(--radius-xs);
        padding: var(--space-xs);

        &:focus {
          border-color: var(--dark);
        }
    }

    /* 2 column field styles */
    .form-row-first,
    .form-row-last {
      width: calc(50% - var(--space-m)/2);

      @media (max-width: 991px) {
        width: 100%;
      }
    }
  }

  /* Default values of woocommerce fields */
  .form-row-first{
    float:left;
  }

  .form-row-last{
    float:right;
  }

  .form-row-wide{
    clear:both;
  }

  /* Select2 field styles (Region / Département) */
  .select2-container--default .select2-selection--single{
    border: 1px solid var(--dark-20);
    border-radius: var(--radius-xs);
    padding: var(--space-xs);
    height:auto;
  }

  /* Select2 field arrow styles */
  .select2-container--default .select2-selection--single
  .select2-selection__arrow{
    top:50%;
  }
  
  }
  
  .free-shipping { 
  row-gap: var(--space-3xs);
  }

  /* Checkout order details*/
  .woocheckout__order-review {
    #order_review, thead, tfoot{
      border: none;
    }

    /* Review order table styles */
    .woocommerce-checkout-review-order-table{
      background-color: var(--dark-10);
      border-radius: var(--radius-m);
      border: none;

      .cart-subtotal{
        border-bottom: 1px solid var(--dark-10);
      }

      /* Table heading styles */
      thead th{
        padding: var(--space-m) var(--space-m) var(--space-xs) var(--space-m);
      }

      /* Table body styles */
      tbody td{
        padding: var(--space-xs) var(--space-m);
      }

      /* Table footer (total price) styles */
      tfoot :is(td, th){
        padding: var(--space-m);
      }
    }

    /* Checkout payment styles */
    .woocommerce-checkout-payment{
      border-radius: var(--radius-m);

      .payment_box {
        border-radius: var(--radius-s);
      }
    }

    /*- Terms and conditions style -*/
    .woocommerce-form__label-for-checkbox{
      font-size: var(--text-s);
      margin-top: var(--space-s);
      font-weight: 600;
      color: var(--dark);
      display: block;
      border: none;
      width: 100%;
      height: auto;
    }
  }
}

Please and thank you!!

2

Your site seems to be offline. would help if I could check it out. But seems to be a CSS related problem.

1 Like
3

Hey! Sorry, I switched to my actual domain. It’s currently behind a Username/Password, so feel I’ve messaged you credentials. Thank you!

https://wildlingstoy.scom/checkout/

1 Like
4

So these lines of code by core_framework seem to create the issue (especially the fixed sizes):

.radio {
  appearance: none;
  display: grid;
  place-content: center;
  border: 2px solid var(--dark-40);
  border-radius: var(--radius-full);
  width: clamp(1.8rem,calc(0.37vw + 1.68rem),2.2rem); // fixed width
  height: clamp(1.8rem,calc(0.37vw + 1.68rem),2.2rem); // fixed height
}

These stylings are used to create the custom radio buttons, but it is not working for your setup.

I’d suggest you do something like this, and from there on out you can maybe recreate the cusom radio buttons if you need them:

#gift_checkout_field .radio {
	margin-bottom: unset;
	height: auto;
	width: auto;
	display: unset;
	border: unset;
	border-radius: unset;
}

.woocommerce-input-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

#gift_checkout_field {
	accent-color: var(--primary);
}

Cheers Suat

1 Like
5

You are my hero. Thank you!

1 Like