Extra space on shopping cart product pages

I am struggling with designing a reasonable shopping cart / product pages.

I HAVE upgraded to Elementor Pro to be better equipped to do this.

The Single Product page I have created has a HUGE margin at the top and bottom of the page. – This is the site I am building.

Here is how a Single Product Page looks at the top of the page:

Here is how it looks at the middle of the page:

All the extra space is being forced by the theme, I believe. How can I eliminate the extra spacing?

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .woocommerce-page .header-clone {
      position: absolute;

    .woocommerce-page .page-wrap {
      padding-top: 100px;


This code works perfectly to eliminate the extra space at the top of the page, Kharis. Thank you.

What about the HUGE space in the middle of the page?

Is there a way to control that space? It is too big.

Thanks again.


Never mind this post, Kharis. I am taking a different approach. And I believe I was doing something wrong. You can just delete this entire thread if you want. Sorry for the bother.

Thank you.


Okay Dan!

Glad to know you got your own solution.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.