WP e-Commerce make $0.00 items say “Free” instead

Posted by on Jul 2, 2012 in Blog, Edge, Original, Storefront Themes, WP e-Commerce | 3 Comments

The question

Is there an option to hide the price when it is $0.00 or change it to say Free?.

Answer

The code below is basically a minor variation from this post which would be a good guide to doing this in the Storefront Themes Elegance theme.

This example is for the Storefront themes Original theme but the principle will be the same in others. If you leave the price of the product at 0.00, it will display “Free”. You can change the message as you see fit. You could also leave the message empty and this would just remove the price.

Update November 15 2012:

I have added the code for doing this in Storefront themes Edge theme as well. The code for that can be found after the first example.

Code

Open wpsc-single_product.php which is in the Original folder (or the folder of any theme you are using). Find this line around line 186 in Original 2.4.1. In other versions even other themes you should be able to locate this, even if it is not exactly the same. If you have never edited PHP see the Tools panel at the end of this post and jump in.
If you have a different theme look for echo wpsc_the_product_price in the same file. 

<span id="product_price_<?php echo wpsc_the_product_id(); ?>" class="pricedisplay"><?php echo wpsc_the_product_price(); ?></span><?php echo __('Price', 'wpsc'); ?>:  <br/>

Replace that line with the code below

<?php if (wpsc_the_product_price() == "$0.00") : ?>
    <span class="zero-price"><?php echo "Free"?></span>
<?php else : ?>
    <?php echo __('Price', 'wpsc'); ?>: <span id="product_price_<?php echo wpsc_the_product_id(); ?>" class="pricedisplay"><?php echo wpsc_the_product_price(); ?></span><br/>
<?php endif; ?>

Watch out, if not using $ as your currency, remember to change that in the code

If you do not the code will not detect a match. For example $0.00 will not match £0.00 and the price will not be removed.

For the Product Grid view

You need to edit wpsc-products_page.php
In Original 2.3.1 you should see this around line 194.

<?php if ( get_option('storefront_gridview') == "true" ) {echo "<div class='sft-gridview-price'><span class='sft-gridview-price-text'>".wpsc_the_product_price()."</span></div>";} ?>

Replace that line with the code below

<?php if (wpsc_the_product_price() == "$0.00") : ?>
						<div class= "sft-gridview-price sft-zero"><span class="sft-gridview-price-text">Free</span></div>
                        <?php else: ?>
                        <div class="sft-gridview-price"><span class="sft-gridview-price-text"><?php echo wpsc_the_product_price() ?></span></div>
						<?php endif; ?>                         
                         <?php } ?>

Some CSS

To add some styling to the ‘Free’ on the single product pages, this should get you started.

.zero-price {
     background: none repeat scroll 0% 0% #FFFFFF;
     color: #FF0000;
     padding: 5px;
}

If you would like the price label in grid view to have a red background when Free use this CSS.

#products_page_container.wrap .sft-zero {
     background: none repeat scroll 0% 0% #FF0000;
}

Remember see the notes at the end for tips and tools for editing CSS and PHP

——————————————————————————————————————————————————————————-

Code for Edge theme

Open wpsc-single_product.php which is in the Edge folder. Find this line around line 120 in Edge 1.1.2. In other versions even other themes you should be able to locate this, even if it is not exactly the same. If you have never edited PHP see the Tools panel at the end of this post and jump in.
If you have a different theme look for echo wpsc_the_product_price in the same file. 

<p class="pricedisplay <?php echo wpsc_the_product_id(); ?>"><?php _e('Price', 'wpsc'); ?>: <span id='product_price_<?php echo wpsc_the_product_id(); ?>' class="currentprice pricedisplay"><b><?php echo wpsc_the_product_price(); ?></b></span></p>

Replace that line with the code below

<?php if (wpsc_the_product_price() == "$0.00") : ?>
    <span class="zero-price"><?php echo "Free"?></span>
<?php else : ?>
    <?php echo __('Price', 'wpsc'); ?>: <span id="product_price_<?php echo wpsc_the_product_id(); ?>" class="pricedisplay"><?php echo wpsc_the_product_price(); ?></span><br/>
<?php endif; ?>

Watch out, if not using $ as your currency, remember to change that in the code

If you do not the code will not detect a match. For example $0.00 will not match £0.00 and the price will not be removed.

For the Product Grid view

You need to edit wpsc-products_page.php
In Edge 1.1.2 approximate lines 163 and 169 are both this

<div class="gridprice"><?php echo wpsc_the_product_price(get_option('wpsc_hide_decimals')); ?></div>

You need to replace each one with the code below

<?php if (wpsc_the_product_price() == "$0.00") : ?>
                        <div class= "gridprice sft-zero"><span class="sft-gridview-price-text">Free</span></div>
                        <?php else: ?>
                        <div class="gridprice"><span class="sft-gridview-price-text"><?php echo wpsc_the_product_price() ?></span></div>
                        <?php endif; ?>

remember replace EACH line, 163 and 169 with the code above.

Some CSS

To add some styling to the ‘Free’ on the single product pages, this should get you started.

.zero-price {
     background: none repeat scroll 0% 0% #FFFFFF;
     color: #FF0000;
     padding: 5px;
}

If you would like the price label in grid view to have a red background when Free use this CSS.

#default_products_page_container.wrap .sft-zero{
     background: none repeat scroll 0% 0% #FF0000;
}

Tools:

You may edit your PHP outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/

Custom CSS:

This code belongs in your Custom CSS file. Don’t have a custom.css? There is an empty one for you to use in the theme folder? You can edit custom.css by going to Appearance/Editor and choosing custom.css from the list of files.
You can also just paste this code in the “Custom CSS” box in the Storefront options panel on the Style tab if you will not be making many changes, but it is a bit hard to work with there.

3 Comments

  1. Sv
    January 14, 2015

    Hi! i’m from Argentine. Sorry for my Fool English
    I bouht The Lookshop Theme that include WpEcommerce
    WP version 4.1
    WpEcommerse v 3.9.1
    I need HIDE the product Prices in all template.
    May be can I replace 0,00 $ for a text, for example “Call Now”
    In the individual product I succeeded, but on the grid of products, still appears 0,00 under each product. Can you help me please? THANKS A LOT!!!
    Jorge

    Reply
  2. emy
    January 9, 2013

    …another question!
    All work fine… but if I want hide “Add to cart” button? How I can do?

    Reply
  3. Kia
    October 21, 2012

    How about using ‘strpos’ to circumvent the currency symbol? Some people live outside of the $ zones ;O)

    Reply

Leave a Reply