Blog

How to Implement "See Price in Cart" Feature in Magento

How to Implement "See Price in Cart" Feature in Magento

Ever wonder why online stores like Amazon.com make you add a product to your cart in order to see the sale price? Learn why the 'see price in cart' feature is a valuable tool for online retailers and we'll show you how to implement this feature in Magento using only Mageneto's built in functionality.

Why do online stores make me add a product to my cart to see the sale price?
Believe it or not, when online retailers make you add a product to your cart to see the sale price, it's not a ploy to trick you into buying the product. Rather, by agreement with the manufacturer, the retailer is prohibited from advertising a sale price below a minimum price. The retailer, however, is allowed to sell the product for whatever price they well. The price in the shopping cart does not count as an advertised price, but rather the final price the retailer is willing to sell the product at.

A brief history on Minimum Advertised Price (MAP) policies
Many manufacturers set a Minimum Advertised Pricing (MAP) policy that prevent retailers from advertising the manufacturer's products below a certain price. In the 2006 Supreme Court case Leegin Creative Leather Products Inc. vs. PSKS Inc., the Court ruled that minimum advertised pricing policies are legal and do not break antitrust laws. As part of this ruling, however, the Supreme Court clarified that while retailers must abide by MAP policies, they may sell products for whatever price they choose. By requiring the customer to see the sale price in the cart, the online retailer may sell the product for whatever price they wish, effectively circumventing MAP policies.

Why do companies set MAP policies if there is clearly demand for their product at lower prices?
Companies set MAP policies in order to protect their brands. A Lexus wouldn't be a Lexus if it cost the same as a Toyota. By setting MAP policies, companies can maintain peoples' perceptions of their brand as a high quality brand, while letting authorized retailers sell the products for below the minimum advertised price.

So, if you're a online retailer bound by MAP policies with your manufacturers, you can use the 'see price in cart' trick to effectively sell your products at whatever prices you wish. By having the freedom to sell your inventory at whatever price you want, you can increase sales and maximize your revenue.

How to implement 'see price in cart' in Magento eCommerce
Magento is an open-source eCommerce platform being used by big and small companies alike including Samsung, The North Face, Lenovo, and 3M. We develop eCommerce websites with Magento, so we'll show you how to implement a 'see price in cart' feature using just the built-in functionality and some theming.

