Woocommerce checkout edit css

  • Resolved Saaann

    (@saaann28)


    4 years, 8 months ago

    Hello, I’m currently using a woocommerce theme. Under checkout page, at first, it was working perfectly fine, however, I’m not sure what causes the problem that my checkout page padding does not look good where you may refer to the screenshot. I’m inspecting the padding field, and the width is too narrow for my billing and shipping field. May I know where can I directly edit the width for billing and shipping field? at the same time the changes will work fine for mobile too. If I try to edit the page, it shows only a woocommerce shortcode for checkout. So I really don’t know where can I edit the padding. I’m not familiar with code somehow, but I’ll try to make it work.

    Hopefully team could help me to solve this issue.
    Thank you.

    https://snipboard.io/6Fg0lM.jpg

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support abwaita a11n

    (@abwaita)

    4 years, 8 months ago

    Hi @saaann28,

    May I know where can I directly edit the width for billing and shipping field?

    You can add your CSS code targeting these fields through the Customizer → Additional CSS box.

    We’d also be happy to take a look if you could share with us a link to the site.

    Hope this helps, we’ll be happy to be of further assistance.
    Many thanks.

    Thread Starter Saaann

    (@saaann28)

    4 years, 8 months ago

    Okay sure, but can I send the link privately? since this is my client’s website, and I think preferably I can send you the link privately, then we could share the solution at this thread? Is that okay?

    Mirko P.

    (@rainfallnixfig)

    4 years, 8 months ago

    Hi there,

    When a question relates to a specific site or page, and the site is publicly viewable, a link to the site makes things faster to solve.

    This will allow not only WooCommerce plugin support team but also other users on the forum to check the issue and often leads to faster resolutions.

    We do not offer private support as this forum is public. You could use Pastebin.com to share your link and set an expiration date, so you will know that the shared link will be removed from Pastebin server once it reaches the expiry date.

    Thanks.

    Thread Starter Saaann

    (@saaann28)

    4 years, 8 months ago

    Thank you so much for your response and clarification.

    This is the link: https://pastebin.com/i4A2c3i1
    You may add a cart first then proceed to checkoutt and able to see the billing and shipping field is too narrow.

    • This reply was modified 4 years, 8 months ago by Saaann.
    Plugin Support abwaita a11n

    (@abwaita)

    4 years, 8 months ago

    Hi @saaann28,

    Kindly try adding the following in your Customizer → Additional CSS box:

    .col-1, .col-2 {
    max-width: 100% !important;
}

    Let us know how it goes.
    Thanks.

    Thread Starter Saaann

    (@saaann28)

    4 years, 8 months ago

    Now it works perfectly fine! After adding the css you have provided. Thank you so much for help.

    MayKato

    (@maykato)

    4 years, 8 months ago

    Hi @saaann28

    Glad to hear the CSS code @abwaita provided works. I’m marking this thread as resolved now. If you have any further questions, please feel free to open a new topic.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Woocommerce checkout edit css’ is closed to new replies.