How to add free shipping notice on product listing and product view in Magento

NOTE: This tutorial assumes you're using an extension that uses the "special_shipping_group" attribute... But you can also use this tutorial to output any attribute you'd like into the product view and product listing.

Ok... Say you're using the "special_shipping_group" attribute, to specify which products should receive free shipping.

You would, for example, add an attribute called: FREE SHIPPING

Make sure you also set this visible under product listing, and product view, or else it won't display.

Following, you will assign this attribute to all the products that are to use this "FREE SHIPPING" attribute.

Now...

If you want to automatically show this attribute in the product listing and/or the product details, you can simply add this code to your template directory 'view.phtml' and 'list.phtml'. You may also add this to the "recently viewed" and "compared" products by editing 'home_product_compared.phtml' and 'home_product_viewed.phtml'.

<?php if ($_product->getAttributeText('special_shipping_group') == 'FREE SHIPPING'): ?>
<strong class="free-shipping-notice"><?php echo $_product->getAttributeText('special_shipping_group'); ?></strong>
<?php endif;?>

or

<?php if ($_product->getAttributeText('special_shipping_group') == 'FREE SHIPPING'): ?>
<strong class="free-shipping-notice">FREE Shipping</strong>
<?php endif;?>

list.phtml (note: i only made change under the grid section; you can also add this under regular listing)

<?php
/**
 * Product list template
 *
 * @see Mage_Catalog_Block_Product_List
 */
?>

<?php $_productCollection=$this->getLoadedProductCollection() ?>
<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
    <?php echo $this->getToolbarHtml() ?>
    <?php // List mode ?>
    <?php if($this->getMode()!='grid'): ?>
    <?php $_iterator = 0; ?>
    <ol class="products-list" id="products-list">
    <?php foreach ($_productCollection as $_product): ?>
        <li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">
            <?php // Product Image ?>
            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>
            <?php // Product description ?>
            <div class="product-shop">
                <div class="f-fix">
                    <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName())?></a></h2>
                    <?php if($_product->getRatingSummary()): ?>
                    <?php echo $this->getReviewsSummaryHtml($_product) ?>
                    <?php endif; ?>
                    <?php echo $this->getPriceHtml($_product, true) ?>
                    <?php if($_product->isSaleable()): ?>
                        <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                    <?php else: ?>
                        <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                    <?php endif; ?>
                    <div class="desc std">
                        <?php echo nl2br($this->htmlEscape($_product->getShortDescription())) ?>
                        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" class="link-more"><?php echo $this->__('Learn More') ?></a>
                    </div>
                    <ul class="add-to-links">
                        <?php if ($this->helper('wishlist')->isAllow()) : ?>
                            <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                        <?php endif; ?>
                        <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                            <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                        <?php endif; ?>
                    </ul>
                </div>
            </div>
        </li>
    <?php endforeach; ?>
    </ol>
    <script type="text/javascript">decorateList('products-list', 'none-recursive')</script>
    <?php else: ?>
    <?php // Grid Mode ?>
    <?php $_collectionSize = $_productCollection->count() ?>
    <?php $_columnCount = $this->getColumnCount(); ?>
    <?php $i=0; foreach ($_productCollection as $_product): ?>
        <?php if ($i++%$_columnCount==0): ?>
        <ul class="products-grid">
        <?php endif ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>
<?php if ($_product->getAttributeText('special_shipping_group') == 'FREE SHIPPING'): ?>
<strong class="free-shipping-notice"><?php echo $_product->getAttributeText('special_shipping_group'); ?></strong>
<?php endif;?>
                <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h2>
                <?php if($_product->getRatingSummary()): ?>
                <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                <?php endif; ?>
                <?php echo $this->getPriceHtml($_product, true) ?>
                <div class="actions">
                    <?php if($_product->isSaleable()): ?>
                        <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                    <?php else: ?>
                        <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                    <?php endif; ?>
                    <ul class="add-to-links">
                        <?php if ($this->helper('wishlist')->isAllow()) : ?>
                            <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                        <?php endif; ?>
                        <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                            <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                        <?php endif; ?>
                    </ul>
                </div>
            </li>
        <?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
        </ul>
        <?php endif ?>
        <?php endforeach ?>
        <script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
    <?php endif; ?>
    <div class="toolbar-bottom">
        <?php echo $this->getToolbarHtml() ?>
    </div>
</div>
<?php endif; ?>

view.phtml

<?php
/**
 * Product view template
 *
 * @see Mage_Catalog_Block_Product_View
 * @see Mage_Review_Block_Product_View
 */
?>

<?php
    $_helper
= $this->helper('catalog/output');
   
$_product = $this->getProduct();
?>

<script type="text/javascript">
    var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
    <div class="product-essential">
    <form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
        <div class="no-display">
            <input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
            <input type="hidden" name="related_product" id="related-products-field" value="" />
        </div>
        <div class="product-shop">
            <div class="product-name">
                <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
            </div>
            <?php if ($this->canEmailToFriend()): ?>
                <p class="email-friend"><a href="<?php echo $this->helper('catalog/product')->getEmailToFriendUrl($_product) ?>"><?php echo $this->__('Email to a Friend') ?></a></p>
            <?php endif; ?>
            <?php echo $this->getReviewsSummaryHtml($_product, false, true)?>
            <?php echo $this->getChildHtml('alert_urls') ?>
            <?php echo $this->getChildHtml('product_type_data') ?>
            <?php echo $this->getTierPriceHtml() ?>
            <?php if (!$this->hasOptions()):?>
                <div class="add-to-box">
                    <?php if($_product->isSaleable()): ?>
                        <?php echo $this->getChildHtml('addtocart') ?>
                        <?php if( $this->helper('wishlist')->isAllow() || $_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product)): ?>
                            <span class="or"><?php echo $this->__('OR') ?></span>
                        <?php endif; ?>
                    <?php endif; ?>
                    <?php echo $this->getChildHtml('addto') ?>
                </div>
            <?php else:?>
                <?php echo $this->getChildHtml('addto') ?>
            <?php endif; ?>
            <?php if ($_product->getShortDescription()):?>
                <div class="short-description">
                    <h2><?php echo $this->__('Quick Overview') ?></h2>
                    <div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
                </div>
            <?php endif;?>
            <?php echo $this->getChildHtml('other');?>
            <?php if ($_product->isSaleable() && $this->hasOptions()):?>
                <?php echo $this->getChildChildHtml('container1', '', true, true) ?>
            <?php endif;?>
        </div>
        <div class="product-img-box">
            <?php echo $this->getChildHtml('media') ?>
        </div>