What you'll need to get started
All you'll need to get started is an installation of a current version of Magneto's community edition (we're using Magento ver. 1.3.2.4)

Step 1 — Create the attribute that will switch 'see price in cart' on or off
In order to add, manage, and edit attributes in Magento, navigate to the "Catalog" menu, then the "Attributes" sub-menu, then the "Manage Attributes" item.

Catalog menu
Catalog > Attributes > Manage Attributes

Once you're in the Manage Attributes section, click the "Add New Attribute" button.

Add new attribute
Add new attribute

In the "Properties" tab, set your attribute's options to your liking. Here's what I used in the "Front End Properties" and "Attribute Properties" areas:

Front end properties
Frontend Properties

Attribute
Attribute Properties

Under the "Manage Label / Options" section, choose the attribute's lable that will appear in the administrator section. I chose: "special price displayed in cart only."

Once you've added your attribute you can use the Manage Attribute Sets section in Catalog > Attributes to rearrange the attribute to display next to the price attributes when adding a product. I rearranged my new attribute to display right after the special price field.

Add a new product price section
You can see our new 'see price in cart' attribute right below the 'special price' attribute.

Step 2 — Tell your theme what to do with this attribute

So now you've got your attribute set up. A value of one indicates that you want to only display the special price in the cart. A value of zero for this attribute indicates that you want Magento to display the special price as usual. Making one quick edit to the price theme file, you can make this attribute effective in doing just that.

Locate your price theme file:
/public_html/app/design/frontend/[your-theme]/default/template/catalog/product/price.phtml

Edit this file and add the highlighted code below the helper variables and functions:

<?php
/**
* Template for displaying product price in different places (products grid, product view page etc)
*
* @see Mage_Catalog_Block_Product_Abstract
*/
?>
<?php
$_coreHelper = $this->helper('core');
$_weeeHelper = $this->helper('weee');
$_taxHelper = $this->helper('tax');
/* @var $_coreHelper Mage_Core_Helper_Data */
/* @var $_weeeHelper Mage_Weee_Helper_Data */
/* @var $_taxHelper Mage_Tax_Helper_Data */
$_product = $this->getProduct();
$_id = $_product->getId();
$_weeeSeparator = '';
$_simplePricesTax = ($_taxHelper->displayPriceIncludingTax() || $_taxHelper->displayBothPrices());
$_minimalPriceValue = $_product->getMinimalPrice();
$_minimalPrice = $_taxHelper->getPrice($_product, $_minimalPriceValue, $_simplePricesTax);
?>
<?php if ($_product->getCartPrice() == 1): ?>
<div class="price-box">
<p class="old-price">
<span class="price-label"><?php echo $this->__('Reg:') ?></span>
<span class="price" id="old-price<?php echo $this->getIdSuffix() ?>">
<?php echo $_coreHelper->currency($_product->getPrice()) ?></span>
</p>
<p class="special-price">
<span class="price" id="product-price">
<span class='too-low-to-display'>see sale price in cart <span class='cartprice-why tt'><a href="/help/cartprice.php" class="why" target="blank">(why?)</a></span></span></span>
</p>
</div>
<?php else: ?>

Finally, be sure to close up your PHP if statement at the very end of the template file:

<?php endif; ?>

In order to hide the price in the grid/list view, there's one more template file to edit:
/public_html/app/design/frontend/[your-theme]/default/template/catalog/product/list.phtml

At the top of the list.phtml file:

<?php
    $_coreHelper = $this->helper('core');
?>

And:

...
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php endif; ?>
<?php if ($_product->getCartPrice() == 1): ?><div class="price-box"><p class="old-price">
<span class="price-label">Reg:</span>
<span class="price" id="old-price-1"><?php echo $_coreHelper->currency($_product->getPrice()) ?></span></p><p class="special-price">
<span class="price-label">Sale:</span>
<span class="price too-low-to-display" id="product-price-1">SEE IN CART</span></p></div>
<?php elseif($_product->getSpecialPrice() == 0): ?><div class="price-box"><p class="regular-price">
<span class="price-label">Reg: </span><?php echo $_coreHelper->currency($_product->getPrice()) ?></p></div><?php else: ?><?php echo $this->getPriceHtml($_product, true) ?>
<?php endif; ?>
<?php if($_product->isSaleable()): ?>
...

You've now successfully implemented rules for displaying prices based on the attribute you created. You can edit the output code to suit your liking and use some css styling to make everything look great. In our version, we made the explanation "why" link popup inline with the page using ThickBox. We also added a hover over pop-up encouraging customers to add the product to their cart.

Check out the final product (no pun intended!)

The final product
The 'see price in cart' feature has been successfully and easily implemented.

DiggThis

Comments

Dave's picture

Isaac: Great tutorial and looks like it'll save $169 (the cost of the only MAP mod available for Magento. Nice work.
Dave

Flips's picture

Hi - thanks for documenting this!
Unfortunately it's not working for me (nothing happens, just displays the special price), how does Magento know to link getCartPrice in the phtml to the attribute cart_price that you created?

Isaac's picture

This should be pulled in by the helper functions:

<?php
$_coreHelper = $this->helper('core');
$_weeeHelper = $this->helper('weee');
$_taxHelper = $this->helper('tax');
/* @var $_coreHelper Mage_Core_Helper_Data */
/* @var $_weeeHelper Mage_Weee_Helper_Data */
/* @var $_taxHelper Mage_Tax_Helper_Data */
$_product = $this->getProduct();
$_id = $_product->getId();
$_weeeSeparator = '';
$_simplePricesTax = ($_taxHelper->displayPriceIncludingTax() || $_taxHelper->displayBothPrices());
$_minimalPriceValue = $_product->getMinimalPrice();
$_minimalPrice = $_taxHelper->getPrice($_product, $_minimalPriceValue, $_simplePricesTax);
?>
Anonymous's picture

How can you change the prices displayed on the homepage and category pages?

Isaac's picture

Apply the same technique, except in the list.phtml template file in the same directory as the price.phtml file. I'll try to post some code later.

Anonymous's picture

Excellent! Thank you. I tried looking at the list.phtml but I can't seem to figure out where to post the code.

Thanks again!

Isaac's picture

I updated the post to include the changes to the list.phtml file. Take a look above and let me know if you have any questions.

Oren's picture

Great tutorial, but I've found myself having to apply this to an Enterprise installation, but it seems the price and list phtml files are different that your demonstration for the Community version. Is there any chance you could comment on how to apply this solution to the default enterprise template?
Thanks.

Isaac's picture

Hey Oren, unfortunately I'm not familiar with the enterprise version of Magento. You might show one of the coders at Magento my blog post and see if they can help you from there.

Krista's picture

Thank you for this article. I've found something similar, but it didn't help me much. Your article was of more help to me.

Traci Kaspar's picture

How did you do the hover thing? That is really nice.

Thanks!

Isaac's picture

Hi Traci,

I simply nested a span with the hover-over content inside another span. By default, the span with the hover-over content is hidden with CSS (i.e. "display: none;" for the span element you want to hide). Then you can use the "span.parent:hover span.child" to set rules for what to do with the parent element is hovered over. One of the CSS rules needs to tell the object to display ("display: block;"). The other rules will define the position, style, etc. to your liking.

Note that this does not work for IE6 without adding extra javascript. Because the hover-over is not an essential feature, I opted to exclude the javascript. IE6 users simply won't see the hover-over, which is an acceptable and graceful degradation.

Traci Kaspar's picture

Additional question - How do I require users to be logged in to view the price in the cart?

Isaac's picture

You could make it so the entire product doesn't appear unless the user is logged in. But other than that, I'm not sure.

surfriderb's picture

I can't seem to get "see sale price in cart" to show up. There wasn't a price.phtml file in my theme folder but I did have it in my base folder. I just copied this file over to my theme.. could this be the problem? I'm using 1.4.1.1

Isaac's picture

You'll need to edit two files, list.phtml and price.html for the multiple product listing view and the individual product view respectively. If you're theme does not contain these files, then your theme is relying on either your theme package's default files (your-theme-package/default) or the base default files as you mentioned. Any files you want to override, copy to your theme in the exact same structure that they exist in base or the default interface. Also, you want to make sure that you don't just specify the theme package you want to use in your site configuration but also the "theme" or interface.

Let me know if you're still have trouble.

R Kirk's picture

Hi - This implementation appears to break the template layout in 1.4.2 using Internet Explorer 7 and 8. It works just perfectly under Chrome and Firefox, but my users are complaining about products affected by this 'see in cart' feature being illegible.

Isaac's picture

Thanks for the post. I've only tested this in 1.4.1.x and before, so there's a slight possibility that there's a problem with 1.4.2.0. But more than likely, I'd guess you're experiencing some CSS issue/conflict. If you send me a link, I'd be glad to take a look.

Gary's picture

Has Anyone tested this with 1.5.1.0 ?
If not any plans of someone updating the code to implement in 1.5.1.0? I tried to implement it on my store but was unable to get it to work correctly.

Isaac's picture

Hi Garry,

Sorry for the slow response. The same process should work in 1.5.1.0. I've tested it in 1.4.2.0 using the 1.5.1.0 base theme code and it works, however, I haven't updated the rest of Magento's files and the database to 1.5.1.0 yet.

Kam's picture

Is it possible to have some selected items special prices being displayed in the cart but some other items showing special price next to the item as well?

Isaac's picture

Kam, yes -- this is how this code is designed. For each product, using the attribute you set up, you determine whether the item shows the special price normally or whether it is only show in the cart.

R Kirk's picture

It will be interesting to see how Magento implements this into their 1.6 release (beta available)

Isaac's picture

Agreed. I haven't taken a look at the Beta yet, but I am interested to see what they do. I imagine the feature will function fairly similarly.

Anonymous's picture

Hi thanks for this post. I am using discounted/group pricing in Magento 1.4.2 and cannot seem to get the cart to display the 'special price' even when the customer sees that price. The cart simply displays the original price. Do you have any ideas how i could solve the problem?

I would be so grateful for your help!

Thanks

Isaac's picture

This seems to be a bug. If you haven't modified any core files and aren't using any significant add-on modules I would recommend checking your theme. Delete all unnecessary files from your theme so it relies on the base files in case they have changed since a previous version of Magento (they often do). As good practice, you should always limit the files in your custom theme to ONLY those that you have modified and let the remaining files rely on the base theme files.

Anonymous's picture

Hi thanks for responding to the earlier question. It seems I found a solution which is currently being tested. Im fairly new to magento so im yet to ascertain that it works. At the moment I would like to do the following:
1. Create a new attribute which is a 'base' price. (This works as in your example)
2. Multiply that price by a given value x and automatically place the result in the "price" attribute field.
3. The 'base price' also becomes the price for a specific category of customers- wholesalers.
4. Display only this base price to the wholesalers i.e. when the wholesalers log in they dont see regular price crossed through and replaced by wholesale price but simply see wholesale price. (optional).

I would be grateful for your help with any/several of these steps.

Thanks in advance!!

Isaac's picture

The functionality you describe would be a great deal more complicated than the MAP pricing functionality discussed in this article. The MAP pricing functionality is easy to implement because you're only changing the displayed price. When you start changing the actual price that is used for an order, you're looking at a lot more complexity and a custom module that overrides core functionality.

John's picture

Thanks for the awesome tutorial. Just started playing around with Magento this afternoon and this was a requirement for a shopping cart I was working on.

Saving $169 is always good :)

