While the WordPress Shopping Cart plugin is far from a comprehensive online store, it still provides an easy and cheap way to sell products online. Although the stock implementation might work well for a simple product catalog, many users will need to customize the product listing based on product settings. In order to accomplish this, the cart as a feature called “Custom Meta” variables; we will explore how to use these variables to change the way products are displayed.
First a clarification – the word “meta”, as used in the WordPress Shopping Cart (WPSC) plugin, has nothing to do with actual HTML Meta tags that are often used for Search Engine Optimization. In terms of WPSC, meta variables are simply addition information that is added to the product in a non-structured format. Each meta variable has two attributes: a name and a value.
In our example in this article, we will implement the WPSC plugin for an electronics store. In this store, certain parts may have a datasheet that we want to link from the product listing. The datasheets contain details and the electrical components, such as pin layout, tolerances, and schematics. Some products will have a datasheet, while others will not.
The first step will be to upload the datasheets to the web server, and then add a product meta variables to link the datasheet PDF from the product. On the Edit Product page in WPSC, scroll to the bottom and add a “Custom Meta” variable under Advanced Settings. Let’s call the meta variable name “datasheet”, enter the full URL of the datasheet in the meta value field, and save. For any other products that have datasheets, the variable name should remain “datasheet”, while the value should be customized for that particular product.
Next, we will need to display the datasheet button on the product listing page. In order to do this, go into the Theme Editor, and edit the custom “wpsc-products_page.php” file. This page controls the store product listing. Add the following custom PHP function on top, which will pull the meta variable data from the database:
function get_product_meta_var($var){
if (wpsc_have_custom_meta()){
while ( wpsc_have_custom_meta() ){
wpsc_the_custom_meta();
if(wpsc_custom_meta_name()==$var) return wpsc_custom_meta_value();
}
}
return '';
}
This function uses WPSC internal commands to scroll through the meta variables for the product, and find the matching value for that variable name.
Finally, in the body section of the product listing, add the link to the datasheet if it exists:
<?php
$datasheet_url = get_product_meta_var('datasheet');
if($datasheet_url) { ?><a href="<?=htmlspecialchars_decode($datasheet_url)?>">Datasheet</a><? }
?>
The first line pulls the datasheet value from the meta tags, and then next line displays the datasheet link if it exists for that product.
Using this technique, it is possible to customize the WordPress Shopping Cart layout for different products and product configurations. Although this technique works, it is still prone to human error in the per-product variable names. A better solution would be to limit the variable names to a predefined list of values, however this unfortunately is not available in the current version of WPSC.
Written by Andrew Palczewski
About the Author
Andrew Palczewski is CEO of apHarmony, a Chicago software development company. He holds a Master's degree in Computer Engineering from the University of Illinois at Urbana-Champaign and has over ten years' experience in managing development of software projects.
Google+
