Fixing A WordPress Theme to Work with WP-E-Commerce 3.8.9 (or whatever)

I was contacted to fix a WP theme I did not design called Kassyopea – a premium theme that costs $55 for a regular license, $2750 for an extended license.

Error number 1: clicking the add to cart button with Fancy Notifications turned on showed the item in the fancy notification message overlay but didn’t actually add the item to the cart (going to check out you got the message “oops cart is empty”).With Fancy Nootifications turned off all you saw when clicking add to cart was “..Updating” and a little spinner icon but that’s it.Updating never went away and the items were never added to the cart.

So off I went to getshopped.org to check out the user forums and saw this exact same issue was marked Resolved, a rare thing if you’ve ever visited a forum for help with your exact issue. A user suggested de activating all the plugins except the shopping cart and switching over to TwentyEleven ( or any other “proven” WP theme) then go to Settings > Store and then to Presentation and click Flush Theme Cache a few times. I also turned off Fancy Notifications in Settings > store > Presentation. After I did that I went back to the shop and added something to the cart, now the add to cart button worked. I re activated the plugins and switched back to Kassyopea and then went back to Settings > Store and then to Presentation and clicked Flush Theme Cache a few times and then a few more times just to be safe.
The add to cart button worked with Fancy Notifications turned back on – one issue fixed!

Now we just had to deal with the fact that after the normal product listing – about 4 or 5 un-styled, duplicated products were also appearing on the page.
I had fixed this before – it’s always a matter of placing wp_reset_query(); in the right place…

Being too lazy to get an FTP login set up I went right over to Appearance > Editor > page.php and experimentally – just to see what would happen – clicked save without editing anything. Big oops now the page displayed with a big PHP error – somehow just saving the page did something bad!

Oh fab, can I please debug code I didn’t write? That’s what I like to do in my spare time, yay. Unfortunately I didn’t save the original but here is the corrected code in page.php:

[php]
if( is_front_page() || is_home() ) {
add_filter( ‘body_class’, create_function( ‘$classes ="", "$classes[] = wpsc;" return $classes;’ ) );
get_template_part( ‘home’, ‘store’ );
die;
}[/php]

After the last curly brace I added wp_reset_query(); now the code looks like this:

[php]
if( is_front_page() || is_home() ) {
add_filter( ‘body_class’, create_function( ‘$classes ="", "$classes[] = wpsc;" return $classes;’ ) );
get_template_part( ‘home’, ‘store’ );
die;
}
wp_reset_query();
[/php]

No more duplicated products on the Shop using WP theme Kassyopea.

So there you have it. If you are having the problem where your add to cart button doesn’t work try switching to a different theme and in Presentation flushing the theme cache 2 or 3 times.Most plugin authors will say it’s another plugin and that is true some of the time but the other part of the time it’s usually the theme you’re using.

And you’re seeing duplicated products it’s probably because there is something like this in the theme:

[php]if( is_front_page() || is_home() ) {

//special code

}

[/php]

Update

After I wrote this the site owner wrote me to tell me that the add to cart button wasn’t working. I did everything all over again and tested the button. It worked.
Then I cleared the cart items and it didn’t work. The add to cart button always worked with TwentyEleven and TwentyTen even after I cleared cookies. I poked and prodded and changed settings and etc, etc, etc nothing helped. The add to cart button just didn’t work.

Unfortunately I ended up giving up on fixing it.

The weirdest part of this whole thing was the site owner had the almost exact same site set up using the exact same theme with almost exact same domain (other domain ended in .com, this one ended in .com.au). On this set up the Home page contained the productspage shortcode and also had a products Page that also had the products page shortcode. On this site, the add to cart button worked all the time! What a head scratcher.

My new design for an online store especially for music downloads (with sample audio!)

Music store design - samples, downloads and non-digital cd as products all on one page

Musicians of all types, from Indi-Rockers to Death Metal monsters and even Classic Rock tribute bands need to be able to sell their music online. There are lots of sites they can join that will do it for them like e-music and cdbaby and they make it real easy… But the bands aren’t selling on their own terms, on their own web site, with their band logo and all of that extra nice nice-ness.

So when I was asked by ON to develop an online store for them of course I grabbed a fresh copy of WordPress + wp-e-commerce and got to it.

My 1st challenge was finding an audio player that was customizable with CSS (not Flash!) I was so happy to find this plugin Haiku minimalist audio player. This plugin let me paste a shortcode into the product editor so that before customers are ready to buy they can hear a sample of the song. Customers can add multiple tracks to the cart and they can also choose a format, wav or mp3. ON also wanted to be able to offer the option to download the entire album (in both formats) and/or the option to buy the physical cd.

So on one side of the product page there’s the artist name & photo (the cd cover art as a featured image) and under it there is a list of 3 products: Buy CD, Download Album (MP3) and Download Album (WAV).

The new version of wp-e-commerce makes it easier than ever to mold your product pages any way you need. I really love how much easier it is to handle Variations now. So well done! The best decision GetShopped made was to go with the way WordPress works now – quite a bold thing to do because it required a complete revamp of their plugin. So I have much respect for them. Talk about wanting to be Future Proof. I love that.

Why Beta? Because I used the Product Page template.I should have used the Category Page template. I haven’t yet handled Single Product Pages,either. But its a good start!

How to tip: set a minimum amount before checkout in wp e commerce, part 1

With one of my current projects I was asked if I could set a minimum amount for customers to add to the cart before they could get to the checkout. FYI, I began the project when the wp e commerce plugin version was still 3.7.8, this is the version that the following template files reference:

cart_widget.php
shopping_cart_page.php
wpsc-includes/display.functions.php

File affected:cart_widget.php

