Storefront Elegance theme, add out of stock notice to grid view

Question: Is there a way to keep the product in category view but with text ‘sold’ instead of the price?

With WP e-Commerce you have two options for out of stock products.

1. If you check “I have limited stock for this Product” in the Products screen, you can show a out of stock message on the Single Product page by setting Settings/Store/Presentation tab “Show Stock Availability” to Yes. But this shows no message in Grid view on the products page
2. If you also check “Notify site owner and unpublish this Product if stock runs out” on the Products page AND set Settings/Store/Presentation tab “Show Stock Availability” to No the product will be set to draft and not appear on your site at all when it is out of stock.

This user wants to keep the product displayed but have a message as you would get in option 1 on the Products page and Category pages. So we steal al little code from single products and patch it into the Products page.

You need to modify the theme PHP for this. You will need to maintain these changes in any theme update, so keep a record.
These instructions are for Elegance 1.4.5 the principle should stay the same in newer versions but the line numbers may vary.
This is pretty simple PHP editing, especially if you just cut and paste, so even if you have never done it before jump in, get your feet wet. Remember keep a safe copy of the files somewhere. You can always just restore the originals if you break something. See the notes on editing PHP at the end of this post.

Find the code

So the out of stock message is not included in the products page at all. How do we find the code to display that message? We could hunt the WP e-Commerce docs, we would eventually find it. Easier I think is to find where it is displayed, which is on the single products page. A little hunt inside the single product page code (wpsc-single_product.php) finds some pretty obvious code for checking if something is in stock…

	
<?php if(wpsc_product_has_stock()) : ?>

So lets copy that and include it into wpsc-products_page.php which is the file that displays both the products page and the product category pages.
In wpsc-products_page.php around line 200 find this very long line which basically says if storefront grid view is selected and show price is selected create a div and span containing the price.

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

Code the out of stock message

Now we still want to always show something if that is true, but now we want to add another condition to say if the product is in stock show the price and if not, show the out of stock message.
So we need to put that inside our first if statement from line 200. I am going to take a little time here to explain the code for those new to it who may have some desire to understand what they are doing. If you already know your code jump down to the new code below.

Lets take a look at the structure of that statement. A if statement is made up of 2 parts, the condition and what to do if the condition is true or not. if(condition){do this}, condition in the parentheses () and action in the curly braces {}. In ordinary English our line 200 says…
if(storefront gridview AND show price in gridview are both selected in the Storefront options panel){create some html and display the WP e-Commerce value wpsc_the_product_price in it}

So now we need to add our extra if with else, which is another possible part of an if statement which says what to do if the condition is not true.
if(this is true){do this}else{do this}
We need it to be considered inside the action area of the main line 200 if statement. By putting everything new inside the curly braces of the first if statement it only is considered if that is true. In a sense the first action of our fist condition becomes to consider another condition! In plain English again, and lets break it up on separate lines like we do in code for readability, although it would all work on one line.
if(storefront gridview and show price in gridview are both selected in the Storefront options panel){
   if(we have stock of the product){
      do the original action code to create some html and display the WP e-Commerce value wpsc_the_product_price in it}
   else {
      create some html and write ‘this message’ in it}
}this is the closing curly brace of the original line 200 if statement

So these 6 lines now replaces the original line 200.

	
<?php if ( get_option('storefront_gridview_price') == "true" && get_option('storefront_gridview') == "true") {
							if(wpsc_product_has_stock()) { ?>
							<div class='sft-gridview-price'><span class='sft-gridview-price-text'><?php echo wpsc_the_product_price(); ?></span></div> <?php ;}
                            else { ?>
								<div class='sft-gridview-price'><span class='sft-gridview-price-text'> <?php echo _e('Out of stock', 'storefront'); ?> </span></div><?php ;} 
								}?>

Save the file.
Congratulations, your done.
If you need to change the message just change ‘Out of stock’ to anything you want. It is just text. Wondering what all that echo _e(‘Out of stock’, ‘storefront’) is about? Well you could in fact just write Out of stock there and it would work fine. That extra code makes ‘Out of stock’ available to translation plugins.