Title: Woocommerce checkout edit css
Last modified: August 23, 2021

---

# Woocommerce checkout edit css

 *  Resolved [Saaann](https://wordpress.org/support/users/saaann28/)
 * (@saaann28)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/woocommerce-checkout-edit-css/)
 * 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](https://snipboard.io/6Fg0lM.jpg)

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

 *  Plugin Support [abwaita a11n](https://wordpress.org/support/users/abwaita/)
 * (@abwaita)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/woocommerce-checkout-edit-css/#post-14795511)
 * Hi [@saaann28](https://wordpress.org/support/users/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](https://wordpress.org/support/users/saaann28/)
 * (@saaann28)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/woocommerce-checkout-edit-css/#post-14795602)
 * 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.](https://wordpress.org/support/users/rainfallnixfig/)
 * (@rainfallnixfig)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/woocommerce-checkout-edit-css/#post-14797182)
 * 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](https://wordpress.org/support/users/saaann28/)
 * (@saaann28)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/woocommerce-checkout-edit-css/#post-14797737)
 * Thank you so much for your response and clarification.
 * This is the link: [https://pastebin.com/i4A2c3i1](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](https://wordpress.org/support/users/saaann28/).
 *  Plugin Support [abwaita a11n](https://wordpress.org/support/users/abwaita/)
 * (@abwaita)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/woocommerce-checkout-edit-css/#post-14798657)
 * Hi [@saaann28](https://wordpress.org/support/users/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](https://wordpress.org/support/users/saaann28/)
 * (@saaann28)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/woocommerce-checkout-edit-css/#post-14798802)
 * Now it works perfectly fine! After adding the css you have provided. Thank you
   so much for help.
 *  [MayKato](https://wordpress.org/support/users/maykato/)
 * (@maykato)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/woocommerce-checkout-edit-css/#post-14800314)
 * Hi [@saaann28](https://wordpress.org/support/users/saaann28/)
 * Glad to hear the CSS code [@abwaita](https://wordpress.org/support/users/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.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

 * 7 replies
 * 4 participants
 * Last reply from: [MayKato](https://wordpress.org/support/users/maykato/)
 * Last activity: [4 years, 8 months ago](https://wordpress.org/support/topic/woocommerce-checkout-edit-css/#post-14800314)
 * Status: resolved