In the Storefront Themes, Elegance theme the thumbnails below the single product page image are always square. This is good in some ways because if you have uploaded images of varying shapes to your product gallery the layout will still be neat. If you have followed my mantra of uploading all of your images the same aspect ratio then you might wish that the gallery thumbnails were the same aspect ratio as your uploaded images. This can be achieved by bringing the image height into the calculations as well using the code below.

Solution

You need to bring the image height into play as I said. We add the height in and then calculate the gallery height using that. You need to edit wpsc-single_product.php which is in the Elegance theme folder. If you have never edited PHP this can be done with simple cut and paste, so jump in and get your feet wet. See the editing PHP tools at the end of this post. remember to keep a safe copy of your original file, you can always swap back if you have a problem.
So open wpsc-single_product.php and find on or around line 48 you should see

$featured_image = get_post_thumbnail_id($id);

Scroll down and find this around line line 71

</div><!-- /END SINGLE PRODUCT GALLERY -->

If you replace those 2 lines and everything in between with the block of code below you will be done. If you want to know a bit more about what changed and what is happening read on below the code.

$featured_image = get_post_thumbnail_id($id);
							$args = array( 'post_type' => 'attachment', 'orderby' => 'menu_order', 'order' => 'ASC', 'post_mime_type' => 'image' ,'offset' => '1' ,'post_status' => null, 'post_parent' => $post->ID, 'exclude' => $featured_image,'numberposts' => 999);
							$attachments = get_posts($args);
							$numposts = count($attachments);
							$roundheight = round($numposts / 2);
							$thumbwidth = $image_width / 2 - 12;
							$thumbheight = $image_height / 2;
							$galleryheight = $roundheight * $thumbheight + 85 + $image_height;
							if ($attachments) {$i = 0;
							foreach ( $attachments as $attachment ) {$i++;
							$thumbnail = wp_get_attachment_url( $attachment->ID , false );
							$image = vt_resize('', $thumbnail, $thumbwidth, $thumbheight, true);
							?>
            <style>
#sft-single-product-gallery img.gallery {max-width:<?php echo $thumbwidth;?>px!important;}
</style>
            <a rel="<?php echo str_replace(array(" ", '"',"'", '&quot;','&#039;'), array("_", "", "", "",''), wpsc_the_product_title()); ?>" class="thickbox" href="<?php echo wp_get_attachment_url( $attachment->ID , false ); ?>"><img class="gallery" src="<?php echo $image['url']; ?>" alt="<?php the_title(); ?>" width="<?php echo $thumbwidth;?>" height="<?php echo $thumbwidth;?>" border="0" /></a>
            <?php	}
							} ?>
            <?php $imagecolheight = $thumbwidth * $i / 2 + $image_height + 50;?>
            <style>
								div.single_product_display div.textcol {min-height:<?php echo $galleryheight;?>px!important;}
								<?php if ($numposts > 1) {?>div.single_product_display {min-height:<?php echo $galleryheight + 90;?>px!important;}<?php } ?>
							</style>
            <div class="clear"></div>
          </div>
          <!-- /END SINGLE PRODUCT GALLERY -->

Line 54.
Adds a thumbheight variable which stores the image height divided by 2, just as thumbwidth already does for the width. Yes obviously you could fiddle with these numbers and get 3 or 4 thumbnails per row instead of 2 below your main image. Some margin and padding adjustments may be required.
Line 55.
Use the height to calculate the height of the whole gallery instead of the width as it is by default. It is OK to use the width to do height in the default setup because the thumbnails are square.
Line 59.
Adds the height into the code that resizes the images into thumbnails, replacing one of the width variables. This code actually generates your thumbnails.
Line 69.
This is actually more of a bug fix. galleryheight is added here to stop the thumbnail gallery overflowing the container div into the footer. This sets the container to be tall enough to contain image and gallery.

Thats it, if you have done it right you should have proportional non square thumbnails and they should stay nicely in the content area and out of the footer.

Just fix the overflow and keep square thumbs

If you are happy with square thumbnails but have the problem mentioned earlier of the thumbnails overflowing into the footer, try this to fix it . Do not make any of the changes above. Find this line at or about 67

div.single_product_display div.textcol {min-height:<?php echo $imagecolheight;?>px!important;}

replace it with line 69 from the big block of code above.

