Search code examples
csswordpresswoocommercehtml-tableproduct

How to reduce the space between attribute dropdowns in WooCommerce product page

The space between attribute dropdowns is big, also the space between the dropdown and the add to cart button is big too, how could I reduce the space? please see the image and the link link

enter image description here

The following didn't work:

.single-product div.product table.variations tr .value {
    margin-bottom: .5em; /* Reduced space on all dropdowns except last one */
}
.single-product div.product table.variations tr:last-child .value {
    margin-bottom: 1em; /* Normal space on last dropdown */
}
Solution

  • Add this to the end of your stylesheet:

    .variations tr, .variations td, .variations th{
    margin: 0 !important;
    padding: 0 !important
}

    to override to style(s) above it.