Docs

[marcooos]

Hey, how do I style these payment options (and the “place order” button) so that they are aligned horizontally instead of being all bunched up?

[marcooos]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.woocommerce-checkout .checkout .payment_methods .payment_method_paypal label img {
	max-width: 300px;
	margin-top: -35px;
}

Hope this helps.

Cheers!

[marcooos]

Hey, thanks but I don’t think I explained it properly, this is what I want:

[Paul R]

Hi,

To achieve that, you can add this under Custom > Edit Global CSS in the Customizer.

.woocommerce-checkout form .payment_methods li {
    display: block;
    margin-bottom: 2.15em;
    float: none;
    width: 100%;
    overflow: hidden;
}

Hope that helps.

[marcooos]

Awesome thanks Paul!

Can you also tell me how to change the alignment of the checkbox and payment description?:

[Rupok]

Hi there,

Would you explain how do you want to align them?

Thanks!

[marcooos]

Can you see the image I attached? 🙂

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.woocommerce-checkout .form-row.form-row-wide.woocommerce-validated {
   clear:both;
}

.woocommerce-checkout .form-row.form-row-wide.woocommerce-validated .checkbox input[type="checkbox"] {
    top: -2px;
}

Hope that helps.

[marcooos]

Hi Paul, I’ve added the code but it doesn’t seem to have done anything at all

[Paul R]

Hi,

I went ahead and fix it by changing the code to this.

.woocommerce-checkout  #s4wc_save_card_field,
.woocommerce-checkout .form-row.woocommerce-validated {
   clear:both;
   float:none;
}

.woocommerce-checkout  #s4wc_save_card_field .checkbox input[type="checkbox"],
.woocommerce-checkout .form-row.woocommerce-validated .checkbox input[type="checkbox"] {
    top: -2px;
}

Kindly check in your end.

[marcooos]

Looks great, thanks Paul!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts