Layout Too Narrow on 2K and 1080p – How to Expand Page Content Width?

Hello dear Woodmart Support,

I have a new question regarding layout and spacing on desktop screens.

As shown in the screenshot and product page link I’ve provided, the current layout appears too narrow and centered, especially on 2K resolution monitors — but it’s also noticeable on 1080p displays.

There is a lot of unused white space on both sides of the content, which makes the page feel a bit too tight and compact.

I would like to achieve a more open layout, similar to the second screenshot I’m sending you — where the elements are more spread out, the layout feels more balanced, and the page width is used more efficiently.

Could you please advise me on the best method or setting within Woodmart to reproduce that kind of layout effect?

Thank you again for your great support!

Best regards,
Cédric M.

Hello,

Increase the Container width to have a similar width: https://prnt.sc/54FzoV5owhBG -> https://prnt.sc/Z8cZkbssZNp-

https://prnt.sc/h5PnCPbxHmIs

Kind Regards

Hello Woodmart Support,

Thank you very much for your previous reply.

I’ve tried to apply a custom CSS rule to expand the width of the right column (the one that contains the short description, price, and “add to cart” button) on the single product page — as shown in my screenshot.

Unfortunately, I haven’t been able to achieve the desired layout.

Since my goal is to make this column a bit wider (and use more space on desktop), could you please provide me with the exact CSS code I should insert — and explain how it works?

Thanks again for your help and support!

Best regards,
Cédric M.

Hello,

Navigate to Theme Settings -> Single product -> define this https://prnt.sc/Ao88tjyT1NmM layout.

Clear the cache and recheck the issue.

Kind Regards

I already tried that setting, but it doesn’t work at all—the product becomes way too small. The first screenshot I sent you (the example website) is exactly what I’m aiming for. It’s the perfect reference.

The first version you gave me, with the CSS code you shared as an example, actually works better. I tested it directly in the browser, and it does expand the area along with the text, which seems quite OK as a first attempt.

So the Elementor setting is really not working for me. I need a CSS solution that will allow me to control the page width exactly as shown in the screenshot I sent you.

If needed, you can also visit the Matériel.net website and check any product page there to see a live example of the layout I’m trying to achieve.

Hello,

1. I do not see that you have changed the width of the container – https://prnt.sc/WsHNFqx-7mfK

2. You can change the width of those columns via the Product Layout by using the default options from the page builder: https://prnt.sc/y77x2aFQCM6I -> https://prnt.sc/zOheKegHoIu4

Let me know if you have any additional questions.

Kind Regards

I haven’t done anything on the website itself — I only said that I tested the CSS code directly in the browser to preview the result. I also mentioned that I don’t know how to properly apply this CSS rule on my own.

What I clearly explained is that the solution you suggested (changing the setting in your software) doesn’t produce the expected result at all.

Thank you very much. From what I understand, I can modify the product page template using Elementor’s flexible options, and it will be compatible with all product pages on the site.
If that’s the case, what is the exact path I should follow to access this template?

Hello,

1. Navigate to Theme Settings -> General -> Layout and increase the site width to 1740 – https://prnt.sc/Lmj9kIBvyzDP

2. Navigate to Layouts > Single product -> Add new and import already created layout – https://prnt.sc/l1u9ia17dYcl , then adjust the width of the columns – https://prnt.sc/l4pu3pqiuLg5

Let me know the result.

Kind Regards

Hello,

Thank you very much for the clear and detailed information you provided.
I now have a much better understanding of how to build a more customized product page layout.

At this stage, I haven’t used the option to create a layout via Woodmart > Layouts that I could later edit with Elementor — although it’s definitely a great solution that I’ll consider using later.

For now, I’ve selected Layout 2 (50/50) in the Single Product layout settings within the Woodmart theme, and I’ve also applied the 1740px site width as you suggested. This produces a result that suits me well for the moment. You can see the effect in the admin panel via my staging/clone site.

Now I have a quick question:
I’d like to move some elements within the product page, especially the price, which I’d prefer to display above the Add to Cart button.

Could you please let me know:
– Is this possible using the current theme options?
– Or would I need to create a new layout via Woodmart > Layouts and manually rearrange the elements using Elementor for more flexibility?

Thanks again for your help!

Best regards,
Cédric

Hello,

It’s possible via Layouts, but I see that you do not use it, so add the code below to the fucntions.php file in your child theme:

// Change priority of price on single product page
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 25); // Change 25 to your desired priority

Kind Regards

Hello Woodmart Support,

I’m currently working on the layout of my site, and overall, the changes are working well — thank you again for your help.

However, after applying the new site width in pixels, I’ve noticed a few issues on different screens (15” laptop in 1080p and 27” monitor in 1080p):

The main navigation menu (in the green top bar) is now shifted to the left and no longer centered properly.

My homepage slides also appear slightly more aligned to the left — though I believe I can fix that myself in the slider settings.

Can you please confirm:

Is this shift in the header menu caused by the custom site width we applied?

If so, how can I adjust the header to keep the new global width, but still visually center the menu and fix this alignment issue?

The current site width looks great and matches exactly what I wanted — I would just like to correct the header alignment now.

Thanks again for your excellent support!

Best regards,
Cédric M.

Hello,

First, make sure that the menu is defined in the center in the header builder row – https://prnt.sc/pJZU-H46r5l- , then for the header row where the menu is defined apply this https://prnt.sc/-JMQ3v2Iul-I option, clear the cache and recheck the issue.

Kind Regards

Thank you, it’s perfect. By making changes in your header builder, I was able to easily recenter it.

Following your layout suggestions, I’ve applied the structure you recommended for my product page, and everything is looking very good overall.

However, I noticed that the estimated delivery date is no longer appearing on the product page.

Could you please let me know how to make it visible again, now that the layout has been updated based on your guidance?

Thank you very much once again for your help!

Best regards,
Cédric M.

Use an appropriate element in the Layouts – https://prnt.sc/SudUpkxfifLY

Let me know the result.

Kind Regards

[Author]

Posts