WPEC 3.8 Tips & Tricks

Hey guys!
In this tips & tricks post, I want to share with you things that I’ve learn from building themes for WPEC 3.8. I will be updating this post as time goes so check back often! Here I’ve built a small table of contents below so you can quickly jump to the section you’re interested in. Let’s take a look! (written as of WPEC 3.8.1)

Remove “From” Text on Pricing

Ok so you want to remove the “From” text on the pricing. Here is how you do it. Open up your functions.php inside your active WP theme and add the following line somewhere.

// remove "from" on pricing
function wpsc_remove_from_for_variations($from) {
	return '';


Remove WPEC Dynamically Loaded Script and CSS

As you may or may not know, by default WPEC loads a dynamic CSS and a dynamic javascript file. For some, this has caused tremendous load time increase as much as 5 seconds longer. Now you wonder why they were loaded in the first place. To explain that in short, it was loaded so it can account for variable changes in the product display. But not everyone will need this feature but BE SURE you really don’t need it. I am not going to list all the function it does but if you would like to know, go ahead and open up the theme.functions.php file in the wp-e-commerce/wpsc-includes/ folder and scroll to around line 673.

Now on to removing them. Open up your function.php file of your active WP theme and enter the following somewhere.

if (!is_admin()) {
	if (function_exists('wpsc_the_product')) { // this checks to see if WPEC is even active	
		add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {

if (!is_admin()) {
	if (function_exists('wpsc_the_product')) { // this checks to see if WPEC is even active	
		add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {

Similarly you can add in any scripts/css you want to remove to these functions. For example, when I build themes for WPEC, I always remove both the lightbox javascripts and css as I prefer to use my own.

Mini Cart in Header

Ok I know many of you have been searching for this solution. While this is very simple for intermediate to advance level coders but may be a bit challenging for beginners. To pull this off you would need both javascript and PHP knowledge. Of course, you can just simply follow this solution here but I would advise to learn it. Copying/pasting is all fine and dandy but “know” what you’re copying is the key to learning.
First, let’s setup the HTML for this to work. See below HTML code that you can add/modify to fit your needs.

<div id="header-cart">
          <em class="count">
              <?php if (function_exists('wpsc_cart_item_count')) { // checks to see if this function exists
                  if (wpsc_cart_item_count() == 0 || isset($_GET['sessionid'])) { // checks if count is zero or sessionid is set
                      echo "0";
                  } else { 
                      echo wpsc_cart_item_count(); // this is the function that checks the item count in your cart
              } ?>
     <div class="shopping-cart-wrapper"> <?php // this is the key class name as by default WPEC is looking for this to update ?>
     <?php if (file_exists('wpsc-cart_widget.php')) { // checks to make sure this file exists, if so require it
          require_once('wpsc-cart_widget.php'); } ?>
     </div><!--close shopping-cart-wrapper-->
</div><!--close header-cart-->

That is it for the HTML part. By now you should have a count in your header somewhere of the items in your cart. Now let’s look at how we can add in some javascript to update the cart item count when “add to cart” button is clicked. For this solution, I will be using the jQuery syntax to get the job done.

jQuery(document).ready(function($) {
     $("input.wpsc_buy_button").click(function() {
          if($(this).parents("form:first").find("select.wpsc_select_variation[value=0]:first").length) { // if have variations and not selected prevent from clicking through
               return false;      
         var itemCount = parseInt($("#header-cart em.count").text()); // selects the current count of the header cart items
         var itemQuantity = parseInt($(this).parents("#single_product_page_container, table.list_productdisplay td, #products_page_container .productcol").find("input[name=wpsc_quantity_update]").val());
         if (itemQuantity > 1) {
               itemCount += itemQuantity;
          } else {
          $("#header-cart em.count").text(itemCount);

And that is it…I will leave the CSS part up to you!

HELP! “Submit Query” Button!

Ahhhh, the dreaded “Submit Query” button in your shopping cart widget…This is actually really simple to fix. Open up your wpsc-cart_widget.php and around line 28 change the following:

<input class="remove_button" type="submit" />


<input class="remove_button" type="submit" value="Remove" />

Help! Products Page Looks Weird!

I remember I’ve gotten many of this while building WPEC 3.8 sites for clients and it turns out you just have to click on the “Flush Theme Cache” in the Store->Presentation Tab.

Shortcode in Product Description

To enable shortcode in product description or additional product description, all you need to do is wrap the description function with a “do_shortcode” function like so:

<?php echo do_shortcode(wpsc_the_product_description()); ?>
<?php echo do_shortcode(wpsc_the_product_additional_description()); ?>

You will find these functions in your product display template files like wpsc-single_product.php, wpsc-products_page.php, wpsc-grid_view.php…etc.

Checkout Required Stars

Why are my checkout page required stars not RED?? No worries, just simply open up your CSS and add in the following code:

.asterix {color:red;}

Sort Categories by Slug Name

Here is a quick and simple way to sort your categories by slug name without installing 3rd party plugin or touching the core code. Do take note that this is for a quick fix because it can potentially make your links look weird with numeric denotation and if you ever change the order, you have to change the whole link slug name or else you may get a 404. Simply put the following snippet of code in your themes function.php file.

  function cmp_arr($a, $b) {
  if ($a->slug == $b->slug) {
    return 0;
  } else {
    return ($a->slug > $b->slug) ? 1 : -1; 
function my_wpsc_get_terms_category_sort_filter($terms){
  $new_terms = array();
  $i = 0;	
  foreach($terms as $term){
    if(!is_object($term)) return $terms;
    $term_order = wpsc_get_meta($term->term_id,'sort_order', 'wpsc_category');
    if(isset($term_order) && is_numeric($term_order) && !isset($new_terms[$term_order])){
      $term->sort_order = $term_order;
      $new_terms[$term_order] = $term;
      //this must have been recently moved or something, palce it at the end
      $newID = count($terms);
      $term->sort_order = $newID;
      $new_terms[$newID] = $term;
      //Term has no order make one up, also helps if it's not one of our terms
      $term->sort_order = $i;
      $new_terms[$i] = $term;
	usort($new_terms, 'cmp_arr');
  return $new_terms;
if (function_exists('wpsc_get_meta')) {

This sorts the categories via ascending. If you want it descending, change this:

return ($a-> slug > $b->slug) ? 1 : -1;


return ($a-> slug < $b->slug) ? 1 : -1;

Well that’s it for now but do check back often as I will be updating this post as time goes. Better yet, simply subscribe to our RSS feed by clicking on the RSS icon on the footer and get the updates straight to your RSS feeder.

This entry was posted in Splashing Blog, WordPress e-Commerce and tagged , , , , by Matt. Bookmark the permalink.

About Matt

Matt Hall is a web developer, marketer, and WordPress enthusiast. When he isn't organizing new WP projects, he can be found enjoying the sun, exotic coffees, and craft beers with friends.

1 thought on this article

Splash your Comments

Your email address will not be published. Required fields are marked *