Change lay out product page to fullwidth etc

Hello dear staff,

How can I change the lay out of my product pages, like the options I have with regular pages?
Like fullwidth without container and without/ with header etc. and image at the top, etc?
I want to create full on sales pages as product pages, because I sell courses and workshops.
But there are some product pages with a certain tag that I’d like to keep the way they are to the standard product page.

Kindly,
Mrs X

Hello @MrsX,

Thanks for asking. :slight_smile:

You can change the layout by opening the Product page in WordPress editor and and under Page Attribute > Template select Blank - No Container | No Header, No Footer or Blank - No Container | Header, No Footer or Blank - No Container | No Header, Footer. Here is a screencast.

Thanks.

Thank you Prasant! But that is a guide for how to change a PAGE lay out. I have been using X for several years, so that I know. But I cannot change the productpage the same way. There’s not the same options as when i create a page. So basically my question is: what is the code for creating a fullwidth layout of a PRODUCTPAGE? Without the image on top, just like it would be with a fullwidth page?

Hello There,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you in advance.

Ok thank you Ruenel. see note attached!
PS
I do NOT want to change the lay out of ALL my product pages, but only of SOME.

Hi there,

That’s possible, please add this code to your global custom CSS.


    .single-product.postid-8684 .masthead, .single-product.postid-8684 .x-breadcrumb-wrap, .single-product.postid-8684 .x-colophon {
     display: none;   
    }

	.single-product.postid-8684 .x-container.max, .single-product.postid-8684 .x-container.width {
	max-width: 100%;
	width: 100%;
	}
    .single-product.postid-8684 .entry-wrap {
    padding: 0px;
    box-shadow: none;
    }

The 8684 is the ID of that product that provided and it’s usually available in the URL while editing it. Example, ID 373

You’ll repeat each step for every product you prefer.

Thanks!

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