Return to previous page

Stripe checkout fields are right-aligned in my theme.

This topic has 4 replies, 4 voices, and was last updated 2 years, 8 months ago ago by Olga Barlow

Zaua

Participant

June 16, 2022 at 18:00

Hello,

I’ve integrated stripe with my theme but the checkout layout is not showing properly, the fields and the descriptions of these fields are right-aligned and it should be left, please advise how I can solve this and make the alignment from left to right to give proper and best checkout experience for users.

Please, contact administrator
for this information.

#326172 Copied Theme version: 1.0 WooCommerce version: 6.6

3 Answers
Rose Tyler

Support staff

June 17, 2022 at 06:58
Hello,

Thanks for using our theme.
Add the next code in Theme Options > Theme custom CSS:

.woocommerce-checkout .wc-credit-card-form label { text-align: start; width: 100% !important; }

Regards
#326180 Copied
Niddy

Participant

June 18, 2022 at 16:26

@zaua

I’m not 8theme support but have spent days on Stripe so just wanted to wish you good luck with the Stripe layout!

It comes messy if you use the Woocommerce Stripe Plugin (remember the cards are no longer visible) so you need to add functions to child theme etc to get it right.

You have the main checkout page to tidy-up / customise – here is the one we have just done for our client -> https://i.ibb.co/9wbQrty/str-chk.png

Then you have to sort the My Account -> Payment Methods -> Add New Card layout which means using a lot of ::before / ::after pseudo-elements to get it right without editing templates – here is our completed layout on the add new card page -> https://i.ibb.co/KbJVC39/str-act.png

Just replying cos I found very little help out there and I ended up writing loads of functions and recreating the layout using css overrides to get it to look right!

Good luck, if you need help to get the cards to show then give me a shout and I’ll post the function for you.

#326288 Copied

Olga Barlow

Participant

June 20, 2022 at 15:26

Hello,

Thank you for your help. You may post your working workaround here and other people who look for that just will be able to copy/past that.

Regards

#326374 Copied
Tagged: checkout, fields, right-aligned, stripe, templates, woocommerce, wordpress
Viewing 4 results - 1 through 4 (of 4 total)