I’ve worked with numerous ecommerce Plugins for WordPress in the past. Recently I was creating an Online shop for a client using the free WP e-Commerce Plugin and he wanted an image of a cart in in the header next to his logo. With the image he wanted the number of products in the cart to show in the header and automatically update when items are added or removed from the cart. This functionality is commonly called a ‘mini-cart’ and here is how to achieve the outcome.
Please note that I’m writing this post in a hurry so you’ll need to excuse some superfluous items in the scripts. You’ll also need to change the URLs to those as appropriate.
Show the number of items in the Cart
Add the following to the active Theme header.php file. Add it just after the header image or slogan (this varies depending on your Theme):
Style the look of the Mini-Cart
Now it’s time to style the product item count in the header and add an image of a shopping basket or shopping cart. Add the following CSS to the Theme stylesheet.css and change as necessary:
Update the mini-cart without Page refresh
And now we need to ensure that the item count updates without having to refresh the Page (this is important because otherwise the item count won’t update until after a manual Page refresh). For this we use a bit of Jquery. Just add the following to the end of functions.php: