Ecommerce Shopify WordPress Discussion

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 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 */ }
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.

February 4, 2024

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 */ }

February 4, 2024

Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.