Just to acclimate you to the area of the file we need to add to, in cart_widget.php at line 70 there is a form for clearing the cart. On line 77 begins the HTML for displaying the Go to Checkout link if any items are in the cart. What I did was just hijack this function to insert a conditional statement that unless the cart total is a minimum of 80.00 to show a little note about the cart minimum. Once the cart total is 80.00 then it can show the Go to Checkout link.

I hope it goes without saying that you can decide your own minimum amount simply by replacing any instance of 80 or 80.00 with your own number – anywhere you encounter it in any of the example codes.

[php]

<div class=’gocheckout’>

<?php $total = ($GLOBALS[‘wpsc_cart’]->calculate_subtotal() );
if($total < 80):
echo "<span class=\"total_nudge\">Checkout minimum is 80.00</span>"; endif;?>

<?php $total = ($GLOBALS[‘wpsc_cart’]->calculate_subtotal() );
if($total >= 80): ?>

<a href='<?php echo get_option(‘shopping_cart_url’); ?>’><?php echo __(‘Go to Checkout’, ‘wpsc’); ?></a>
<?php endif;?>

</div>

<?php else: ?>

<p class="empty">
<?php echo __(‘Your cart contains’, ‘wpsc’); ?> <span class="emptyisthecart"> <?php echo __(‘0’, ‘wpsc’); ?> </span> <?php echo __(‘items’, ‘wpsc’); ?>

</p>

<?php endif; ?>
[/php]

In the images you can see examples of the changes.


If you examine the 1st image you’ll see that I removed the continue shopping and go to checkout links from the Fancy Notification box. The reasoning was I did not want people to be able to click through to checkout and I also didn’t want to have to add new code to a core file so it was just easier to take out the links.

Editing core files of a plugin is usually not a good idea:upgrades will overwrite the changes that might be tricky to put back in while removing a few lines of HTML is much easier.

File affected: wpsc-includes/display.functions.php lines 146 to 155

[php]
function fancy_notification_content($cart_messages) {
global $wpdb;
$siteurl = get_option(‘siteurl’);
foreach((array)$cart_messages as $cart_message) {
$output .= "<span>".$cart_message."</span>";
}
$output .= "<a href=’".get_option(‘shopping_cart_url’)."’ class=’go_to_checkout’>".__(”, ‘wpsc’)."</a>";
$output .= "<a href=’#’ onclick=’jQuery(\"#fancy_notification\").css(\"display\", \"none\"); return false;’ class=’continue_shopping’>".__(‘X’, ‘wpsc’)."</a>";
return $output;
}[/php]

The easiest thing of all would be to not use Fancy Notifications although the option conveys to the customer that they’ve added an item to the cart and,depending on your shopping cart widget style or placement, this might not be so obvious. Just something to keep in mind.

Just doing this much took care of the client’s request. But that was not good enough for me, overachiever that I am I had to think ahead to what would happen if a customer had added enough to the cart to get to the checkout but then removed items and reduced their total below the minimum.

The solution is provided in part 2.

How to tip: set a minimum amount before checkout in wp e commerce, part 2

… This will make more sense if you’ve read part 1 about setting a minimum before checkout.

A solution for if a customer had added enough to the cart to get to the checkout but then removed items and reduced their total below the minimum.

I didn’t want to just get rid of the remove,update and quantity functions that the checkout page provides to customer for each product in their carts. I wanted to retain functionality of the shopping cart while enforcing the minimum for the cart total.

My plan was to continue to check if the cart total was at least 80.00 and if a customer went below that by using the remove, update or quantity options, another note about the minimum would appear and the rest of the checkout form would be hidden.

I hope it goes without saying that you can decide your own minimum amount simply by replacing any instance of 80 or 80.00 with your own number – anywhere you encounter it in any of the example codes.

File affected:shopping_cart_page.php
On line 88 – 89 of shopping_cart_page.php there’s the top of the form hook and the div for the forms.

[php]<?php do_action(‘wpsc_before_shipping_of_shopping_cart’); ?>
<div id=’wpsc_shopping_cart_container’>[/php]

I “hijacked” this section so I could put in my minimum total code:

[php]

<?php do_action(‘wpsc_before_shipping_of_shopping_cart’); ?>
<?php $total = ($GLOBALS[‘wpsc_cart’]->calculate_subtotal() );
if($total < 80):
echo "<br/><h2><span class=\"total_nudge-two\">Our Checkout minimum is 80.00</span></h2>";?>
<span class="checkout-total-label"> <?php echo __(‘Your Total is’, ‘wpsc’); ?>:</span> <span class="total_nudge"> <?php echo wpsc_cart_total(); ?></span><span class="total_nudge-two"><?php echo __(‘. Please re-adjust product amounts’, ‘wpsc’); ?> <a href='<?php get_option("product_list_url");?>’><?php echo __(‘ or return to the product list.’, ‘wpsc’); ?></a></span> <?php endif;?><?php echo __(‘ or return to the product list.’, ‘wpsc’); ?></a></span> <?php endif;?>

<div id=’wpsc_shopping_cart_container’ class="<?php $total = ($GLOBALS[‘wpsc_cart’]->calculate_subtotal() );
if($total < 80): echo "hidden"; endif;?>">

[/php]


The 1st image shows the cart total meets the required minimum. The second image shows how the minimum note is displayed while hiding the forms. To do this all I did was use CSS to hide the entire form set in the div if the minimum was not met.

[css] .hidden .wpsc_checkout_forms {

display:none;

visibility:hidden;

}
[/css]

Make sure to place that line after the line that styles #wpsc_shopping_cart_container in your theme CSS file. I added visibility:hidden as an extra protection in case your theme sets display:block on the div style, visibility:hidden will override that.

Ok, that about does it. I hope this tutorial set was helpful to you. Good luck with your projects!