Aligning checkboxes, radio buttons in Woocommerce

Using Woocommerce with Sydney Pro and having an issue with checkboxes and radio buttons not properly aligning in the the Woocommerce cart and checkout pages.

See pictures.



Hello there,

Which version of Sydney Pro are you running? Please provide us a link to your site here, so we can take a look.

Regards,
Kharis
aThemes Support

V. 2.0.18

cryztalclear.com/shop

temp. password ‚ÄúSydney‚ÄĚ

Thank you for sharing the link.

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .woocommerce input.input-checkbox {
    	 height: auto;
    }

Regards,
Kharis
aThemes Support

Thanks for your support - it has corrected the checkbox position (see picture below) but not the radio buttons that are still misplaced relative to the line of text.

Hello there,

Try this CSS code and relpace the previous code:

    .woocommerce input.input-radio,
    .woocommerce input.input-checkbox{
        height: auto;
    }

Regards,
Kharis
aThemes Support

Thanks again - some mixed results:

Checkbox all good.
Radio buttons align in the ‚Äúpayment box‚ÄĚ in Firefox and Chrome - Safari not good.
Radio buttons in Basket Total and Your order (under shipping selection) still messy in all browsers.



Hello there,

Try this CSS code and replace the previous one:

    ul.wc_payment_methods li:after {
      display: block;
      content: '';
      clear: both;
    }

    .woocommerce input.input-radio, 
    .woocommerce input.input-checkbox {
      height: 34px;
      display: inline-block;
      float: left;
    }

Regards,
Kharis
aThemes Support

Thx again - this one messes up the checkbox alignment again so I combined the first one you sent that worked on the checkbox with the last one (just excluding the input-checkbox) Likely not correct but it works better (radio button still not perfect but okay). However it does not seem to affect the radio buttons for shipping method in the ‚Äúbasket totals‚ÄĚ and ‚ÄúYour order‚ÄĚ on the checkout page. (btw - is there a reason why Basket totals is cramped together in the right side of the page - might this be affecting it? Even though on the checkout page this is not the case.)

And here the combination:

    .woocommerce input.input-checkbox {
    	 height: auto;
    }

    ul.wc_payment_methods li:after {
      display: block;
      content: '';
      clear: both;
    }

    .woocommerce input.input-radio 
     {
      height: 34px;
      display: inline-block;
      float: left;
    }

Hello there,

Which version of WooCommerce are you running? Is it the latest one?

Regards,
Kharis
aThemes Support

Yes it is the latest one.

thx.

Any other solutions suggested? Thanks in advance.

a bit off topic, you should check out the ‚ÄúWC Hide Shipping Methods‚ÄĚ plugin :wink:

:slight_smile: think I will stick to finding the solution. Clearly it is a theme error in combination with WooCommerce so I guess it will be important for other users of Sydney Pro as well.

my comment was not related to the issue you are highlighting :wink:

Hello there,

My apologies for the delay in reply.

We have been adding this to the list of bugs to address and it will be permanently fixed in the upcoming future updates.

Please be patience.

Regards,
Kharis
aThemes Support

Many thanks - will wait for that. Thx.

1 Like

Any updates on when those alignment bugs will be corrected?

Thx.

Hello there,

Thank you for getting back to us.

I am checking this with our development team. And I will keep you updated.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support