Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Global Wrapper Setup3:37 with Zac Gordon
In this video we go over how to wrap the entire WooCommerce product area in the correct markup to match our theme.
There is an extra closing section tag in the wrapper-start.php file that we correct in the next video :)
What we have here is our portfolio section on the right and
our shop home page on the left.
You'll notice that this is not exactly lining up the same in terms of padding and
So what we wanna begin doing now is adding in extra wrapper classes that we need to
have everything formatted correctly.
I'm going to open Inspector here and take a look at the body,
header, section, div pattern that happens on this page.
And then open up this one and notice that we have the same header.
Then we haveand div id="content".
Whereas here, we ave section row.
So this is where our main global wrapper from WooCommerce is going to appear is
wrapping in this high-level content that then includes everything else.
So what I'm gonna do is come into my WooTree theme here and
I'm going to add in the woocommerce folder.
And then in my plugin here, I have the woocommerce plugin templates.
We're going to need the wrapper-start and wrapper-end.
Those are going to go into a global folder.
Then simply copy these over and drop them in.
Now the code that we need is to have this
replacing where we have the container and content.
So we want to remove these two divs and
we want to add in a simple section that has a class of row.
Let's go ahead and open up our code editor.
And inside of wrapper-start, most of this code is just dealing with how
things should be displayed if you have one of the basic WordPress default themes.
And if not, it's going to echo out this content here.
Now we could just change this last line since we know our theme wont be using any
However, because we know our theme wont be using any of these,
we can also just delete it.
So we could close out this whole php block there and
Then in the ending file, you could do the same thing.
We'll remove all of this and we'll simply put in a closing tag.
Let's come back and review our site.
You can see, okay, we have our section row here.
We have our header.
The header's open, that's why it look strange.
Yeah, we have our header and
we have the
right here where we need it.
If we open up this page a little bit, we could see though,
that it's not really displaying exactly how this other page is
in terms of the padding and the positioning of elements.
And the reason for this is that we now need to get into the wrapper
that's housing the actual archived product page.
So what we'll look at in the next step is the wrapper customization for
the main shop page.
You need to sign up for Treehouse in order to download course files.Sign up