Stripe checkout fields are right-aligned in my theme.

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

  • Avatar: Zaua
    June 16, 2022 at 18:00


    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.
    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 17, 2022 at 06:58


    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;


    Avatar: Niddy
    June 18, 2022 at 16:26


    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 ->

    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 ->

    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.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    June 20, 2022 at 15:26


    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.


  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.