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

Move Magento Grouped Products Table AND ADD TO CART” - Solved
 
blueflame
Jr. Member
 
Total Posts:  21
Joined:  2010-11-15
 

Just thought I’d share my efforts with those looking to do the same.

By default, Magento has grouped products in the right column above the “short description”. We wanted to move the box below the short description so it would have the full width of the page. As well, once we moved it the “add to cart” button needed to be shown below the grouped products (it looked really awkward up there by itself).

I’ve attached an image of the results.

First - Go to app/design/frontend/YOUR_INTERFACE/YOUR_THEME/catalog/product/view/type/grouped.phtml and cut out the bottom of the file:

<table cellspacing="0" class="data-table" id="super-product-table">
    <
col />
    <
col />
    <
col width="1" />
    <
thead>
        <
tr>
            <
th><?php echo $this->__('Image')?></th>
            <
th><?php echo $this->__('SKU')?></th>
            <
th><?php echo $this->__('Product Name'?></th>
            <
th class="a-right"><?php echo $this->__('Price'?></th>
            
<?php if ($_product->isSaleable()): ?>
            
<th class="a-center"><?php echo $this->__('Qty'?></th>
            
<?php endif; ?>
        
</tr>
    </
thead>
    <
tbody>
    
<?php if (count($_associatedProducts)): ?>
    <?php 
foreach ($_associatedProducts as $_item): ?>
        
<tr>
            <
td style="width:77px !important;">
            
<?php echo '<A  href="'.$this->helper('catalog/image')->init($_item'image').'" ><img src="'.$this->helper('catalog/image')->init($_item'thumbnail')->resize(7777).'" width="77"><a>'?>
            
</td>
            <
td class="a-center">
            
<?php echo $this->htmlEscape($_item->getSku()) ?>
            
</td>
            <
td style="width:330px !important;"><?php echo $this->htmlEscape($_item->getName()) ?></td>
            <
td class="a-right">
                
<?php echo $this->getPriceHtml($_itemtrue?>
            
</td>
            
<?php if ($_product->isSaleable()): ?>
            
<td class="a-center">
            
<?php if ($_item->isSaleable()) : ?>
                
<input name="super_group[<?php echo $_item->getId() ?>]" value="<?php echo $_item->getQty()*1 ?>" type="text" class="input-text qty" />
            
<?php else: ?>
                <?php 
echo $this->__('Out of stock.'?>
            <?php 
endif; ?>
            
</td>
            
            
<?php endif; ?>
        
</tr>
    
<?php endforeach; ?>
    <?php 
else: ?>
       
<tr>
           <
td colspan="<?php if ($_product->isSaleable()): ?>4<?php else : ?>3<?php endif; ?>"><?php echo $this->__('No options of this product are available.'?></td>
       </
tr>
    
<?php endif; ?>
    
</tbody>
</
table>
<
script type="text/javascript">decorateTable('super-product-table')</script>

Note: My table above has an extra few columns (Image and SKU) that you can delete if you do not need.

Your new grouped.phtml should look like this:

<?php $_product $this->getProduct() ?>
<?php $_associatedProducts 
$this->getAssociatedProducts() ?>
<?php 
if($_product->isSaleable() && count($_associatedProducts)): ?>
    
<class="availability"><?php echo $this->__('Availability: In stock.'?></p>
<?php else: ?>
    
<class="availability"><?php echo $this->__('Availability: Out of stock.'?></p>
<?php endif; ?>

Now, move that bottom piece of the code (the table) into a new file called grouped-table.phtml

Image Attachments
fps-grouped-product-table.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
blueflame
Jr. Member
 
Total Posts:  21
Joined:  2010-11-15
 

Here’s what grouped-table.phtml should look like with the “add to cart” button at the bottom of the table:

<?php $_product $this->getProduct() ?>
<?php $_associatedProducts 
$this->getAssociatedProducts() ?>

<form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form">


<
table cellspacing="0" class="data-table" id="super-product-table">
    <
col />
    <
col />
    <
col width="1" />
    <
thead>
        <
tr>
            <
th><?php echo $this->__('Image')?></th>
            <
th><?php echo $this->__('SKU')?></th>
            <
th><?php echo $this->__('Product Name'?></th>
            <
th class="a-right"><?php echo $this->__('Price'?></th>
            
<?php if ($_product->isSaleable()): ?>
            
<th class="a-center"><?php echo $this->__('Qty'?></th>
            
<?php endif; ?>
        
</tr>
    </
thead>
    <
tbody>
    
<?php if (count($_associatedProducts)): ?>
    <?php 
foreach ($_associatedProducts as $_item): ?>
        
<tr>
            <
td style="width:77px !important;">
            
<?php echo '<A  href="'.$this->helper('catalog/image')->init($_item'image').'" ><img src="'.$this->helper('catalog/image')->init($_item'thumbnail')->resize(7777).'" width="77"><a>'?>
            
</td>
            <
td class="a-center">
            
<?php echo $this->htmlEscape($_item->getSku()) ?>
            
</td>
            <
td style="width:330px !important;"><?php echo $this->htmlEscape($_item->getName()) ?></td>
            <
td class="a-right">
                
<?php echo $this->getPriceHtml($_itemtrue?>
            
</td>
            
<?php if ($_product->isSaleable()): ?>
            
<td class="a-center">
            
<?php if ($_item->isSaleable()) : ?>
                
<input name="super_group[<?php echo $_item->getId() ?>]" value="<?php echo $_item->getQty()*1 ?>" type="text" class="input-text qty" />
            
<?php else: ?>
                <?php 
echo $this->__('Out of stock.'?>
            <?php 
endif; ?>
            
</td>
            
            
<?php endif; ?>
        
</tr>
    
<?php endforeach; ?>
    <?php 
else: ?>
       
<tr>
           <
td colspan="<?php if ($_product->isSaleable()): ?>4<?php else : ?>3<?php endif; ?>"><?php echo $this->__('No options of this product are available.'?></td>
       </
tr>
    
<?php endif; ?>
    
</tbody>
</
table>
<
script type="text/javascript">decorateTable('super-product-table')</script>




    <?php $_product 
$this->getProduct() ?>  
  
<?php 
if($_product->isSaleable()): ?>  
         
<div style="text-align:right;padding-right:5px;">
        <
button title="<?php echo $this->__('Add to Cart') ?>" class="form-button btn-cart"><span>Add to Cart</span></button>   
</
div>
 
<?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>
 
Magento Community Magento Community
Magento Community
Magento Community
 
blueflame
Jr. Member
 
Total Posts:  21
Joined:  2010-11-15
 

Now go to app/design/frontend/YOUR_INTERFACE/YOUR_THEME/layout/catalog.xml and find the section that calls blocks for the grouped products:

<PRODUCT_TYPE_grouped>

        <
reference name="product.info">
            <
block type="catalog/product_view_type_grouped" name="product.info.grouped" as="product_type_data" template="catalog/product/view/type/grouped.phtml" />
        </
reference>

Add a reference to our newly created template grouped-table.phtml below grouped.phtml

<block type="catalog/product_view_type_grouped" name="product.info.grouped" as="product_additional_data" template="catalog/product/view/type/grouped-table.phtml" />

So your catalog.xml should now look like this:

<PRODUCT_TYPE_grouped>

        <
reference name="product.info">

            <
block type="catalog/product_view_type_grouped" name="product.info.grouped" as="product_type_data" template="catalog/product/view/type/grouped.phtml" />
            <
block type="catalog/product_view_type_grouped" name="product.info.grouped" as="product_additional_data" template="catalog/product/view/type/grouped-table.phtml" />
           
        </
reference>

If you noticed, the grouped-table.phtml will now be called under “product_additonal_data” instead of “product_type_data” within the product view.phtml.

Thats it!

 
Magento Community Magento Community
Magento Community
Magento Community
 
blueflame
Jr. Member
 
Total Posts:  21
Joined:  2010-11-15
 

Now, if you want to remove the “add to cart” button from the top of the page, you will need to delete the code from within app/design/frontend/YOUR_INTERFACE/YOUR_THEME/template/catalog/product/view/addtocart.phtml

Yes, delete everything inside addtocart.phtml. If your editor (such as my cPanel code editor) wont let you save an empty file just put a space in there then save.

Now you will need to call the add to cart button within each type of product (simple, virtual, configurable, etc..).

Here is the snippet of code to call the add to cart button:

<?php $_product $this->getProduct() ?>

<?php 
if($_product->isSaleable()): ?>
    
<fieldset class="add-to-cart-box" style="float:left !important;">
        <
legend><?php echo $this->__('Add Items to Cart'?></legend>
        
<?php if(!$_product->isGrouped()): ?>
        
<span class="qty-box"><label for="qty"><?php echo $this->__('Qty'?>:</label>
        <
input name="qty" type="text" class="input-text qty" id="qty" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>"/></span>
        
<?php endif; ?>
        
<button type="button" class="form-button btn-cart" onclick="productAddToCartForm.submit()"><span><?php echo $this->__('Add to Cart'?></span></button>
    </
fieldset>
<?php endif; ?>

Put this code:

-At the bottom of app/design/frontend/YOUR_INTERFACE/YOUR_THEME/template/catalog/product/view/type/simple.phtml
-At the bottom of app/design/frontend/YOUR_INTERFACE/YOUR_THEME/template/catalog/product/view/type/virtual.phtml

And then for configurable products you will need this code for app/design/frontend/YOUR_INTERFACE/YOUR_THEME/template/catalog/product/view/options/wrapper/bottom.phtml

<div class="product-options-bottom">

<?php $_product $this->getProduct() ?>

<?php 
if($_product->isSaleable()): ?>
    
<fieldset class="add-to-cart-box" style="float:left !important; padding-right:30px;">
        <
legend><?php echo $this->__('Add Items to Cart'?></legend>
        
<?php if(!$_product->isGrouped()): ?>
        
<span class="qty-box"><label for="qty"><?php echo $this->__('Qty'?>:</label>
        <
input name="qty" type="text" class="input-text qty" id="qty" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>"/></span>
        
<?php endif; ?>
        
<button type="button" class="form-button btn-cart" onclick="productAddToCartForm.submit()"><span><?php echo $this->__('Add to Cart'?></span></button>
    </
fieldset>
<?php endif; ?>

    <?php 
echo $this->getChildHtml(''truetrue);?>
</div>
 
Magento Community Magento Community
Magento Community
Magento Community
 
blueflame
Jr. Member
 
Total Posts:  21
Joined:  2010-11-15
 

A few notes:

- You will need to change the css classes to match whatever your theme calls for.

- You may have noticed the need for the <form ...................></form> in grouped-table.phtml. This is here because the form that is normally called at the top of the page is already closed (and no longer *listening* to our requests by the time we load the grouped products table allll the way down in the products_additonal_data. So, we have to call it again and wrap it around our table.

Hope this of use to someone or at least gets them going in the right direction!

 
Magento Community Magento Community
Magento Community
Magento Community
 
blueflame
Jr. Member
 
Total Posts:  21
Joined:  2010-11-15
 

and, this website is v 1.4.0.1

 
Magento Community Magento Community
Magento Community
Magento Community
 
monstermax
Jr. Member
 
Total Posts:  6
Joined:  2011-03-11
 

I am running ver. 1.5.0.1 and cannot get your solution to work!

After following your first steps, I only “remove” the table from the top (add to cart btn is still there) BUT the grouped-table is not showing anywhere on my grouped product page.

could you please help me to get this done?
thank you.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dx3webs
Sr. Member
 
Avatar
Total Posts:  178
Joined:  2008-12-16
 

In 1.5.0.1 using modern theme…

Add this to the top of grouped-table.phtml

<?php $this->setPreconfiguredValue(); ?>
<?php $_product 
$this->getProduct(); ?>
<?php $_associatedProducts 
$this->getAssociatedProducts(); ?>
<?php $_hasAssociatedProducts 
count($_associatedProducts) > 0?>
<?php 
echo $this->getChildHtml('product_type_data_extra'?>

and catalog.xml looks like this

<PRODUCT_TYPE_grouped translate="label" module="catalog">
        <
label>Catalog Product View (Grouped)</label>
        <
reference name="product.info">
            <
block type="catalog/product_view_type_grouped" name="product.info.grouped" as="product_type_data" template="catalog/product/view/type/grouped.phtml">
                <
block type="core/text_list" name="product.info.grouped.extra" as="product_type_data_extra" translate="label">
                    <
label>Product Extra Info</label>
                </
block>
</
block>
            <
block type="catalog/product_view_type_grouped" name="product.info.grouped" as="product_additional_data" template="catalog/product/view/type/grouped-table.phtml" />


    </
reference>

hope this helps

 
Magento Community Magento Community
Magento Community
Magento Community
 
Natdragon
Jr. Member
 
Total Posts:  1
Joined:  2011-04-18
 

Thanks to all above who posted their code. I used most of it, but there’s another way to get the add to cart button below the form very simply without modifying addtocart.phtml or all the other product type templates, so I thought I’d share. I’m using Ver. 1.5.1.0.

Just open app\design\frontend\oasis\default\template\catalog\product\view.phtml

And on line 63 or so you should replace this:

<?php if (!$this->hasOptions()):?>
with
<?php if (!$this->hasOptions() && !$_product->isGrouped()):?>

That removes the Add To Cart button and the whole Add-to box from the top of the page for grouped products. I don’t use the Wishlist or Compare features but if you want to keep them up there, then add this around line 66 to remove the button only.

<?php if (!$_product->isGrouped()):?>
<?php 
echo $this->getChildHtml('addtocart'?>
<?php 
endif; ?>

Down at the bottom of the page you’ll find the product_additional_data tag, which is what you’re now calling the grouped table. Paste the code below it, and you’ll have an Add to Cart button below the table.

<?php echo $this->getChildHtml('product_additional_data'?>
<?php 
if($_product->isGrouped()): ?>
<?php 
echo $this->getChildHtml('addtocart'?>
<?php 
endif;?>

Then go find the closing form tag and button script and move it to come AFTER the code above.

</form>
    <
script type="text/javascript">
    
//<![CDATA[
            
var productAddToCartForm = new VarienForm('product_addtocart_form');
            
productAddToCartForm.submit = function(){
                    
if (this.validator.validate()) {
                            this
.form.submit();
                    
}
            }
.bind(productAddToCartForm);
    
//]]>
    
</script>

Needless to say you don’t have to copy the script and put it on grouped-table.phtml either anymore. That’s it! Hope this is helpful to someone.

 
Magento Community Magento Community
Magento Community
Magento Community
 
JQuiroga
Jr. Member
 
Total Posts:  7
Joined:  2012-08-05
 

Excuse my ignorance but, could anybody update this for 1.7.0.2

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
dshank
Member
 
Total Posts:  36
Joined:  2008-04-06
 

Another vote for updating this for 1.7.

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
monialodo
Jr. Member
 
Total Posts:  4
Joined:  2012-06-29
 

I also need an update for 1.7. My table is under all product info!

 
Magento Community Magento Community
Magento Community
Magento Community
 
ronnie69
Jr. Member
 
Total Posts:  28
Joined:  2012-05-10
 

Closed

 
Magento Community Magento Community
Magento Community
Magento Community
 
vikas_rao
Member
 
Total Posts:  57
Joined:  2013-10-02
 

Demo link : http://www.themetalstore.co.uk/products/bright-mild-steel-round-bar-metric

I can able to move Grouped product to other places in category page, only grouped product moved to other positions.

But I can not able to move ADD TO CART button below Grouped product.

What is the code and In which folder i have to put the code?

Please post here or send to realworker99atgmaildotcom

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
vikas_rao
Member
 
Total Posts:  57
Joined:  2013-10-02
 

How to hide or remove “add to cart” button in Grouped products in magento

I Created grouped product . I alter the position of Grouped product. I created ADD TO CART
button in each product row in a grouped product table. So how i can remove

“ADD TO CART” button which is outside the table?

In which folder, which code i have to delete? I am new to magento and php . please explain me clearly

thankss.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top