I had a question recently about why a coupon was not being processed at the PayPal end. It turns out that PayPal will not process a $0.00 sale. If you have an item for $10.00 and a discount coupon for $10.00 the coupon is processed on the WP e-Commerce checkout page showing a total of $0.00, but when the user gets to PayPal the coupon is totally ignored and the price is $10.00. Not good!
If you reduce that coupon to $9.99 the sale would go through with a total of $0.01. That is not a very elegant solution. Many sites now have partnerships with coupon sale sites, these third party sites sell coupons which the user then expects to use to purchase at no cost. Some people have tried using the Test Gateway but this is only going to work if all of your sales are $0.00. You still want to send customers who have a cash balance to pay on to PayPal when they click Purchase.

Solution

Thanks to getShopped user dhtbrowne who supplied this solution http://getshopped.org/forums/topic/how-to-stop-free-products-redirecting-to-gateway/#post-268526

I will reproduce his code just as he wrote it and add a little explanation as things can be hard to find on the getShopped forums and even have a habit of disappearing completely. I have tested this with Storefront Themes, Elegance theme version 1.4.5, WordPress 3.3.1 and WP e-Commerce 3.8.7.6.2. It should work for most themes and hopefully newer WP e-Commerce versions. Please leave a comment if you test it in higher WP e-Commerce versions.
The following solution will intercept any $0 purchase and the “wpsc_purchlog_edit_status()” changes the order status to payment accepted, sends out all the necessary emails and deactivates coupons if they are set to use once.

STEP 1.
First you need to make a page that says thank you, for users to be redirected to after they click purchase. Get the Page ID of the thank you page. To do this open it in WordPress for editing and look in the URL bar of your browser you will see a URL ending in something like this.
wp-admin/post.php?post=492&action=edit
You need that number, in my case 492, it is the ID of the thank you page.

STEP 2.
Here you need to edit a PHP file it is very easy, just pasting in some code, so you can avoid the whole code editor thing if you want and do this in WordPress. Go to Appearance/Editor, find functions.php on the file list and open it. Right BEFORE the very last ?> paste this code and change the 492 to the ID of your thank you page. When done make sure you have no blank space or lines after that final ?>

add_action('wpsc_submit_checkout', 'free_coupon_test');
function free_coupon_test($order_info) {
global $wpdb;
$purchaseID = $order_info['purchase_log_id'];
$rows = $wpdb->get_results("SELECT discount_data, totalprice FROM " . $wpdb->prefix . "wpsc_purchase_logs WHERE id=$purchaseID LIMIT 1");
require_once(ABSPATH.'/wp-content/plugins/wp-e-commerce/wpsc-admin/ajax-and-init.php');
if ($rows[0]->totalprice == 0 && !$rows[0]->discount_data == '') {
wpsc_purchlog_edit_status($purchaseID, '3');
header("Location: " . get_permalink(492));
die();
}
}

Remember change the 492 to your thank you pages ID!

Thats it, if you have done it right any $0 purchase should redirect to your thank you page. You should receive a purchase log and the customer receives a thank you receipt. To check it, try buying something yourself for $0 so that you get both emails.

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.