Web Design Sheffield's picture

Thanks for this great and interesting article. I really enjoyed the article. It's really useful and informative for me.

RedWolf's picture

Works great!! I was about to upgrade to 1.6 for this feature, but a little bit of work and now I have it in my 1.3.2.4. Thanks!

RedWolf's picture

Spoke too soon. This only works on standard products, but does not work on bundle products. Is there any easy fix?

Isaac's picture

For bundled products, you'll need to adjust the template file here:

/app/design/frontend/YOUR_THEME/SUB_THEME/template/catalog/
product/view/bundle.phtml

RedWolf's picture

That file doesn't exist for me, in either that spot or in the default theme. The only bundle.phtml file I could find was in app\design\frontend\default\default\ template\bundle\catalog\product\view\type\

But it didn't have anything in it that looked right. Just this:

<?php echo $this->getPriceHtml($_product) ?>

<?php echo $this->getChildHtml('bundle_prices') ?>

Thanks for your help Isaac.

Minnie's picture

Can you apply this to the regular pricing? I want to hide the pricing on the front end unless you are logged in. Is this doable without installing apps?

Isaac's picture

Yes, you simply need to insert a PHP if function around the price that checks if the current username is not null. There should be a username variable that you can access, although I'm not sure what it would be off the top of my head.

