Reduce space & font size between product title, price, variable

So I’ve been able to piece 99% of it together with snippets I found on several other forums such as stackoverflow. All I need now is to reduce the spacing between the product title and pricing variable. And please feel free to tighten up the code below if it could be simplified. I only added the /* references in case anyone else is looking for this same information.

/* Changes font size for title on product page */
.woocommerce div.product .product_title { font-size: 20px;
}
/* Changes font size for variable selection on product page */
.woocommerce div.product form.cart .variations label {
font-family: inherit;
font-size: 14px;
}
/* Changes space between product price and variable selection */
.woocommerce div.product form.cart .variations {
margin-top: -24px;
}
/* Changes font size of price */
.single-product span.amount {
font-size: 20px;
}

This seems to be working well to reduce the space between the product title and product pricing.

// Reduces the space between product title and variable price
.product_title.single-post-title {
margin-bottom: -18px;
}

I honestly don’t know how I figure this out as I truly am not a coder. But a brower’s developers tools certainly helps! ??

Again, I welcome a professional’s input on cleaning up this code; perhaps a shorter less bloated way of making all of this happen?

Cheers!

Frank

Hello @frankbiganski,

Great work, the snippet works fine but I noticed you’ve missed the px part when adding it to your site. Also, since the theme already assigns a margin, it’s better if you give your value priority by adding !important.

/* Make Title closer to price */
.product_title.single-post-title {
  margin-bottom: -18px !important;
}

Hope this helps!

So that’s what !important does. Great to know and thank you for your input.

BTW, you wouldn’t happen to be able to help me reduce the space above and below “Description” on the product page. I see there two columns. each produces a space. One under the left image and one under the right column. I cannot seem to get both to work for me.

And I find woocommerce-product-gallery but my attempts are not allowing me to reduce the spacing.

The same with “tabs wc-tabs”. I cannot seem to reduce the spacing under “Description”.

I’ll keep pressing on! ??

Cheers!

This is actually getting a little addictive! Two down and one to go, but reducing the space under the two columns will be a challenge.

/* Reduces space between last line in description and social media buttons bragging rights */
.wc-tabs-wrapper {
margin-bottom: -30px !important;
}
/* Reduces space between description title and item description image pixel size */
.wc-tabs {
margin-bottom: 6px !important;
}

Hello @frankbiganski,

Great work, that must feel rewarding! ??

I tried searching for the said column but couldn’t find it. Can you please attach a hightliged screenshot of it and elaborate more on what you’re trying to achieve?

Link to image: https://i.imgur.com/J5xtVyH.png

Look forward to hearing back from you.

Thanks Saif. For a novice, it is gratifying. Just wish I really knew what I was doing. ??

I basically want to remove the spacing below the product image and “description” title.
https://app.screencast.com/fkYjgrQJBAvRR

I think my challenge is I’m working with 3-4 sections of CSS that all affect each other. I have spacing under the product image and I have spacing under the pricing variable. And then it appears I have a wrapper spacing around the tabs “description” area too. Not a lot of spacing, but some.

I just want to move “Description” and everything below “Description” closer to the product image and variable above?

Thanks for your help!

Frank

Hello,

Please reach out to your theme support, they will be able to provide you with more information related to your request, if you have any questions after that, feel free to let us know.

Best.