STEP 1
To avoid issues implementing this I suggest a couple of changes. In the code to add to functions.php change the class name to avoid any clash with WP e-Commerce pagination
For example `class=\”pagination-search\`
STEP 2
Then change all the .pagination in the CSS to .pagination-search
STEP 3
Not a change just the location
The last 3 lines of search.php in the Mylo folder should be

</div>

</div><!-- end Container 12 -->

<?php get_footer(); ?>

Put the code from step 3 right above those 3 lines

*********************

That will get you pagination. It will be one post per page as your blog is set. To return a certain number of results per page ignoring the reading setting you need to add this line of code in 2 places in search.php
This is the line, change the number to what you want

query_posts("$query_string . '&posts_per_page=2'");

Put it after this line, which is around 26

query_posts($query_string . "&post_type=wpsc-product" );

and after this line which is around line 81

query_posts($query_string . "&post_type=post");

Just to be clear you will end up with something that looks like this each time except for post_type=post or wpsc-product

<?php
		global $query_string; // grab the search query
                query_posts($query_string . "&post_type=post");
		query_posts("$query_string . '&posts_per_page=2'");
		?>
		<?php if (have_posts()) : ?>

Creating the sidebar

All widget areas are called sidebars whether on the side or not.
You will be looking for the code that registers the existing sidebars, it will look like this

if ( function_exists('register_sidebar') )

Note that in most themes you will find this code in functions.php

In the Gridport theme folder open ‘theme-functions.php’. Find the code below. Starting around around line 545 you should find this which registers the last of the 4 footer widget areas.

if ( function_exists('register_sidebar') )

    register_sidebar(array(

    	'name'=>'Footer 4',

        'before_widget' => '',

        'after_widget' => '',

        'before_title' => '<h4>',

        'after_title' => '</h4>',

    ));

Copy all of that block and paste a copy right below it.
Change ‘Footer 4′ to ‘Header spot’
Save the file.
Congratulations, you have created a new sidebar! Go to the Appearance/Widgets area and you should see a new panel titled Header spot. You can add widgets but at this stage they will not appear on your site.

Now you need to add the sidebar to the theme

Just to be clear again, these instructions are for adding a sidebar to the header of the Gridport theme. For other themes and locations the principals are the same.

So in Gridport theme folder open header.php.and find the highlighted line around line 75. Add the rest of the code below right after line 75 as shown

</div><!-- end of header-left -->
<div class="clear"></div>
<div id="header-spot">
<?php if ( !function_exists('dynamic_sidebar') ||
           !dynamic_sidebar('Header spot') ) : ?>
  This is where the Header spot Sidebar appears, This will be displayed only if the sidebar is empty
<?php endif; ?></div>
<div class="clear"></div>

Save.
You will now see that line of text “This is where the Header spot appears….” in your site. Remove that line if you want nothing to appear when there are no widgets.
Go to Appearance/Widgets in WordPress .
Add a widget to your new “Header spot” widget area. Add 2 or 3 if you like.

<?php get_header(); ?>

You can then style it with the id in the code using CSS such as

#header-spot{
width:30%;
height:200px;
display:block;
background:#666666;
}

Why did you call it Header spot? that’s a strange name.

Ok now there is one more bit which is optional. The original request for help with this was from someone who wanted to add designed content to the header, not just a calendar or some other basic widget.
If you want to have really good control over what appears there, rather than just a simple text widget, I suggest you install the “spots” plugin
This will give you a custom post type you can add to the area as a widget.
You will get a full editing page just like posts/pages/products for ‘spots’, You can have text, images etc all with the full wysywig editor. You then assign a spot to a widget and add it to the Header Spot sidebar you just created. This way you can easily create new posts for the header, keep your old ones etc. Want to change the header content? Just drag the existing spot widget out of the widget area, add a new one and assign a different spot post.
Get the ‘Spots’ plugin by searching “spots” in the plugins page, it is By Robert O’Rourke.
You can read more about Spots at the interconnect site. There is another post for developers

Storefront themes Edge theme has two possible home page layouts. The Homepage #2 Template has a grid area below the slider titled “Latest Products”. This displays a grid of thumbnails showing, you guessed it, the most recently added products. Max 2 rows of 3 thumbnails. The problem is these are hard coded to be 140×140 pixels which can cause some pretty ugly cropping in a high visibility area if your product images are not square. So how to change this? Luckily this is easy.

Locate the home_template.php file which is in Edge theme folder. Make a safe copy somewhere in case you have problems. Really this one is so easy you could just do the edit by going to Appearance/Editor in WordPress, and clicking home_template.php on the file list.
Around line 89 in Edge 1.0.5 you will find two numbers that set the width and height for these thumbnails. I have included enough code so you can find the correct section. The line numbers may vary slightly depending on your version.

		$width = '140';

		$height = '140';

	$latest_products = get_posts( array(
		'post_type'   => 'wpsc-product',

Change the numbers to suit your product images. You can use the handy online aspect ratio calculator to work out the size. I suggest you stick with 140 wide and adjust the height. Web page layout is more flexible for height changes than width. For example if your single product page images are 300 wide x 400 high, to retain the same aspect ratio and keep the width of 140 pixels, you would use a height of 187 pixels.

The thumbnails will actually be regenerated at the new size when you reload the page, not just stretched by CSS!

Hi this is the very beginning of an article on translating Storefront Themes e-Commerce themes. I will be adding more detail and screenshots to help soon. I will also start a collection of translated files for download.

Volunteer

Help out the Storefront community. If you have the skills in your language please volunteer to create a file for one or more themes via the contact form on this site. Most of theme ar every simple with less than 40 text strings to translate. You can take a file that is already translated and translate it to a new language then save with the correct name for the new language.

Instructions

These instructions refer to Gridport Theme but the process is exactly the same for all Storefront themes. Hopefully when updates are released the code change to functions.php will be included.

Your theme does not include many text strings. Most of the things like buttons are handled by the WP e-Commerce plugin. What buttons etc are not translating?
It does have some parts that need translating. I have put up some .po (language) files for translation here.
1.
make a new folder under the theme folder called “lang” For example…
wp-content/themes/storefront-gridport-1.0.6/lang

2.
You can use the free program PoEdit which works on macs and Pc’s to translate your file
You need to translate then save to the lang folder (or save and copy there) The program will make a .po and .mo file when you save. The .mo is the one that is actually read by WordPress. You need to name your file with the right language and country code. The not translated file I am supplying is named for French. Just change to the right name for your language. You can find the country and language codes here.
Language codes
Country codes

There is some information on translating with PoEdit here with screen shots. You do not need to worry about the PHP code etc in the first part of the article. Just Step 5.

3.
You also need to add a function to the themes functions.php file.

In the theme folder find functions.php and open it for editing. You can do this by going to Appearance/Editor and opening it from the file list as the change is very simple. Right BEFORE the very last line which is ?>
add this

/* Make Gridport available for translation.
	 * Translations can be added to the /lang/ directory.
	 */
	load_theme_textdomain( 'storefront', TEMPLATEPATH . '/lang' );

Make sure you have no blank lines or spaces at the end of the file and save.

In your site you may need to change your wp-config.php, which is in your WordPress install root directory file, to state your language It is probably already there if you have other translations working. Below is the line you change with the codes for French added.
You probably already know your countries codes.

define (‘WPLANG’, ‘fr_FR’);

There may still be some small issues with the translation files, I am not sure about some of the plural translation codes, it should be close. Let me know if you see any problems. If you translate it please get in touch via http://gasolicious.com/contact/
I will try and build up a collection of translated .po files for different languages for all of the Storefront themes. If you are really good with languages please help by volunteering to translate some other themes .po files

Translation files

Gridport theme version 1.0.6. Not translated.

Echo theme version 1.4.1 French translation

Storefronts Echo theme is designed to be responsive as the current hip jargon goes. That is to say the layout changes to adapt to different devices and screen sizes. Designing for small screens, meaning mobile devices means juggling various priorities. When Echo was first released it only supported one level of menu, which seemed like a reasonable thing for working on mobile devices. Still people wanted multiple level menu support, so it was added. Then came the inevitable “why does my multiple level menu go off the screen.” Well obviously because the screen is very small is the answer, but what to do about it?

This may be a reasonable solution. I have yet to subject it to testing. It will do no harm and is easily removed, so give it a try, let me know in the comments if it works. As the title says this will require two components, a plugin and some code. Three if you want to count the PHP and CSS code as separate items! This is quite easy even if you have never edited PHP before.

First the plugin

You will need to install the JQuery Accordion Menu Widget. Quite a mouthful. You can install from the WordPress plugins page as normal. Search for it by that exact name in the WordPress plugins page. You have the right one if it is made by Lee Chestnutt.
For information on plugin installation, parameters and usage see the plugin makers site.

OK it is installed, now what?

So yet again it is time to make a little PHP change to add some functionality. One extremely simple PHP edit. If you have not done this before see the note “Tools” at the bottom of this post.

Locate the header.php file which is in Echo theme folder. Make a safe copy somewhere in case you have problems.
Around line 98 in Echo 1.4.1 you will find a lot of divs being closed. I have included enough code so you can find the correct section. The line may vary slightly depending on your version. Find the right closing div, in this case line 98.

				<?php get_search_form(); ?>
				</div>
			<?php } ?>
			<div class="clear"></div>
			</div>
		</div>
		</div>
		<div class="clear"></div>
</div>
<div id="main">

Make a blank line after it and add the line of code highlighted as line 99 below. I have included the block of code from above to be clear. You are adding just the one highlighted line.

<?php get_search_form(); ?>
				</div>
			<?php } ?>
			<div class="clear"></div>
			</div>
		</div>
                <div id="mobile-menu"><?php echo do_shortcode('[dcwp-jquery-accordion menu="MyMenu" save="true" expand="true" animation="fast" skin="graphite"]'); ?></div>
		</div>
		<div class="clear"></div>
</div>
<div id="main">

This adds the JQuery Accordion Menu to the theme. You must substitute the name of your WordPress custom menu for “MyMenu” in the code above. You could have two custom menus in WordPress and choose to display a different one in the code above for small screens and another on larger screens.
You will notice several options after the menu name.

save=”true”

Setting this allows the menu to remember its open/close state when browsing to a new page. It requires cookies. This way when a top level menu item is clicked the site will navigate to that page but keep the menu open. Remember mobile devices do not support hover. As I mentioned you could have a different menu for this by setting up a second menu in WordPress. You could avoid the page change when a top level item is clicked to reveal the sub menu by setting up non-navigating clickable top level items. Make a custom menu item and use the # tag as the menu URL. See my custom menu post video.

animation=”fast”

The speed at which the menu will open/close, your options are slow/normal/fast

skin=”graphite”

This is the CSS style. Graphite matches Echo very nicely. You can of course customize it with extra CSS or even write your own. The built in options are black/blue/clean/demo/graphite/grey

You can control several more options, these are I believe the best settings for the menu in this situation.

Style it you said?

Well actually we will not just style it with CSS we will control it as well. The menu has been added in a div with id “mobile-menu” Using media queries in CSS we can turn it on and off according to the size of the users screen. What size you use exactly is up to you, but below I am supplying some options. One would work well on iphone1, 2 and 3 (320 × 480 pixels), the other would include the menu on iphone 4 and 4S (640 × 960) as well, this may even include some small and old computers. For more on CSS Media Queries read this article, also searching will turn up lots of information.

I decided to keep the Cart $0.00 value display from the themes menu. Remember to show the cart in the menu you need to go to Storefront Options Panel/Navigation Tab and check “Show cart total tab in navigation?” As I was keeping that bar I decided also to do away with the free floating mobile search of the theme and retain the regular menu bar search on small screens. There is plenty of room for it with all of the normal menu items removed. Again you must have Search turned on in Storefront Options Panel/Navigation Tab.

The CSS code can be added to your custom.css file if you have one, or if you do not have much CSS just add it to the Storefront Options Panel/Style Tab Custom CSS box.

Under 540 will cover iPhone 1, 2 and 3 in both landscape and portrait mode

/*if screen is below 540 wide*/
@media handheld, only screen and (max-width: 540px) {
#nav{display:none;}/*hide the regular menu*/
.mobilesearch{display:none !important;}/*hide the the themes mobile search*/
.navsearch{display:block !important;}/*show the regular search in theme menu*/
}
/*over 540 pixels wide*/
@media handheld, only screen and (min-width: 541px) {
#mobile-menu{display:none;}/*hide the JQuery menu*/
}

Change the numbers to 767 and 768 to make this work on iPhones up to the 4S in portrait mode. If you want to include landscape mode you will need to go with 960 and 961 but this will include quite a few computers.

OK it is controlled now how about some style?

You can style the menu, I am not going to get into all of the CSS here. If you are not happy with any of the inbuilt styles you need to learn some CSS and get to work. I did think one basic change was worth making. Adding the CSS below will make the height of the Accordion menu more closely match the height of the regular Echo menu. Be aware that the background of the Accordion menu is images. You would need to download the appropriate png file and alter it to change the color. In the case of the graphite style it is in the plugin folder skins/images/bg_black.png.

You must substitute the name of your menu in place of MyMenu, the plugin creates this class which includes your menus name. Watch out as the CSS is case sensitive. Although the custom menu is called MyMenu in the WordPress backend the plugin will write the class to the page all in lowercase. Use the real name MyMenu and it will not work.

/*set height of menu items*/
.menu-mymenu-container {
  line-height:30px;
margin:bottom:25px;
}
/*add a little space belwo menu if you like it */
#mobile-menu {
     margin-bottom: 25px;
}

“Is there was a way to display the price of each variation next to it in the drop down menu, that would be great?”

I actually thought this would be quite difficult and involve hacking on the core plugin files. I hunted around in the plugin files without any luck. Then I took a look at the single product page and realized it was really easy and could be accomplished in the theme. The instructions below are specifically for the Storefront Themes Echo theme, but should work with most WP e-Commerce themes. The line numbers will of course vary but the code should be very similar even identical.

Locate the wpsc-single_product.php file which is in the Echo theme folder. Make a safe copy somewhere in case you have problems. If you have never edited PHP before don’t worry this edit is a simple cut and paste, jump in! See the note at the end for good free tools to do this.

Find the code highlighted below. The example is from Echo version 1.4.1, you should be able to find it easily in any version.

										<?php /** the variation HTML and loop */?>
										<td class="col2"><select class="wpsc_select_variation" name="variation[<?php echo wpsc_vargrp_id(); ?>]" id="<?php echo wpsc_vargrp_form_id(); ?>">
										<?php while (wpsc_have_variations()) : wpsc_the_variation(); ?>
											<option value="<?php echo wpsc_the_variation_id(); ?>" <?php echo wpsc_the_variation_out_of_stock(); ?>><?php echo wpsc_the_variation_name(); ?></option>
										<?php endwhile; ?>
										</select></td></tr>
									<?php endwhile; ?>

You just need to add space colon space after the variation name for looks and then the variable for the variation price. The change is to line 134, below is the new line you can find the change by looking for the colon, the change is remarkably simple. You can just copy and paste this line to replace the entire existing line 134.

<option value="<?php echo wpsc_the_variation_id(); ?>" <?php echo wpsc_the_variation_out_of_stock(); ?>><?php echo wpsc_the_variation_name(); ?> : <?php echo wpsc_the_variation_price(); ?></option>

Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript that renders them on your Web site. Cufón allows web developers to use non standard web fonts on their sites without worrying if the end user has that font on their computer.

You can make your own Cufón fonts or download some ready made ones.
Make your own Cufón fonts, it is super easy.
Get some already Cufónized fonts here.

First you should consider do you even need one?
Maybe you could just use a standard web font and avoid all of this, what are the standard fonts? Read 16 gorgeous web fonts.

You said it was super easy, for you maybe, how do I make one?!

You need to know what character sets are. The basic Character set for English is known as Latin.
Then you have…
Latin extended supplement, or often just called Latin Extended
Latin Extended A
Latin Extended B
Latin Extended C
Latin Extended D
Greek Extended
Cyrillic Supplement
Cyrillic Extended-A
Cyrillic Extended-B

These are the ones that cover most European languages. Remember not all fonts contain all characters.

First make sure you have your font on your local computer, you need to have the font to make a cufon version. There are lots of font sites where you can download fonts, many are free. Check to see if it has the characters you want. Different operating systems have different ways of viewing all of the characters in a font. Or just try typing the characters into a word processing program in that font. Do they work? If they do you are good to go. If not search the web, see if you can find a version with a more complete character set.

Making the font

The next step is to make the cufon font. Go to the cufon font site.

On that page Section 1. “Select the font you’d like to use”

You will be asked to upload your font and make various choices.
First select the regular font and upload from your computer. Then decide if you need bold, italic etc versions and upload if you do. If you will not, leave them out and keep the file smaller.
Ignore the text box. Confirm you have a licence by checking the box, you do right!

Section 2. “Include the following glyphs (if available)”

Select what Character sets you need to include. Do not include All, it will be a really big file which your users will not appreciate.
You can select Basic Latin to get all of the basic Uppercase, Lowercase, Numerals, Punctuation. Then you need to choose what extended character sets you want. How do you know? Check out these references click a set to see what characters it includes. Check only the sets you need. If it is really only a couple of extra characters you need you can just select basic Latin and then enter those extra characters in the “add also these single characters ” box

Section 3. “Security”

Add your domain to limit the file for use there.

Section 4. “Performance and file size”

Leave it at defaults.

Section 5. “Customization (for 3rd-party scripts only)”

Leave it default which is…
Cufon.registerFont

Section 6. “Terms”

Check the box to Acknowledge.

Now you have done all of that click the “Let’s do this!” button. There will be a short wait and then a file will download to your computer. It will have the file extension .js. This is your cufon font file. I told you it was easy.

Add it to your theme. This is a a whole different topic. Some stuff to get you started can be found here which is specific to Storefronts Gridport Theme. It does give you a general idea though and includes links to more information. If you want to test your new font using a lot of the special characters at once you can copy and paste whole character sets, drop them into a post and see if the characters render. You may need to wrap them in a heading tag to test in a Storefront theme as they only use cufon in headings.