Docs

[sosmond]

I am hoping you can give me a few pointers that will help me style the product variation table on this page
http://jeffdillon.involve.media/product/test-2/

I have tried several methods unsuccessfully to tighten up the spacing between the rows. Is there some other style that is adding padding or margins?

Thank you,

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer inorder o reduce spacing between table rows:

.summary.entry-summary table td {
    padding-right: 0px !important;
}

Thanks.

[sosmond]

Thank you for your help however adding the code did not change the table. I would like the table to be shorter with less space between the rows. I would appreciate if you have any other suggestions.

[Jade]

Hi there,

Please try this code:

table th, table td {
    border-top: 1px solid #1f1f1f;
    display: inline-block;
    width: 25%;
    max-height: 38px;
}

Hope this helps.

[sosmond]

This helped and is really close but I have a couple more questions. The row contents are not aligned vertically so I added vertical-align: bottom; and everything lines up except for the “add to cart” buttons are higher. I tried middle and top alignment and was unsuccessful.

http://jeffdillon.involve.media/product/test/

secondly this addition affected all the tables on my site, is there a way I can have it only apply to this table?

thx

[Jade]

Hi there,

Please add this code:

.woocommerce div.product .summary .single_add_to_cart_button {
    margin-top: 1.313em;
}

Hope this helps.

[sosmond]

Thank you for the alignment help. The table styles affected all the tables on my site, is there a way I can have it only apply to this table?

[Paul R]

Hi,

You can add the post id to your code to make it affect only the table on that page.

eg.

.single-product.postid-8 .woocommerce div.product .summary .single_add_to_cart_button {
    margin-top: 1.313em;
}

.single-product.postid-8 table th, 
.single-product.postid-8 table td {
    border-top: 1px solid #1f1f1f;
    display: inline-block;
    width: 25%;
    max-height: 38px;
}

https://community.theme.co/kb/how-to-locate-post-ids/

Hope that helps.

[Author]

Posts