Hadi Farnoud's picture

Hi Isaac,

I want to show a "VIP price" for registered users only. much like special price but shows only if user is logged in and it's in blue instead of red.

I read a lot of tutorials, seems like I confused myself.

I really appreciate your help in any way possible. feel free to email me if you want.

Isaac's picture

Hi Hadi,

Sorry for the slow response. You may have already solved this by now, but I thought I might answer this in case others have a similar question. Magento 1.7 has this functionality built-in. Alternatively, you can use tier pricing with specific customer groups to achieve largely the same effect. Simply set the tier quantity to 1.

-Isaac

Digitz's picture

Hi Issac...great work by the way!

I have one issue i'm running into...it seems like the homepage "special price" (that im trying to hide using the cart_price attribute is still displaying after applying the updated code in the list.phtml file.

With troubleshooting (changing "special price" label to "special price 44" everywhere to see where it's pulling from...i noticed the homepage grid is getting this from the price.phtml file at around like 390 (shown below)...which is included in the "else" statement for the "getCartPrice() == 1" function, and not the list.phtml. So i cant figure out how to hide this for "cart_price" It seems i can only either hide all "special prices" or none, regardless of the attribute.

The product page works perfectly btw!

<?php if ($_taxHelper->displayBothPrices()): ?>

<?php echo $this->__('Special Price:') ?>

<?php echo $this->helper('tax')->__('Excl. Tax:') ?>
<?php echo $this->getIdSuffix() ?>">
<?php echo $_coreHelper->currency($_finalPrice, true, false) ?>

<?php echo $this->helper('tax')->__('Incl. Tax:') ?>
<?php echo $this->getIdSuffix() ?>">
<?php echo $_coreHelper->currency($_finalPriceInclTax, true, false) ?>

<?php else: ?>

<?php echo $this->__('Special Price:44') ?>
<?php echo $this->getIdSuffix() ?>">
<?php echo $_coreHelper->currency($_finalPrice, true, false) ?>

<?php endif; ?>

Isaac's picture

Digitz,

You're going to want to include the <?php if ($_product->getCartPrice() == 1): ?> logic in both the price.phtml and list.phtml files. It's had to tell from your description, but perhaps you only included that logic in the price.phtml file?

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
The following question helps us prevent spam submissions.