Adjust the Product page layout

Hey @tabonik

Your site is hidden behind a maintenance screen, so we’re not able to check the page and see what can be done to lower the content. Is there any way you can open your site so we can take a look?

Hi Senff,
I disabled the underconstruction mode. Thanks a lot

Needless to say this goes for all products, so i will need to be able to adjust the overall product template

Hey @tabonik

Thanks for opening up the site! You can lower your content on the product pages with a little bit of custom CSS code.

Go into your site’s admin Dashboard and select Appearance → Customize →?Additional CSS. In the CSS textbox on the left, add the following code:

.single-product #content {
  padding-top: 240px;
}

Select “Save Changes” from the top, and your changes will be applied to your site.

Senff- That nailed it.. you’re a wizzard!

But just to know.. so whenever i would like to play with the template as i do with other pages via elementor, that is not possible? Why is it simply noy there under ‘Pages’ in the dashboard?

Hey @tabonik

Certain parts in your WooCommerce store aren’t created as Pages as such, but created dynamically — product pages, product archives, search result pages, etc. They are built based on a template, and filled with data that comes from what you entered in your product details, for all your products.

The pages you see in the Pages menu, are built with the content you enter there and are only meant for “static” pages.

I’m not sure if product pages can be created with Elementor as well; for that, it’s best to check that with Elementor’s support team.

The buttons of the payment methods (Paypal/ CC) are floating over the page header when you scroll down. (Same page, check it out please) Can you tell me maybe where i can set that to go underneith instead?

Ahh ok. That explains a lot.. But it seems silly i wouldn’t be able to adjust that. How is one supposed to build his site?
Anyway i will see.. big help
Thanks again

also.. i have a similar issue with the Shop page.. i cannot get the footer banner all the way down.. with other pages this is no problem using elementor. It seems Woo is not that flexible as the rest. But i will contact elementor and ask them. Updates i will post here.

Hey @tabonik

You can create a new Page (in/with Elementor) and then insert products in there, either with a shortcode, or with a Block (using WooCommerce Blocks). That way, you will have more control over your page layout.

Hi Senff,

It seems if you want a good grip on building the Product page, Elementor pro is the way to go. I assume you mean the -pro version as well.

I got the following response from Woo..

“This task usually falls on themes and not the plugin.
Our free WooCommerce Blocks plugin allows you to add product blocks to your posts and pages. This functionality will be incorporated into core WooCommerce, but I don’t have a timeline for when that will be as it is still in development. The plugin should meet your needs for now.

In the future, it might also include the functionality to edit the Product Page.”

Hi Senff,

With the code you supplied, the single product page is actually fine.

Only thing i’m still stuck with is that the payment options go over the banner.
https://ons-greens.com/product/36w-t8-grow-tube/

Before i start building a new single product page, would there be a code as well to tackle this problem? Would save some time and work..!

Any advise appreciated.

Thanks a lot