Return to previous page

Spacing issue with table on single product page

This topic has 6 replies, 2 voices, and was last updated 1 months, 2 weeks ago ago by Luca Rossi

Rowan Keizer

Participant

December 4, 2024 at 16:04

Please can I ask for some help with some CSS for spacing issues.
As can be seen on this page: https://celebratewithme.co.za/product/personalised-star-map-glowing-constellations/

I would like to space the dropdown options more evenly and better, however I just cannot seem to find the right selector or CSS to do that.

I have also attached herewith an image to explain what I am needing.

Files is visible for topic creator and
support staff only.

#426445 Copied Theme version: 9.4.5

5 Answers
Luca Rossi

Support staff

December 5, 2024 at 05:51
Hi @Rowan Keizer,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.single-product form.cart table.variations {
    margin-bottom: 0 !important;
}

.single-product .single_variation_wrap {
    margin: 0;
}

.single-product .woocommerce-variation.single_variation {
    margin-bottom: 15px;
}
.single-product a.reset_variations {
    margin-left: 0;
}
.single-product .woocommerce-variation-price {
    margin: 0;
}

.single-product .woocommerce-variation-add-to-cart.variations_button {
    margin-top: 0 !important;
    gap: 15px;
}

.single-product .woocommerce-variation-add-to-cart.variations_button table label {
    margin-top: 15px !important;
}

.single-product .woocommerce-variation-add-to-cart.variations_button table label[for="wck_personalised_field_name"] {
    margin-top: 0 !important;
}
```
Hope it helps!
#426485 Copied
Rowan Keizer

Participant

December 5, 2024 at 10:44

You are an absolute star! Thank you 🙂
If I can ask, there is no gap between the Add to cart button and the table, what CSS can I add to put say a 20px gap?

#426518 Copied

Luca Rossi

Support staff

December 5, 2024 at 10:50

Hi @Rowan Keizer,

You can find the gap: 20px; line and change this value.

Hope it helps!

#426519 Copied

Rowan Keizer

Participant

December 5, 2024 at 11:19

Thank you Luca, really appreciate your help.
Have an amazing day!

#426524 Copied

Luca Rossi

Support staff

December 5, 2024 at 13:02

Hi @Rowan Keizer,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#426547 Copied
Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Spacing issue with table on single product page’' has been successfully resolved, and the topic is now closed for further responses

Spacing issue with table on single product page

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection