Return to previous page

Checkout page form alignment - by Enrico Dalli Pullicino

This topic has 5 replies, 3 voices, and was last updated 5 years, 6 months ago ago by Enrico Dalli Pullicino

Enrico Dalli Pullicino

Participant

June 13, 2020 at 22:41

Hello,
I am using the woocommerce pay with paypal feature and the STRIPE for WooCommerce plugin by Payment Plugins.

On the checkout form, the Pay with PayPal and Pay with Credit Card text is showing below the radio button selection. The text, including the credit card images and / or PayPal logo should be on the same line. The images should be aligned to the right and the text should be aligned to the left.
I would also like to remove the “What is PayPal?” hyperlink.

This works fine on the StoreFront theme. Would you kindly check?

Kindly review Private content area for more details.

#240717 Copied Theme version: 6.3.5 WooCommerce version: 4.2.0

4 Answers

Rose Tyler

Support staff

June 14, 2020 at 13:28

Hello,

Try to add the next code in Theme Options > Theme Custom CSS:

.order-review #payment .payment_methods label {
    width: auto;
}
.order-review #payment .payment_methods .about_paypal {
    display: none;
}

Regards

#240773 Copied

Enrico Dalli Pullicino

Participant

June 14, 2020 at 17:25

Some progress. Thanks for the input so far.
The remaining thing is to have ALL credit card images and PayPal aligned to the right of the line, whilst keeping the words “PayPal” and “Credit Cards” aligned to the left of the same line.

I have not managed to do this via CSS.

#240803 Copied

Olga Barlow

Participant

June 15, 2020 at 20:58

Hello,

Add the below code to fix the issue

#payment .payment_methods li.woocommerce-PaymentMethod>input[type=radio]:first-child, #payment .payment_methods li.wc_payment_method>input[type=radio]:first-child {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
#payment .payment_methods>.woocommerce-PaymentMethod>label:before, #payment .payment_methods>.wc_payment_method>label:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    line-height: inherit;
    vertical-align: baseline;
    content: "\f111";
    margin-right: .5407911001em;
    -webkit-transition: color,ease,.2s;
    transition: color,ease,.2s;
}
.star-rating span:before, .quantity .plus, .quantity .minus, p.stars a:hover:after, p.stars a:after, .star-rating span:before, #payment .payment_methods li input[type=radio]:first-child:checked+label:before {
    color: #dc3f3f;
}
#payment .payment_methods li.woocommerce-PaymentMethod>input[type=radio]:first-child:checked+label:before, #payment .payment_methods li.wc_payment_method>input[type=radio]:first-child:checked+label:before {
    content: "\f192";
}

Regards

#240892 Copied

Enrico Dalli Pullicino

Participant

June 16, 2020 at 22:06

Thank you! Consider as closed.

#241028 Copied