Question 334052 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – 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 */
}
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    To reduce the space between attribute dropdowns, try the following:

    .woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations tr
{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.woocommerce div.product form.cart .variations tr
{
    margin-bottom: .25 !important; /* Here adjust the space */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search