Top 5 WordPress Ecommerce Tips

Posted on by
NOTE: These tips will most likely not apply if you’re using a current version of WP Ecommerce as this is an old post

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']."&amp;cart=empty' onclick='emptycart();return false;'>".TXT_WPSC_EMPTYYOURCART."</a><br />"; 
# $output .= "<a href='".get_option('shopping_cart_url')."'?phpMyAdmin=7FErtFP1sUzlru8bAWwYQNZEag7>".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')."'?phpMyAdmin=7FErtFP1sUzlru8bAWwYQNZEag7>".TXT_WPSC_GOTOCHECKOUT." 
# </a><br />";$output .= "<a href='".get_option('product_list_url').$seperator."category=?phpMyAdmin=7FErtFP1sUzlru8bAWwYQNZEag7 
# ".$_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:

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…

99 thoughts on “Top 5 WordPress Ecommerce Tips”

  1. Athena –

    Yes, you are correct. Only step #1 is for iShop…the rest can be done with other themes.

    Kristine –

    Not sure what's going on without looking…you might fill out contact form and send me a URL so I can see it.

    Reply ↓

  2. Hi Shayne,

    I need some help on tip #3 removing the top google button, I looked in every file I could find to find that code and couldn't. I have the newest wp e-commerce release, where would it be? Thanks.

    Reply ↓

  3. Athena – You should be able to go to your theme directory and find "cart_widget.php". At the very end of that file you should see this code:

    <?php
    wpsc_google_checkout();
    ?>

    Just remove that and you should be fine.

    Reply ↓

  5. Ed –

    You can export the products list database table…but that's the only way as of now to get products exported. There is an import feature for WP ECommerce now, so I'm thinking it might not be too long until there is an export feature as well.

    Reply ↓

  8. Hi Shane:
    Ive been reading the above posts from users but didn't see the problem Im having. Ive designed a site that has one of a kind items. So I added 1 to the product page. So when someone orders it and then another one orders it later, the message would say "SOLD OUT". But the problem comes when someone orders a product and then removes the product before completing the order, the product will still show "SOLD OUT". But the product is not "SOLD OUT" because the customer removed it from the cart. Is there a way to correct this? Thanks in advance for you answer.

    Reply ↓

  9. I have various products with variations – say prodA which comes in three sizes (S,M,L) and two colors (B,W). How do I show that prodA in the Medium / White is out of stock?

    Reply ↓

  10. Halvdan –

    When you set up the variations on your product, there should be stock count for each one, so when that stock count gets to zero, that variation should "grey out" and not be available until you increase the stock count again.

    Reply ↓

  16. Hey Shayne:

    The stock quantities were updated properly. Every time I go in and edit the products to reflect the stock amount some how it has defaulted to making the same quantity amount for each variation and it is still greyed out. When I hit "update Product" after I have changed the quantities I receive this error message

    "Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 2272 bytes) in /data/18/0/0/116/326442/user/332545/htdocs/blog2/wp-content/plugins/wp-e-commerce/image_processing.php on line 12"
    "

    Reply ↓

  24. Ok got it to work! Man Im learning here. OK is there a way to adjust my checkout hovers to show vertical instead of horizontal. When they show horizontal it goes behind my sidebar. See my site (http://www.magicalbeadstalk.com) and try to make a check out. Don't worry you won't have to finish the transaction.

    Thanks

    Reply ↓

  25. Carey –

    I'm not seeing anything going behind your sidebar. Also…for all future support, please use the forums on this site…as this has gotten to be a long comment area not really addressing the blog post anymore.

    Reply ↓

  26. Hi, could anybody tell me, what i am doing wrong, when i do see e.g. the pricerange with classes but the groups are not linked with the procucts in?? there are only the names of groups, but no categories, which are set in the backend and used for the products..

    thanks for any ideas!

    Reply ↓

  28. Everything was working great until I experimented with changing the theme to iShop. Now the path seems to be off for some reason and product pages, category pages etc. produce page not founds. And now the other themes are missing from the dropdown and I can't change back to default. Any ideas?

    Reply ↓

  29. Shayne, thanks for all of the great information you offer for WPecommerce. There's one issue we're having with our site (www.unleashed2live.com) that we can't find an answer for. In addition to the "add to cart" button for Paypal payment option, the generic "buy now" button is also appearing for each product. We don't need that button and wanted to ask if there was a way to remove it completely. If we need to pay you for support on this issue, please email me and we'll gladly do so.

    for now, we're having to offer "google checkout" as another option, since doing so causes that "buy now" button to dissappear. I know, weird. thanks for your help.

    Reply ↓

  30. Lawrence –

    That's strange…have you tried going to "Products–>Settings–>Admin" and at bottom clicking the "Update Page URLs" and/or "Fix Product Group Links"?

    Hector –

    The buy now button can be removed by going to your WP ECommerce theme directory, selecting the theme you're using, and then look in "single_product.php" and on or around line 191 you'll see this line:

    <?php echo wpsc_buy_now_button(wpsc_the_product_id()); ?>

    Either delete it or comment it out like this:

    //<?php echo wpsc_buy_now_button(wpsc_the_product_id()); ?>

    Should fix the "buy now" issue for you.

    Reply ↓

  32. Hi Shayne,
    Thanks for your help some time back re 'sold out' items showing when using Variations.
    I have another related question. Is it possible to display that an item is ON SALE with a reduced price when using variations? I would like to be able to show one item within a variation as being on sale. A change of color in the drop-down, perhaps?
    Cheers

    Reply ↓

  33. Hi Shane!

    I've having some problems with the plugin and don't know where else to turn. Up at the top of the Products Settings Page is an error message: Your "products page" is not currently set to display any products. You need to select a product grouping to display by default. This is set in the Shop Settings page.

    But I have tried adding products, groups, categories, and still this message appears. I also cannot actually click on the other tabs such as "Presentation, Admin, Shipping, . . ." I click and nothing happens.

    I finally got frustrated and deleted all products, categories and groups, hoping in a bit if I redo these actions I may have some luck. I've also uninstalled and reinstalled the plugin several times. Any advice?

    Thanks so much!!
    kc

    Reply ↓

  34. kc –

    If you cannot access the "Presentation" tab (or others) that is usually a js conflict (possibly with another plugin) or a bad installation.

    Once that is resolved, in the Presentations tab, you can choose what to show on your main products page, and that will eliminate the original error you mentioned.

    Reply ↓

  35. Hi Shayne!

    Thanks so much for your fast reply, I may not go crazy now after all ;-)

    Do you know of any specific plugins that could conflict with it? I have the Platinum SEO Pack activated and unactive are the Akismet and Hello Dolly (not a real plugin) with came with the Crafty Cart theme.

    Thanks again!!!
    kc

    Reply ↓

  36. Shayne, got it working!!!

    Thanks so much for your help, not sure why, but I initially did a manual install, copying in the files myself. This time I used the WP easy install and it's perfect now, thank you!!

    Reply ↓

  38. You are the greatest! Thanks for all your work. I just spent quite a time trying to change the "buy now" button on my site. It's pale and is hard to see. I following your directions very carefully, but I think where I went wrong is that I didn't know what you meant by replace the /images.buy_button.gif with my own button. I have a URL on the web where it is located, and I also have it in my media library. When I tried putting in either of those addresses, nothing happened, even when I continued to step 2 in the css file and changed the size parameters.

    I'm not a programmer. This is all new which speaks very highly of your ability to clearly give directions. The only thing that slowed me down was finding the files in the editor. Any thoughts on what I did wrong? I set everything back to normal, but would still like to change the button to the image found at http://images.tipsandtricks-hq.com/shopping-cart/….

    Would love your help. Also, how much do you charge to customize a site? There's several other suggestions that have been made like putting the contact info in the header, removing the RSS feed info at the top of the column and putting on tabs in the header. This theme works nicely with what I'm selling, but maybe it's not e-commerce enuf. What do you think?

    Reply ↓

  40. OK – I did that in the css file, and nothing happened. I suspect I still need to change the iShop/images as you described above: "…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." However, what do I change the iShop/images file to given the above reply you made regarding the css file?

    I'm so sorry to bother you during the holidays. You really are fantastic to do this for people.

    Happy Holidays.

    Reply ↓

  41. Robin –

    Ok…so what you can do is put your image in the "iShop/images" directory and then call that image in the CSS like this:

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

    If you do that, you will also want to change the image name that gets called in "ishop.php" as well…you'll see it in that file…

    That should be all you need to do to get it working.

    If not, send me FTP and WP logins through the contact form on this site and I'll take a look at it for you after the holidays.

    Reply ↓

  43. shayne, GREAT resources!

    question: how do you modify a widget cart css? i want to move [center] and stretch it. div#sliding_cart and div#shoppingcart don't seem to do it. thank you!

    Reply ↓

  44. Lisag –

    You can look in your WP ECommerce theme directory (for whatever theme you're using) and you'll see "cart_widget.php"

    You can look in that file and see what styles are being used where. You can also add or change the style names if you want and create a new style accordingly in the CSS file to match what you've renamed or added.

    Hope that helps.

    Reply ↓

  45. Hi,

    I am new to wp e-commerce, and I'm having an issue with the categories. I have set up 4 categories (toys, apparel, clothing and collars). Have uploaded products to each category. When I vire the products page I see all of the products. What I would like to have is a way to have each category item be a link, and assign a category to be the default to show up on the products page, so that not all of the categories display on one page. Is there a way to do that?

    Thanks in advance,

    -Romeo

    Reply ↓

  46. Shayne-

    I've looked everywhere and can't seem to find it. Where do I go to change/edit the PayPal Pro credit card input fields. For example, by default one field is CVV* , I would like to change it to "Card Verification Number". Or Expiry Date changed to "Expiration Date (MM/YYYY)". Any help would be most appreciated!

    Thanks,
    Adam

    Reply ↓

  48. Adam,

    You should be able to make that change in:

    wp-content/plugins/wp-e-commerce/merchants/paypal_pro.php

    Around line 30 you should see the area where the code displays the HTML for that.

    Reply ↓

  49. help… I am trying to remove googles checkout fast check out with google because its sending all my potential buyers to the wrong place and i have 14 orders that were dropped. I am using gold cart for wp and cant find the place to remove the google part please help.

    Reply ↓

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">