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:

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

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

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();

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:

if( is_front_page() || is_home() ) {

//special code 

}

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.

Importing Google Web Fonts, LightSpeed Web Store & SSL

As I am sure you know, SSL is very sensitive. Every link href, script src and img src in the document must be HTTPS for the page to be delivered completely secure.

If not, the encryption is partial and you may receive warnings about it. Worse, your customers will see warnings about it and might leave your site before buying or registering. So it’s better to never to let this happen, if possible. Especially in a production site (live). Goes without saying, I guess.

Anyway my latest thing is using Google Web Fonts because although I worship, love and adore WP-Cufon and Cufon and usually use them whenever I can I can’t use Cufon site-wide. Well, I could but not in good conscience if I care about how long the page takes to load and all of that.

Most of my clients choose 1 Universally available font for their main Body font and a couple of Specialty fonts for titles,headings and menus, to dress things up a bit. But my latest client wanted a Specialty font for their main Body font and so I found 3 compatible fonts in Google Web Font’s library. I used the @import in my main stylesheet and thought everything was going rather well.
Until we had to start checking SSL and wouldn’t you know it it wasn’t kicking in all the way.
Something was not getting encrypted and I could not figure out what it was.

Like I do whenever this kind of thing happens I reverted the template back to a default Web store Template and SSL kicked in all the way. After I looked through my customized files I still couldn’t find anything off…

Then I checked my main stylesheet and at the top was:

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(http://fonts.googleapis.com/css?family=Alice);
@import url(http://fonts.googleapis.com/css?family=Kameron:400,700);

AHA! I switched it to:

@import url(https://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(https://fonts.googleapis.com/css?family=Alice);
@import url(https://fonts.googleapis.com/css?family=Kameron:400,700);

And SSL kicked in all the way. JOY.

So don’t be silly like me. If you import fonts like this make sure the url is https. Good thing Google has SSL up the wazoo so this is not a problem. Awesome.

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.

	
	<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; ?>

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

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;
}

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 do_action('wpsc_before_shipping_of_shopping_cart'); ?>
	<div id='wpsc_shopping_cart_container'>

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


<?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;?>">	


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.

 .hidden .wpsc_checkout_forms {

display:none;

visibility:hidden;

}

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!