Formatting WooCommerce Checkout Page

On my Checkout page on WooCommerce staging site http://hugabub.launchcafe.net/, I am having an issue with alignment/formatting under “Your Order >> Shipping”. I have installed plugin FedEx WooCommerce Shipping Basic to calculate shipping costs. As you can see here http://screencast.com/t/2EqIUDgcqtm the radio buttons are overlapping with the FedEx rate text (on desktop only. The alignment seems fine on mobile). I use this plugin on other sites and have not seen this issue. According to the plugin author, this is not an issue with the plugin, but with the theme formatting. Any idea how to get this to align properly on both desktop and mobile?

Hello @pNeoOrg,

Looks like you selected drop-down instead of radio buttons.

If you still need help regarding this issue, then you can select radio buttons and let me know here.

Kind Regards, Roman.

Hi Roman - thank you for the response. I’m actually OK with the drop-down option. I have encountered another issue though. On mobile, some of the fields on Checkout are not constrained to the margin and bleed over, creating a strange look to the page. I have encountered this on Android and iOS. You can also replicate the issue by shrinking your desktop browser as seen here http://screencast.com/t/aq29E3aZKI

Any idea how this issue can be resolved?

Thanks so much, and I love your themes.

Hello @pNeoOrg,

Please try to use this CSS code to fix that issue:

.shipping .shipping_method {
    width: 100%;
}

.form-row.woocommerce-validated .input-text {
    width: 100% !important;
    max-width: 400px;
}

You can add CSS code to style.css file of your child theme, also you can use Simple Custom CSS or similar plugin for adding CSS code.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman and thank you for your reply. I tried the custom CSS you suggested, putting it in both the style.css directly, and then tried separately with the CSS plugin. It had no effect on the issue I described above. I also noticed that on the checkout page, when you choose the Credit Card option (this is powered by the Striper plugin), the area where you enter your credit card number also bleeds over well past the margin.

Okay @pNeoOrg,

The second part of my code had to fix credit card field (but please use improved version below).

I tested the code once again and found an issue in second part, however, first part had to work.

Please try to clear your cache after applying the CSS code below:

.shipping .shipping_method {
    width: 100%;
}

.form-row .input-text {
    width: 100% !important;
    max-width: 400px;
}

I hope that it will help you.

Kind Regards, Roman.

Thanks Roman! This fixed this issue perfectly on the Checkout page with the credit card field. However, I am still having the issue on the Cart page on Android using Chrome. The cart page looks good when shrinking the browser on desktop. But still spills over on mobile. Is there anything else you can think of? I really appreciate all of your help!

Well, I don’t see that code for credit card field is applied, can you please check it?

You can fix radio buttons with the following CSS code:

#shipping_method label {
    text-indent: 0px !important;
}

Kind Regards, Roman.