Full-Width WooCommerce Product Page

Support
#1

Hi,

I have done this before but now I just can’t figure it out. How can I make a WooCommerce product page full width? I have another website running theme pro with full-width product pages (the link is in a secure note) and it doesn’t have any additional CSS, so I’m searching for a way to do it without adding any custom CSS.

Thanks.

Woocommerce single product layout fullwidth
#2

Hi Sufian,

Thank you for writing in, please navigate to Theme Options > WooCommerce and set the Shop Layout to Fullwidth.


Hope it helps,
Cheers!

#3

Hello,

This setting will change the shop layout to full width but not the product pages. I have attached the website I’m working on a secure note, you can check it out.

Best Regards,
Sufian Diraneyya

#4

Hey Sufian.

Your Woocommerce singe products are actually already fullwidth but is contained in the default container.

If you want to force it to display without the container, please add this code in X > Theme Options > CSS:

.single-product .x-container.max {
    width: 100%;
    max-width: 100%;
}

Hope this helps.

#5

Hi,

Check out my second website (the link is in a secure note). It has full-width product pages without any custom CSS. So, I was looking for an option to do it without adding any custom CSS, I think that would be a better way if an option already exists in the theme options.

Thanks,
Sufian Diraneyya

#6

Hey Sufian,

They look the same on my end (please see the secure note for screenshots).

The difference is that on the current site, the content area has a different background color than the site area and it also has a box shadow.

The two sites differ on stacks. If you do not want to add a custom code, try switching to Renew.

Let us know how it goes.

#7

Oh!

It’s fine for me to add custom CSS, I have many on both websites. I only was confused why the other website looked different with all the settings the same. It was indeed the different stacks. I switched to Renew and it looks how I want it now.

Thanks A Lot!

#9

Hi Sufian,

You seem seem to have deleted your most recent response. In case you have further question, please feel free to let us know.

Cheers!

#10

Hi,

Sorry I’m asking many questions. I have a new problem now, when I use the CSS code you have provided to change the page width, the reading lens icon position will change as in the attached screenshots. How can I fix that?

Thanks.

#11

Looks like the problem was with the image resolution. Sorry about that. Thanks.

#12

You are most welcome. :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.