Yesterday we learned how to print out products into a slider so you can click into the product page, but didn’t really explain how the product page itself is created.  There are two approaches you can take when creating your FoxyPress store.

1. Use the built in functionality delivered with FoxyPress.  This approach will allow you to use CSS styles on the HTML that is printed out for your products.  More information on how to style this HTML can be found here.  This is a good approach if you are unfamiliar with custom templates or code.
2. Create a custom product template and tell WordPress to use this for all FoxyPress products/post types.  If you are a developer, this second approach is probably for you!

I want to go over the second approach today as it is by far the most useful for developers creating custom designed/functioning stores.   Depending on all the functionality that your store might contain, you might need to add additional portions of code.  We’ve decided to do something pretty basic and is exactly what we’ve done on the FoxyPress demo store.  Now you won’t have to wonder, “Hmm, how’d they do that??” anymore!  All demo/source files will be provided at the end of the tutorial.

The first thing you will want to do is create a new PHP file, we’ve named ours single-foxypress_product.php, and drop it in your theme folder in WordPress.  Now, I’ll go through the critical pieces of code you will need.

WordPress Post Loop – you will want to put all of product related code in this loop so you have access to all of the product information.

<?php 
	global $post;
	while (have_posts()) : the_post();			
    endwhile;
?>

There are two critical methods you will want to call when creating your own product template. These will take care of building the form and any hidden attributes that might be necessary. Any product information, such as name, price, options, etc, should go between the GetProductFormStart and GetProductFormEnd. See below.

<?php echo(foxypress_GetProductFormStart($post->ID));?>
<!-- any visual information about your product -->
<?php echo(foxypress_GetProductFormEnd());?>

Now that we have the form code generated, we can move on to presentation. Printing a product’s information is easy. We have several helper functions that will make it easy for you to get the information on your page. Here is the chunk of code we’re using. *update* optimized for use with HMAC support from Brett/FoxyCart.

<?php
	$productOutput = foxypress_GetProductFormStart($post->ID, "foxypress_" . $post->ID, false)
		. "<h1>" . $product['name'] . "</h1>"
		. "<h2>" . foxypress_FormatCurrency(foxypress_GetActualPrice($product['price'], $product['sale_price'], $product['sale_start'], $product['sale_end'])) . "</h2>" 
		. $product['description'] . "<br /><br />"
		. foxypress_BuildOptionList($post->ID, "foxypress_" . $post->ID, $product['quantity_max']) . "<br />"
		. "<div class=\"product_quantity_wrapper\">
			Quantity: <input type=\"text\" name=\"quantity\" value=\"1\" class=\"product_quantity\" />
		</div><br />"
		.((foxypress_CanAddToCart($post->ID,$product['quantity'])) 													? "<input type=\"submit\" value=\"Add to Cart\" class=\"add_to_cart\" /> " 
		: "<div class=\"foxypress_item_submit_detail outofstock\">Sorry, we are sold out of this product.</div>")
		. foxypress_GetProductFormEnd();
		if(foxypress_HasCartValidation())	{
			$productOutput = FoxyCart_Helper::fc_hash_html($productOutput);	
		}
		echo($productOutput);								
?>

The last thing we really need to worry about for a basic product template is how to display images. Your product has featured images and regular images. The code below will allow you to print off those images accordingly.

<?php
	$ItemImage = foxypress_GetMainInventoryImage($post->ID);	
	if($ItemImage == ""){
		echo("<img src=\"" . INVENTORY_IMAGE_DIR . "/" . INVENTORY_DEFAULT_IMAGE . "\" id=\"foxypress_main_item_image\" />");
	}else{
		echo("<img src=\"" . $ItemImage . "\" id=\"foxypress_main_item_image\"/>");
		$ItemThumbs = "";
		if(!empty($product['images']) && count($product['images']) > 1){
			$ItemThumbs = "<ul class=\"foxypress_item_image_thumbs_detail\">";
			$FeaturedImage = "";
			//check to see if we have a featured image, if we do, use that as the first thumb
			if($product['featured_image'] != ""){		
				$FeaturedImage = $product['featured_image']['name'];				
				$ItemThumbs .= "<li><a href=\"javascript:ToggleItemImage('" . $FeaturedImage . "');\" ><img src=\"" . $FeaturedImage . "\" /></a></li>";
			}		
			//loop through all the images
			foreach($product['images'] as $li)	{
				//make sure were not repeating the featured image
				if($FeaturedImage != $li['name']){
					$ItemThumbs .= "<li><a href=\"javascript:ToggleItemImage('" . $li['name'] . "');\" ><img src=\"" . $li['name'] . "\" /></a></li>";	
				}
			}
			$ItemThumbs .= "</ul>";
		}
		echo($ItemThumbs);
	}
?>

So now, the crucial part…how do we tell WordPress to use this custom template? Simple!

define('FOXYPRESS_PRODUCT_TEMPLATE_PATH', dirname(__FILE__) . '/wp-content/themes/yourthemename/single-foxypress_product.php');

This should give you a basic idea on how to create a custom product template. There are a few additional methods in the source files you might find useful as well.  We are creating additional helper methods that can be found here, but if you have any requests for some that you think would make your life easier, please comment here or in the forum! We’d love to add them to FoxyPress.

Demo link
Source Files