Support » Fixing WordPress » Woocommerce Shipping Options Spacing

  • Resolved lusher09

    (@lusher09)


    Hello,

    Please could someone help me to fix the problem with spacing between the radio button and label in the shipping options area of the checkout/cart on Woocommerce?

    I’ve tried the following code in the custom CSS area with no success:

    .woocommerce-shipping-methods input[type=”radio”] {
    padding-right: 5px;
    vertical-align: middle;
    }

    Thanks in advance

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Forum Moderator & Support Team Rep

    Please provide a link to a page on your site where we can see this. Thanks. Note: Your link will be public and we will not later remove it.

    Thread Starter lusher09

    (@lusher09)

    Thanks for your reply Steven. The link to the cart/checkout page is:

    https://prettyglow.co.uk/cart/

    You may need to add something to the basket to be able to see the problem though.

    In addition to the problem with the spacing between the shipping option radio button and label, I also have a problem with the quantity boxes being mis-aligned on the same page. You can see this problem better with two different products in your basket.

    Any help with both problems would be appreciated.

    Thanks,
    Leon

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Forum Moderator & Support Team Rep

    I reduced the padding on the labels to get the stuff on the right on the same line:

    .eltdf-woocommerce-page.woocommerce-cart .cart-collaterals table th {
       padding-right: 1em;
    }

    adding a bit of space to the right of the radio button:

    .eltdf-woocommerce-page.woocommerce-cart .cart-collaterals tr.shipping li label {
        padding-left: 5px;
    }

    To add or override CSS: use the “Additional CSS” option in the customizer. https://wordpress.org/support/article/appearance-customize-screen/

    Learn to use the Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS.

    Thread Starter lusher09

    (@lusher09)

    Amazing Steven, thanks a lot that did the trick!

    Do you have any idea how to fix the spacing problems with the quantity box on the same page? I’m assuming this will be a padding issue too?

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Forum Moderator & Support Team Rep

    Probably. If you can’t figure it out, contact the developer of your theme.

    Thread Starter lusher09

    (@lusher09)

    Thanks Stephen, managed to figure it out using the links in your post regarding developer tools. Much appreciated!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Woocommerce Shipping Options Spacing’ is closed to new replies.