S-Tastic Designs - Web Designer for Hire

So, I was asked to come up with a “Top 10″ tips and tricks for the Wordpress plugin WP-Ecommerce. Well, there are definately more than 10, but I decided to post my top 5. So without further ado, here they are:

Tip #1: You want to change the “add to cart” button that appears on your shopping cart.

Well, first you’ll want to make sure that you choose “iShop” for your theme in “Shop Settings”. That will place an actual button on your cart. Then to change that image, you will navigate to “wp-content/plugins/wp-shopping-cart/themes/iShop/images”. In that directory you will see a “buy_button.gif” and you will replace that with whatever “add to cart” button you’d like. Step 2 of this process is to adjust the stylesheet so that it will reflect the correct image size of the new image you’ve uploaded (unless of course, the new image is the same size as the old; then you can stop here).
Locate “iShop.css” and find the following code:

input.wpsc_buy_button{
background-image: url(images/buy_button.gif);
border: none;
width: 80px;
height: 30px;
}

You will then change the width and height to reflect the size of your new image. Save and upload and you’re all done.

Tip #2: Change wording in your shopping cart.

Most all of the “text” on the site that involves the shopping cart can be found in the language file here:
“wp-content/plugins/wp-shopping-cart/languages/EN_en.php”. In that file you will find everything from “Visit the Shop” to “PnP” (which most like to change to “Shipping”) to the sentence that reads on the checkout page about “having your credit card handy”. You can change these phrases to whatever you’d like, but just remember that when editing this text that you leave the quotes in place, otherwise your site will break!
So here’s an example…I want to remove the words “Visit the Shop” from my sidebar shopping cart. So I locate the line in the language file (it’s on line 174):

define('TXT_WPSC_VISITTHESHOP', 'Visit the Shop');

I would then change it to this:

define('TXT_WPSC_VISITTHESHOP', '');

And you notice that I left in the quotes, but removed the text. That’s it for changing or removing text.

Tip #3: The Google Checkout button.

If you’re using Google Checkout, you’ll notice that on the checkout page there are 2 Google Checkout buttons. One above the customer information fields and one below. The one that is placed at the top doesn’t really function as it needs the information below it to be filled out first, so the best thing to do is just remove that image and leave the one at the bottom.
So to do this, you will navigate to “wp-content/plugins/wp-shopping-cart/shopping_cart.php” and on line 341 you will see this code:

echo "<br>".$google_cart->CheckoutButtonCode($google_button_size);

You will just comment that line out so that it looks like this:

//echo "<br>".$google_cart->CheckoutButtonCode($google_button_size);

Save and upload and that should remove that top Google Checkout button.

Tip #4: Make your “checkout” link bigger and move it.

So on the sidebar cart, some people have requested to have the “Go to Checkout” link bigger and placed above the “Empty Your Cart” link. Here’s how we accomplish that:

First we’ll make the text bigger, so you will navigate to “wp-content/plugins/wp-shopping-cart/languages/EN_en.php” and on line 171 you will see the following:

define('TXT_WPSC_GOTOCHECKOUT', 'Go to Checkout');

You will edit that line to look like this:

define('TXT_WPSC_GOTOCHECKOUT', '<font size="3">Go to Checkout</font>');

You can obviously change the “3″ to whatever size you would like to fit your site. Then you will want to place it above the “Empty Your Cart” link, and we’ll do that by navigating to “wp-content/plugins/wp-shopping-cart/shopping_cart_functions.php” and on line 337 you will see this:

$output .= <ahref='".get_option('product_list_url').$seperator."category=
".$_GET['category']."&amp;cart=empty' onclick='emptycart();return false;'>".TXT_WPSC_EMPTYYOURCART."</a><br />";
$output .= "<a href='".get_option('shopping_cart_url')."'>".TXT_WPSC_GOTOCHECKOUT."
</a><br />";

And all you will do is take the bottom line that calls to show the “Go To Checkout” link and move it above the “Empty Your Cart” link, so it will then look like this:

$output .= "<a href='".get_option('shopping_cart_url')."'>".TXT_WPSC_GOTOCHECKOUT."
</a><br />";$output .= "<a href='".get_option('product_list_url').$seperator."category=
".$_GET['category']."&amp;cart=empty' onclick='emptycart();return false;'>".TXT_WPSC_EMPTYYOURCART."</a><br />";

And that’s it for that.

Tip #5: Modifying your sidebar cart and notification look and feel.

So if you have your cart in your sidebar, you’ll notice that it’s pretty plain looking. There is an easy fix for that and the possibilities are up to you as far as how much you want to style it. First you’ll navigate to your theme’s css file. In that you’ll find the following code:

div#sliding_cart{
margin: 0px;
padding: 0px;
background: none;
border: none;
}

You’ll notice it’s very simple and plain right now, but there are many things you can do to change it. Below I will list an example of how you can change it to have a border around the cart, a background color and a larger font.

div#sliding_cart{
margin-left: 0px;
padding: 0px;
color:#000000;
background: url('http://www.yoursite.com/image.jpg');
border: 1px solid #000000;
font-size: 12px;
}

Again, there is a lot more you can do if you would like and know enough about CSS, but this is a simple example.

Next, if you have the “Fancy Notification” enabled, this will show you how to style it. In the same CSS file you will find this:

#fancy_notification{
position: absolute;
top: 0px;
left: 0px;
background: #ffffff;
border: 4px solid #cccccc;
display: none;
height: auto;
z-index: 9;
}

This has all the elements in place that most people want, but feel free to change the border color/width and background color. You can even load in a background image if you’d like by editing the code to look like this:

#fancy_notification{
position: absolute;
top: 0px;
left: 0px;
background: #ffffff url('http://www.yoursite.com/image.jpg');
border: 4px solid #cccccc;
display: none;
height: auto;
z-index: 9;
}

You’ll notice that I just gave a direct path to the background image, and it will show up in your notification box.

There are SO many other things you can do to style your cart, but these are a few good examples. If you have any questions about these or other styling issues, feel free to contact me over here.

So, until next time…

Related Posts

• WP-Ecommerce 3.6 RC2
• Magento - What is all the fuss about?
• Variations & Google Checkout