Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:13Length:1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.2 Editing the Product Page Template

Amend the styling on individual product pages and write a function to change the images that are output for related products.

Related Links

5.2 Editing the Product Page Template

Hello! And welcome back to this Tuts+ series on WooCommerce theme development. In this part of the series we're going to be working on the single product page. And this is how it looks by default. It's a nice image of the product, and then there's some information underneath, and some related products. So here we we've got some sale content, for products people might also like to buy, and some related products as well. Now what I want to do is change some of the styling here so it's more consistent with my design using my colors, and I also want to change the size of these images down here. And now I'm gonna do that not just using CSS, but I'm actually going to amend a function that's provided with WooCommerce, so that smaller images are output. Cause theres no point in styling images to look smaller with CSS. While you're still actually sending a large image to the browser. So let's have a look at the template file that's used to display single products. The template file that's used here is the single-product.php file, which I've already got open here. And like all of the other template files in WooCommerce, it uses a whole bunch of hooks and include files to pull in some content. So, it's not actually this file's content we need to be working with. It's this one here. So, it's using get_template_part to pull in the single product content file. And that file, again, has got some hooks in it. And we're gonna be using some of those hooks a little bit later on. But first, let's look at the styling. What I want to change first is some of the colors in this page. So here you can see there's a green for the price by default, which isn't consistent with my design, and there's a purple Add to Cart button. Now my branding includes a coral color sort of a pinky red and I'm gonna use that for my buttons, and I also want to change the color of the price up here to use the tan color that I'm using for my links as you can see here. As well as that, I'm gonna change the color of the headings in my single product page cause they're a bit dull at the moment in gray. But I've used h2 and gray in my styling overall because that works with the rest of my design. But on this page that h2 tag is gonna be a different color. So let's start by adding some styling. I do this in my theme style sheet, and I'm gonna do this in the section that I've got here for colors. So the first thing I'm gonna do is change the color of that price. So first, I'll add a comment, so I know what I'm doing. [BLANK_AUDIO] And then, I'll have it starting underneath. So first let's target the price element. And that uses classes that are already provided by WooCommerce. [BLANK_AUDIO] Now what I'm doing here is I'm actually copying this from the start sheet that's in WooCommerce and I'll show you how that applies. So you can see here is the price and here you've got these elements here that have got that color, the green. So, I'm gonna type the same declaration. [BLANK_AUDIO] And then I'm gonna change the color. [BLANK_AUDIO] Now let's have a look how that looks in our site. That looks great. The price is now the color that's consistent with my design. Now let's move on to this button. Lets have a look at the styling for it and you can see that there's styling here for all of our buttons. Now I might as well do all of them at the same time I'm going to actually copy this straight into my style sheet rather then typing it all from scratch. [BLANK_AUDIO] But I am going to add some return so I can see what I am doing. [BLANK_AUDIO] And here's the color that I want to use. [BLANK_AUDIO] I'll save that and see how it looks on my site. So here's my button, which is a much more obvious coral color. Now I could add some more styling if I wanted to for hovers and so forth but I'll leave you to do that for yourself. Now the next thing I'm gonna move onto is the headings. These are a bit of a dull gray at the moment so I want to make them this nice duck egg blue that I'm using elsewhere in the site. So let's go back to the style sheet. So I'll add something here that targets the specific h2 element within my product pages. [BLANK_AUDIO] I'll save that, and once again I'll take a look at my site. Scrolling down you can see that the color has changed on all of these h2 elements which looks much nicer. So now, I'm going to move on to the images at the bottom of the screen, the related products and that you may also like upsell. Now, I don't like the fact that these are as big as the main product image. So, I want to make them smaller. I don't just want to make them smaller with CSS, I want to actually output a smaller image. To make my site more efficient so to do this I need to use a function that's provided by WooCommerce. Now this function can be found within the content product.php template file. Now what this template file does is it displays loops of products in all archive pages. So for example, this list of products here is a loop. It's querying those related products, and it's outputting them here. So it's not just in archive pages, but it's also in the main product page. So working my way down the file. I can that that there are a number of hooks in here. And the hook that I'm working with here is this WooCommerce before shop loop item title, bit of a mouthful I know. But the function that is actually being used to output those images is this one here WooCommerce template loop product thumbnail. So, what I need to do, is find that function within the work commerce files. So, let's have a look. You'll find all the WooCommerce functions in the include files. And, I need to scroll down, 'cause there's a lot of them here. And it's functions that I'm after, and these are template functions. So, the template functions file includes all of the functions, the output content, within the templates. And the specific function I'm looking for here is this one, woocommerce_template_loop_product_thumbn- ail. Now the great thing is that this function is plugable. WooCommerce is checking the function doesn't already exist in my theme. And only if it doesn't exist in my theme is it out in the function that's provided by WooCommerce. So all I need to do to override that function is create a new function in my themes functions file, which has the same name. So what I'm gonna do is copy this function and edit it in my functions file. So here I am in my theme functions file. [BLANK_AUDIO] And I've simply copied that function there. Now what I wanna do is change the way the function works only if we're on a single product page. So what I'm doing here is enclosing this in a conditional statement. [BLANK_AUDIO] Now there is product function. It's a template tag that is provided by web commerce to check if we're on a single product page. So if we are on a single product page. I want to use this code here, but I want to change it. So instead of it being get product thumbnail, as it is, I want to include a parameter here which relates to the size of the image. So what it will do there is it will output. The thumbnail image, raw from the larger image, that's its doing at the moment. Then if we're not on a single product page, I want it to just work as it normally does. So the normal function, that would output by default by WooCommerce is what goes in my L statement. So as you can see here what I've got happening is that if we're on a single product page, we're outputting a product thumbnail at the thumbnail size and if we're on any other page, we're outputting the normal size that WooCommerce defaults to. So, I'll save my functions file and see how that looks. So, here we are back on my single product page and if I scroll down. There's some nice small images. Now you'll notice that there's some great big area of white space here, and that's because of the styling. So, I need to change the styling of this element so that it is laid out correctly. So, let's go back to the stylesheet. [BLANK_AUDIO] So, again, in my stylesheet, I'm going to add some layout styling for those related products. Now, what I need to do is find the relevant declarations in WooCommerce that are used for that. So let's go back to my page, and inspect that. So let's take a look. Here we are, you can see, if I highlight that. How big the element is and it's taking up half the page. Now that's because it has a 48% width which is great because it's responsive, it's fluid but it's too wide for us at the moment. So what I'm going to do is copy, the declaration that WooCommerce gives us here, and add that into my stylesheet. [BLANK_AUDIO] And I'm gonna change that width to 25%. [BLANK_AUDIO] I'll add some returns so that I can see what's going on with my CSS here and then when I've done that I'll save it. And then I'll check my site again. So I saved my stylesheet and then I'll go back to my site. That's looking much better. I've got smaller images, they actually are smaller images, and they're being laid out correctly. So that's my products page, with those changes that I've made. In the next part of this course, we'll move on to creating a search page with some custom content that you can use to help people find the products that they want. Thanks for watching, and see you next time.

Back to the top