<?php if ($_product->getAttributeText('special_shipping_group') == 'FREE SHIPPING'): ?>
<strong class="free-shipping-notice"><?php echo $_product->getAttributeText('special_shipping_group'); ?></strong>
<?php endif;?>
        <div class="clearer"></div>
        <?php if ($_product->isSaleable() && $this->hasOptions()):?>
            <?php echo $this->getChildChildHtml('container2', '', true, true) ?>
        <?php endif;?>
    </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>
    </div>
    <div class="product-collateral">
        <?php echo $this->getChildHtml('info_tabs') ?>
        <?php echo $this->getChildHtml('product_additional_data') ?>
    </div>
</div>

home_product_viewed.phtml

<?php
/**
 * @see Mage_Reports_Block_Product_Viewed
 */
?>

<?php if ($_products = $this->getRecentlyViewedProducts()): ?>
<h2 class="subtitle"><?php echo $this->__('Your Recently Viewed') ?></h2>
<?php $_columnCount = $this->getColumnCount(); ?>
    <?php $i=0; foreach ($_products as $_product): ?>
        <?php if ($i++%$_columnCount==0): ?>
        <ul class="products-grid">
        <?php endif ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <a href="<?php echo $this->getProductUrl($_product) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135) ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></a>
<?php if ($_product->getAttributeText('special_shipping_group') == 'FREE SHIPPING'): ?>
<strong class="free-shipping-notice"><?php echo $_product->getAttributeText('special_shipping_group'); ?></strong>
<?php endif;?>                 
                <h3 class="product-name"><a href="<?php echo $this->getProductUrl($_product) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h3>
                <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                <?php echo $this->getPriceHtml($_product, true, '-home-viewed') ?>
                <div class="actions">
                    <?php if($_product->isSaleable()): ?>
                        <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                    <?php else: ?>
                        <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                    <?php endif; ?>
                    <ul class="add-to-links">
                        <?php if ($this->helper('wishlist')->isAllow()) : ?>
                            <li><a href="<?php echo $this->getAddToWishlistUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                        <?php endif; ?>
                        <?php if ($_compareUrl = $this->getAddToCompareUrl($_product)): ?>
                            <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                        <?php endif; ?>
                    </ul>
                </div>
            </li>
        <?php if ($i%$_columnCount==0 || $i==count($_products)): ?>
        </ul>
        <?php endif; ?>
    <?php endforeach; ?>
<?php endif; ?>

home_product_compared.phtml

<?php if ($_products = $this->getRecentlyComparedProducts()): ?>
<h2 class="subtitle"><?php echo $this->__('Your Recently Compared') ?></h2>
<?php $_columnCount = $this->getColumnCount(); ?>
    <?php $i=0; foreach ($_products as $_product): ?>
        <?php if ($i++%$_columnCount==0): ?>
        <ul class="products-grid">
        <?php endif ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <a href="<?php echo $this->getProductUrl($_product) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135) ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></a>
<?php if ($_product->getAttributeText('special_shipping_group') == 'FREE SHIPPING'): ?>
<strong class="free-shipping-notice"><?php echo $_product->getAttributeText('special_shipping_group'); ?></strong>
<?php endif;?>                
                <h3 class="product-name"><a href="<?php echo $this->getProductUrl($_product) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h3>
                <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                <?php echo $this->getPriceHtml($_product, true, '-home-compared') ?>
                <div class="actions">
                    <?php if($_product->isSaleable()): ?>
                        <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                    <?php else: ?>
                        <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                    <?php endif; ?>
                    <ul class="add-to-links">
                        <?php if ($this->helper('wishlist')->isAllow()) : ?>
                            <li><a href="<?php echo $this->getAddToWishlistUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                        <?php endif; ?>
                        <?php if ($_compareUrl = $this->getAddToCompareUrl($_product)): ?>
                            <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                        <?php endif; ?>
                    </ul>
                </div>
            </li>
        <?php if ($i%$_columnCount==0 || $i==count($_products)): ?>
        </ul>
        <?php endif ?>
    <?php endforeach; ?>
<?php endif; ?>

Here is sample CSS. It replaces the text with an image that show a custom FREE Shipping banner-- a small one for the listing, and a large one for the product view. Of course you can replace the css here and css class above to whatever you want... this is only a sample of what was requested by client.

.product-view .free-shipping-notice { display:block; text-indent:-2000em; background:url(/img/block-free-ground-shipping-light.png) 0 0 no-repeat; width:141px; height:63px; margin:12px 0 12px 62px; z-index:1000; float:left;}
.category-products .free-shipping-notice,
.products-grid .free-shipping-notice { display:block; text-indent:-2000em; background:url(/img/block-free-ground-shipping-sml-light.png) 0 0 no-repeat; width:141px; height:38px;  margin:-35px 0 -2px 18px; z-index:1000;}

Tags: Design magento attributes shipping free shipping display