Viewing 13 replies - 1 through 13 (of 13 total)
  • Markup can vary between themes. Please post the url to your site.

    Thread Starter Laurendo

    (@laurendo)

    Try this in your custom css:

    .woocommerce form .form-row,
    .woocommerce-page form .form-row {
      margin: 5px 0px;
    }

    If your theme does not have a setting where you can enter custom css, you can use a plugin like this one:
    https://www.ads-software.com/plugins/simple-custom-css/

    Thread Starter Laurendo

    (@laurendo)

    css worked just fine. Thank you

    How do I increase the space – some of the fields are overlapping. Is there a file that controls the spacing?

    @dsketch
    Various *.css files control the spacing. Code can vary between themes. Please post the url to your site.

    url is LockKARO.in. For check out page – if you click on “click here to enter your code” then you will see “Billing Details” sandwiched between two fields. If you go down further below you will see “Create an account by entering….” sandwiched again. The tick box against ‘Ship to a different address’ is also misplaced. Thanks.

    @dsketch
    Try this custom css:

    
    .woocommerce-checkout h3 {
      padding-top:20px;
      padding-bottom:20px
    }
    .woocommerce-checkout .create-account {
      clear:both;
      padding-top:30px;
      padding-bottom:16px
    }
    .woocommerce-checkout .woocommerce-shipping-fields h3 label {
      display:inline-block;
      margin-right:14px;
    }
    .woocommerce-checkout .woocommerce-shipping-fields h3 input {
      width:20px;
      height:20px;
      vertical-align:middle
    }
    

    Hi, thanks. Where do I add this – functions.php? Where do we add custom css usually?

    I hope I don’t have to add another plugin to include this custom css.

    Not functions.php. Some themes will have a theme setting for this. It may be called Custom CSS or Advanced styling or similar. If your theme does not have a setting where you can enter custom css, you can use a plugin like this one:
    https://www.ads-software.com/plugins/simple-custom-css/
    This is a friendly plugin!

    I updated the style.css of theme. The check-out was the same. I’ll get the plugin and let you know if it works.

    Yes, worked. Thank you.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘How to edit vertical space between fields at checkout forms’ is closed to new replies.