![[Post to Twitter]](http://www.wordpressme.org/wp-content/plugins/tweet-this/icons/tt-twitter-micro3.png){kind=icon}
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:
1 2 3 4 5 6 | 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):
1 | define('TXT_WPSC_VISITTHESHOP', 'Visit the Shop'); |
I would then change it to this:
1 | 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:
1 | echo $google_cart->CheckoutButtonCode($google_button_size); |
You will just comment that line out so that it looks like this:
1 | //echo $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:
1 | define('TXT_WPSC_GOTOCHECKOUT', 'Go to Checkout'); |
You will edit that line to look like this:
1 | 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:
1 2 3 4 | $output .= <ahref='".get_option('product_list_url').$seperator."category= # ".$_GET['category']."&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:
1 2 3 | $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']."&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:
1 2 3 4 5 6 | 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.
1 2 3 4 5 6 7 8 | 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:
1 2 3 4 5 6 7 8 9 10 | #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:
1 2 3 4 5 6 7 8 9 10 | #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…
April 27, 2008
Thanks for those.
Is there a simple way for wp-shopping cart to pick up the blog Page Name and add it to the Product Name.
I have put the product list onto my single.php page but can’t find a way to add the name before the product and of course continue to show it throughout the order process.
Blog is a Photo Gallery.
May 10, 2008
Thanks for this Shayne, Very simple and clear… easy to understand… Instinct should commission you to write a WP e-Commerce Guide??? Or at least consult on it… It would save on a lot of frustration in the forum and they could even sell it as a download and make a few quid too…
Anyway this page goes in the bookmarks… Cheers Shayne…
June 1, 2008
thanks for the excellent tips. The WP shopping cart is one of the shopping carts that actually work with Google Checkout . Other carts I have tried say they are compatible , but they aren’t. I would like more tips about improving the display of product images in the category pages and how to change the standard page titles for categories and products
June 11, 2008
[...] Top 5 WordPress Ecommerce Tips [...]
June 30, 2008
I found it to very informational, it will certainly provide help in programming. This list will be very useful in the future.
Got to bookmark this one!
July 11, 2008
Very useful for a very powerful plugin!
August 23, 2008
Hi..
I found blank page with IE browser. Everything is Ok with Firefox..
Can you help me to solve this problem?
August 25, 2008
I’d like to ditto dewatech’s post.
My online shop page displays things as it should in IE 6. When I click on a product, the product page appears blank in the “product-display” div.
Looking at the source for the page reveals that everything has been loaded – but for some reason, the images, text, buttons, etc. for the product do not show up! Weird.
November 11, 2008
megastarmedia says thank you for the great advice.
all the best,
sandy
December 11, 2008
how can i upload more pictures/images in wp e-commerce? in wp-e-cmmerce i can only 1 picture/images
December 11, 2008
@akbar, to have the ability to upload multiple images, you will need to purchase the “gold cart” upgrade module, located here:
http://www.instinct.co.nz/e-commerce/shop/
December 24, 2008
shane you have been a lifesaver! After hours of trial and error, I stumbled across your site. I will be purchasing the documentation you guys put together. I’ll be sure to leave feedback after I sort out the plug in. thx a bunch. Keep it up! Lots of great tips in this post.
January 11, 2009
Hi Shayne,
Thanks for the tips, they’re great! However, I am looking to replace the text “Shopping Cart” and possibly the checkout link by images.
I already added you to gtalk, but since we’re on opposite sides of the planet, chances are that we won’t be online together very often hahaha.
Anyways, I’ve tried this replacement in many was; the style.css, ishop.css, php files, but I just can’t find it.
Hope you’ll be able to help!
Cheers,
Richard
January 13, 2009
but wp ecommerce is running too slow, could some body just make it better ? thnks
January 14, 2009
Hi Shayne,
Nevermind my post before; Taeke resolved the issue on the wp e-commerce forums!
Cheers,
Richard
January 17, 2009
Hi,
I have a problem with the calculator thingy. Can anyone help me how to disabled it or make it invisible? I’m trying to put the “Postage” part but when it comes to the “Verify your Account” page, the Calculator always appear. In the demo site, the Calculator doesn’t appear. What should i do?
Thank you!
January 18, 2009
Chelle,
Fill out the contact form and send me a WP login to your site and I can take a look for you.
January 31, 2009
is there a way to have a “remove product from cart” function?
February 1, 2009
There is currently not a function to remove particular items from the cart (in sidebar)…and I have not dug into making that happen as of yet.
May 9, 2009
Hi shayne .. thanks for the tips .. i really need all the help for my new site ..
May 25, 2009
Hi, there’s a way to use searchs on the wp-commerce? I mean to say, something like filter by product name. I have changed everything and haven’t found a good way to do such a thing, pagination was hard to do too, some hints about this?
I think a good idea is to return only data from the main functions and render it on a template.
thk u!
May 26, 2009
Shayne, is there a way to add a dropdown field to the checkout form? For example, we would like add a custom dropdown to the end of the checkout form which allows users to select from a list of colleges they would like to register for classes at.
Thanks and looking forward to hearing from you!
May 26, 2009
Ane,
I’m sure you could do that by adding some code, but the harder part would be passing that to the database. If it were me, I would make the dropdown of the list of colleges a variation and display that on the products page so that they can select it there.
Should work the same way…just not on the checkout page.
May 26, 2009
Thanks Shayne very much – variations looks like it’s going to work great.
May 29, 2009
Hey Shayne, thanks for the tips, esp. tip#2 which was driving me nuts until I found this blog! Cheers!
June 1, 2009
OHH This is good for me. Thank ^_^ I really do appreciate your time on putting this up
June 2, 2009
Is there a simple way for wp-shopping cart/Gold cart to pick up the blog Page Name and add it to the Product Name? Or Just simply change the product “order 1, order 2, etc” to a name?
<<Was this question answered I couldnt find the answer if not , Is this possible Shayne?
June 3, 2009
I would just rename the product titles.
June 10, 2009
Hie, I was wondering if there was anyway to state that the product is sold out but still keep the product on site?
June 21, 2009
Karenmarie,
Normally, the cart will still show the product but show “sold out” instead of letting the customer purchase it. Is yours doing something different?
June 27, 2009
When someone adds a product to the cart, I don’t want to show the cart on the side bar but on the main page, under the cart I wish also to show “Buyers who bought this product also bought these products” and to show related products
Secondly, I wish to have an icon with the number of the products in the cart on the side. I want to show this icon on the top of the page.
Thanks in advacne