Drupal Commerce - Product Display layouts

By shane
Wed, 2013-05-22 19:33
Daily Dose of Drupal Episode #141

In this episode we continue learning about Drupal Commerce and dive into some of the layout aspects of building out Drupal Commerce product displays.

In this episode you will learn:

  • How to modify the layout of a Drupal Commerce product display
  • How fields are used to control the Drupal Commerce product display layout

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 141 and today we’re going to continue learning about Drupal Commerce and we’re going to go into detail on how you can rearrange the product display page. As always I am Shane Thomas, you can follow me on Twitter at smthomas3, you can find me on Google + and you can sign up for the Code Karate newsletter and learn about how you can support Code Karate.

Let’s go ahead and gets started; if you remember where we left off last time we have a working product page depending on your selections, different images of course show up the prices will change but what we really want to do is look at how we can actually rearrange this product page to make it a little more … at least more closely resemble how we want the product page to end up looking and how we’re going to do that is we can start by coming into the Product Display Content Type that we created and go into Manage Display and as you can see here there are a bunch of fields that are listed and this kind of controls how the actual page is output.

So what we can do is we can start by moving the product image up to the top and we’ll move the Add To Cart form right below that and we can also put the product price right before the Add To Cart form and we’ll go ahead and move this product Hat Size, Color and Shirt Size fields to the hidden section. Now if we close this you’ll see that now the image shows up followed by the price, followed by the Add to Cart form and the details section at the very bottom.

One thing you will notice though as we select different images or different attributes, the image size actually changes. This is because the image as we upload it weren’t necessarily the exact size that we wanted them to be so we can go ahead and we can actually set an image style to make this a specific size or a set width, height or whatever we want to do and we can do that …. Well you may first initially think come into Content Type, Product Display, Manage Display and come into the image but you’ll notice there’s a little piece of text right here that says if you want to modify the settings for this field you need to do that on the Product Type Manage Display configuration page. So we’re going to go ahead and click on that, we’re going to come into hats and we actually need to go to Manage Display on the Hats Product Type.

Now that we’re in here we can see that there’s our image fields here inside the Manage Display tab and you can select something else instead of original image we can show instance the medium size image. If we save that, click Save there and now you can see the image is much smaller.

Now when we select other images they’re all using this Medium Image image style. If we want to change how that image style looks or create new image style simply come to Configuration Media Image Styles, you can see there’s the medium, large thumbnails so we can see the Medium is always going to scale to 220 x 220. We could create our own just by selecting Add Style, we could create one and then come into our Product Type Manage Display and select our new image style there.

You will notice that if we go to our shirt product it’s showing the big image again. This is because we only set the actual manage display on the Hats Product Type. We need to do the same thing of course for the Shirts so we come into Manage Display for the shirts product type, come into image and we’ll select the medium here as well, update and save.

Now once we refresh you’ll see that it’s now using this medium image style and so the shirts are much closer in size because they’re all using that same image style. So now that we have this product display looking pretty close to what we want we can of course use CSS to float or position this Add to Cart form over on the right or we could put the image on the right and add the cart form on the left however we wanted to structure this page.

Some other things we may want to do is hide this actual label here and that’s going to be done of course on the product type again, we’ll come into Manage Display, look for image and under the Label section we’ll go ahead and select Hidden, save it and we’ll come into the same thing on Shirts, select Hidden for the Label, now when we come back that image label is gone, we’ll also come into Product Display and because we actually … I want to hide this label right here, because this is on the actual product display itself we’re going to actually have to come to Content Types Product Display and Manage Display and for the Product Label we’ll go ahead and change that to Hidden.

You can always go to the Product Display and go to Manage Display here and it’ll tell you for instance on the image it’s controlled by the settings on the product type for image and price but of course the product is not so you can always kind of come to see where that Manage Display whether it’s on the Product Type or the Content Type if you’re not sure when you’re just getting started.

So now you’ll notice that product label is gone so it’s looking closer to what we want and there’s really not much also going to do right now, you can use CSS to style or theme this page however you want. If you need something a little more complex, a layout that you want to control without necessarily having to use CSS for positioning you could use something like Panels to control the layout of the page and that’s something we may go over in the future episode but probably not something we’ll get to for a while but you can of course take a look at that in advance if you need to change the layout of this page and you don’t want to use CSS for positioning.

So that’s it for this time on the Daily Dose of Drupal, we’ll be back again next time and we’ll probably do a few more episodes on Drupal Commerce before trying to jump into a few other things as well so until next time, see you later.

Need to learn more Drupal?

Premium Drupal Training Online (Horizontal)


Nice tutorial. Another helpful post to showcase power of drupal and promote it's usage

I keep getting the video for the 70th lesson instead of the one for this one. Ive tried from the home page and the individual lesson page with the same result.

Michael -

Nice catch on the video. Accidentally uploaded the wrong video. Everything has been updated correctly now.

Post new comment