Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Custom Product Layout
 
fastboxgaming
Sr. Member
 
Avatar
Total Posts:  101
Joined:  2008-10-11
 

I’m new to Magento, and have been messing around with it for about a month now. I have my site almost ready to upload products, but I’m encountering a layout problem with the product page. As you can see, the page is set up(order):
1. quick overview
2. custom options
3. product description
4. additional information

How could I edit the product page to display like this:
1. quick overview
2. additional info (i would change this title to “Features")
3. product description
4. custom options

This would make much more sense for the customers so that they may see the features at the top, then read the description, then customize the product at the bottom.

Joel

Image Attachments
product_page.PNG
 
Magento Community Magento Community
Magento Community
Magento Community
 
Voot
Sr. Member
 
Total Posts:  261
Joined:  2008-03-20
Long Beach, CA
 

Hi,

You’ll need to edit the view.phtml file located in the app/design/frontend/default/theme_name/template/catalog/view folder. Find this code:

<div class="product-collateral">
        
<?php if ($_description $this->getChildHtml('description')):?>
            
<div class="collateral-box">
                <
div class="head">
                    <
h4><?php echo $this->__('Product Description'?></h4>
                </
div>
                
<?php echo $_description ?>
            
</div>
        
<?php endif;?>
        <?php 
if ($_additional $this->getChildHtml('additional')):?>
            
<div class="collateral-box">
                <
div class="head">
                    <
h4><?php echo $this->__('Additional Information'?></h4>
                </
div>
                
<?php echo $_additional ?>
            
</div>
        
<?php endif;?>
        <?php 
echo $this->getChildHtml('upsell_products'?>
        <?php 
echo $this->getChildHtml('product_additional_data'?>
    
</div>
</
div>

Simply rearrange the div’s to your liking.

 
Magento Community Magento Community
Magento Community
Magento Community
 
fastboxgaming
Sr. Member
 
Avatar
Total Posts:  101
Joined:  2008-10-11
 

Thanks Vutha, you’ve been very helpful in several postings.
Joel

 
Magento Community Magento Community
Magento Community
Magento Community
 
fastboxgaming
Sr. Member
 
Avatar
Total Posts:  101
Joined:  2008-10-11
 

I have been able to move all the fields around using the view.phtml file. One problem I am having is moving the custom options to the bottom. I found that in the following code

<div class="clear"></div>
        
<?php if ($this->hasOptions()):?>
            <?php 
echo $this->getChildChildHtml('container2'''truetrue?>
        <?php 
endif;?>
    
</form>
    <
script type="text/javascript">
            var 
productAddToCartForm = new VarienForm('product_addtocart_form');
            
productAddToCartForm.submit = function(){
                    
if (this.validator.validate()) {
                            this
.form.submit();
                    
}
            }
.bind(productAddToCartForm);
    
</script>
    
</div>

this:

<?php if ($this->hasOptions()):?>
            <?php 
echo $this->getChildChildHtml('container2'''truetrue?>
        <?php 
endif;?>
is the code for the custom options. I have tried moving the entire div class clear, and I have tried moving just the 2nd part(php if statement) to the bottom of the page. Moving this code does move the custom options to the bottom, but also has some side effects on the rest of the page. Anyone know what would be causing this??? (see errors on attached image)

Joel

Joel

Image Attachments
Capture.PNG
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top