Home » Forums » Focus Groups » Theming and Design
4 replies [Last post]
Fri, 12/23/2011 - 09:44
shyqueen
shyqueen's picture
Offline
Joined: 11/02/2011
Juice: 24
Was this information Helpful?

Hi! I am very new on Ubercart and I've created an online store with Acquia prosper theme but I have a problem with the style of Product pages. First of all there are menu links that I do not want to see at product pages under the ''add to cart'' button and from ''manage fields'' at product content type I cannot remove this field. And also I cannot redesign the product page. Is there anybody can help me about these?

My website is : www.jojobebe.com

Thank you...

Top
Wed, 01/25/2012 - 20:43
#1 View page
mpalermo
mpalermo's picture
Offline
Joined: 01/20/2012
Juice: 22
Re: Changing Product node style

Trying to do the same thing here. Did you find anything useful?

Visit us at: http://totaldev.com

Top
Thu, 01/26/2012 - 01:38
#2 View page
shyqueen
shyqueen's picture
Offline
Joined: 11/02/2011
Juice: 24
Re: Re: Changing Product node style

not yet..

Top
Thu, 01/26/2012 - 03:33
#3 View page
mpalermo
mpalermo's picture
Offline
Joined: 01/20/2012
Juice: 22
Re: Re: Re: Changing Product node style

I've been working on a customized product page template. I'll share it here, but keep in mind that my store has a few abnormalities that I'm trying to accomplish:

1. It's a software only store (downloadable files)
2. If the software product is free, I hide the "Add to cart" and pricing stuff and just attach files to the node in a public download location.
3. I've added a couple custom fields to the Product content type such as a summary (a brief description) and attached file downloads.

My template is still a work in progress. I've also put the css style that I'm using at the top of the template file (this should be moved to a css file if you want to use it). Anyway, here is my template so far that is working for me, hope it helps:

node--product.tpl.php
(Can't seem to paste the code and keep the indenting/formatting)

<style>
.product-content .list-price
{
color: #aaa;
}

.product-price.sell-price
{
font-weight: bolder;
font-size: 2em;
line-height: 1.75;
}

.product-image-container
{
float: left;
width: 280px;
height: 280px;
border: 1px solid #ccc;
background: #fff;
margin-right: 20px;
padding: 10px;
}
.product-image-container .field-label { display: none; }
.product-image-container img
{
max-width: 256px;
height: auto;
vertical-align: middle;
margin: auto auto;
}
.product-summary
{
max-height: 100px;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 10px;
}

.product-basics
{
margin-left: 322px;
}

.product-purchase-options-wrapper
{
text-align: center;
}
.product-purchase-options
{
display: inline-block;
text-align: left;
border: 3px solid #fff;
background: #eee;
padding: 10px;
}

.product-pricing
{
float: left;
margin-right: 25px;
}

.product-add-to-cart
{
float: left;
}
.product-add-to-cart .attributes
{
float: left;
margin-right: 25px;
}
.product-add-to-cart .form-item-qty
{
float: left;
margin-right: 25px;
margin-top: 30px;
}
.product-add-to-cart .form-item-qty label
{
display: inline-block;
font-size: 9px;
}
.product-add-to-cart .form-item-qty .form-required { display: none; }
.product-add-to-cart .form-item-qty input[name="qty"]
{
width: 3.75ex;
}
.product-add-to-cart .form-actions
{
float: left;
margin-top: 25px;
}

.product-section h2
{
border: 3px solid #fff;
background: #eee;
padding: 5px 10px
}
</style>

<div class="product-content">

<div class="product-main clearfix">
<div class="product-image-container">
<?php echo render($content['uc_product_image']); ?>
</div>

<div class="product-basics">
<div class="product-title">
<h2><?php echo $node->title; ?></h2>
</div>

<div class="product-summary">
<?php echo render($content['field_product_summary']); ?>
</div>

<?php if(count($field_file_attachment) > 0): ?>
<a href="#attachment-downloads">Download Now</a>
<?php endif; ?>

<?php if($node->sell_price > 0): ?>
<div class="product-purchase-options-wrapper clearfix">
<div class="product-purchase-options clearfix">
<div class="product-pricing clearfix">
<?php if($node->list_price > 0): ?>
<div class="product-price list-price">
<span class="list-price-title">Was:</span> <span class="list-price-val"><?php echo uc_currency_format($node->list_price); ?></span>
</div>
<?php endif; ?>
<div class="product-price sell-price">
<?php echo uc_currency_format($node->sell_price); ?>
</div>

<?php if($node->list_price > 0): ?>
<div class="product-price save-price">
Save: <?php echo uc_currency_format($node->list_price-$node->sell_price); ?>
</div>
<?php endif; ?>
</div>

<div class="product-add-to-cart">
<?php echo render($content['add_to_cart']); ?>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>

<div class="product-body product-section">
<h2 class="product-body-title">Description</h2>
<?php echo render($content['body']); ?>
</div>

<?php if(count($field_file_attachment) > 0): ?>
<a name="attachment-downloads"></a>
<div class="product-files product-section">
<h2 class="product-files-title">Files</h2>
<?php echo render($content['field_file_attachment']); ?>
</div>
<?php endif; ?>
</div>

Visit us at: http://totaldev.com

Top
Thu, 01/26/2012 - 04:48
#4 View page
shyqueen
shyqueen's picture
Offline
Joined: 11/02/2011
Juice: 24
Re: Changing Product node style

I tried so many css codes to customize my product nodes but I just could not manage to do it as I want and I left it as it is.. because my site is online now and I have enough traffic everyday so I did not want to try more. But I have a slideshow at frontpage (it supposed to be a slideshow) and it just doesn't work. Do you have idea about this?

Top