Radio Buttons on Checkout Page in Sydney Pro

I need help with aligning radio buttons on my cart and checkout page. You can view the issue by going to itrusttechrepair.com, add an item to the cart and then view cart. I am using 2 plugin modules here (Advanced Shipping and Multistep checkout) but both developers are saying this is a theme issue. Any assistance would be appreciated.

Hello Bert,

Can you please provide a link to a product that can be added to cart?

Kind Regards, Roman.

Roman,
Go to http://itrusttechrepair.com and add any item to the cart. The radio buttons are in the Shipping selection which is both in the cart and on the checkout page. Currently we are down. Not sure if it is another DDOS on our provider like last Friday. Thanks.

Hello Bert,

Can you please provide some explanatory screenshots?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online services (Google Drive, Dropbox, etc.).

Kind Regards, Roman.

Can you send me an email address to info@itrusttechrepair.com and I will send them to you. I do not use online cloud services for security reasons.

Hello Bert,

Okay, you can use Media Library links.

You can send screenshots links here:
[hidden]
Please include a link to this topic.

Kind Regards, Roman.

Roman,
I don’t see any media links on this blog page so I created a page with the images. It is at http://itrusttechrepair.com/alignment-issues/
Thanks,
Bert

Hello Bert,

  1. Which product should I add to cart in order to see products under You may be interested in… title?

  2. I’m not sure what’s wrong with radio buttons. Can you please explain it more precisely?

  3. Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#terms {
    margin-top: 6px;
}

#terms + span {
    margin-left: 21px;
}

Kind Regards, Roman.

Roman,

Thanks for the CSS. It worked great to align the checkbox with Terms and Conditions text. The other issue are the radio buttons. I would like to aligned one on top of the other in a straight downward line instead of bouncing all over the place. Cart and Checkout page.

The other issue is the “Select Options” buttons on the cross-sell items in the cart. Anyway to change these buttons without changing the buttons on the entire site.

Add any repair to the cart (i.e. https://itrusttechrepair.com/store/cellular-phones/apple-iphone/iphone-touch-disease-repair/ ) and it will show the items.

Thanks,
Bert

Hello Bert,

Please try to add this CSS code:

ul#shipping_method {
    text-align: left;
}

#primary div.cross-sells ul.products li.product {
    width: 50% !important;
}

Kind Regards, Roman.

Roman,

Worked great. Aligned the radio buttons on both Cart and Checkout and moved the cross-sells items so they are not stacked upon each other.

Thanks,
Bert

You are welcome Bert! And have a nice day :slight_smile:

Kind Regards, Roman.

Bert, I checked your site once again and I could improve the CSS code even more because you added one more cross sell item to the product that you mentioned above.

Please use width: 48% !important; instead of width: 50% !important;

Also you can add this CSS code in order to fix cross sell mobile view:

@media only screen and (max-width: 450px) {
    #primary div.cross-sells ul.products li.product {
        width: 100% !important;
    }
}

Kind Regards, Roman.

Thanks, worked great.

You are welcome Bert! ?

Kind Regards, Roman.