Discussions

Customize the way the product is displayed

Is there a way to change the layout of a product page? I can change the order things are displays. Such as moving the "Add to Cart" button above the product image. What if I want to have the "Add to Cart" button and the product image side by side? Or the product image next to the product body.

Thanks in advance.

emmit95123
Posted: Sep 26, 2011

Comments

Brian on October 1, 2011

Well, I think this is the part of theming and there aren't any specific DC themes out yet to start off with.

But I came across the same question and re-arranged the order of the price, add-to-cart-button, text and all the other fields in the Edit Display section of the product.

I put the price and the button to the top and with css let it float right with 20%. The description text bumps to the top and flows nicely around the right container. For me that cake was eaten since I have a quite minimalisitic design.

jsulmar on September 27, 2013

For the example product display pages that are installed with Kickstart 2, I see that multiple images can be present and they appear in a leftmost column. To the right is a larger zoomable image, and to the right of that are the other fields (body, price, attributes, etc). How are the placement of the images and the zooming controlled? When I create a new product, all of the display items are in a single column vertically with the image above the other fields and no zooming. The DS module is not installed, so there must be another way. Thanks much.

CptAnt on September 29, 2013

find profiles/themes/omega_kickstart/templates/node--product_display.tpl.php

This template defines how the product is displayed.

<div class="container-24 grid-12 prefix-1 clearfix">
    <?php print render($content['field_images']); ?>
</div>

renders the cloud zoom images for a product. In the no demo kickstart install the images are attached to the variations of a product. You could of course delete this field (field_images) from the variations and reuse the field on the product display. Also you can create product specific displays by creating your own template like this node--my_product.tpl.php where my product is the name of your product display.

may not be familiar. The classes referenced are Omega 3 specific.

There is a learning curve involved here. Hope I've helped.

If you really want to see whats going on install Devel and Devel Themer. They give you a good idea what templates are called and suggest template names if you want to modify something specific.

jsulmar on September 30, 2013

my version of kickstart is commerce_kickstart-7.x-2.9-core

Thanks, I understand the concept you explain. I would like to try to clone the behavior for one of the installed product types, however I cannot find the product specific tpl files. In my installation there is no folder profiles/themes, however assuming the intended path is profiles/commerce_kickstart/themes/omega_kickstart/templates, I cannot find the files for any of the product types:

# ls -go profiles/commerce_kickstart/themes/omega_kickstart/templates
-rwxr-xr-x 1 1591 Jul 26 10:31 README.txt
-rw-r--r-- 1 1136 Jul 26 10:31 comment.tpl.php
-rw-r--r-- 1 732 Jul 26 10:31 field--fences-h2--node.tpl.php
-rw-r--r-- 1 1288 Jul 26 10:31 maintenance-page.tpl.php
-rw-r--r-- 1 984 Jul 26 10:31 node--blog_post.tpl.php
-rw-r--r-- 1 990 Jul 26 10:31 node.tpl.php
-rw-r--r-- 1 1266 Jul 26 10:31 region--branding.tpl.php
-rwxr-xr-x 1 976 Jul 26 10:31 region--menu.tpl.php

# find . -name 'node--*' -print
./profiles/commerce_kickstart/modules/commerce_kickstart/commerce_kickstart_product_ui/theme/node--product--type.tpl.php
./profiles/commerce_kickstart/modules/commerce_kickstart/commerce_kickstart_product_ui/theme/node--product--type--product--list.tpl.php
./profiles/commerce_kickstart/themes/commerce_kickstart_theme/templates/node--blog_post.tpl.php
./profiles/commerce_kickstart/themes/omega_kickstart/templates/node--blog_post.tpl.php

Perhaps the image rendering and position are controlled in another location?

Schweb Design, LLC on May 15, 2014

Just wanted to share some help here. I was surprised how long it took me to find the location of this as well. After researching I ended up here but had the same problem as you... couldn't find node--product--type.tpl.php anywhere but i knew it had to be coming from somewhere.

check out this comment: https://drupal.org/node/1857146#comment-6808760 which explains well what to do. I'll post it here in case of link rot:

Try using node--product--type.tpl.php - this can be copied from the profiles/commerce_kickstart/modules/commerce_kickstart/commerce_kickstart_product_ui/theme folder and copied to your theme. Then you could update it from there.

then yes, as you mentioned, the correct path for this tpl file is
profiles/commerce_kickstart/themes/omega_kickstart/templates
at least if you're using Omega Kickstart as your theme.

Mark P on June 29, 2014

For Commerce Kickstart 2 look in profiles/commerce_kickstart/modules/commerce_kickstart/commerce_kickstart_product_ui/theme

It seems a strange place to put the tpl files like product tpl but there you have it.