Change the appearance of the shopping cart widget

Most shop owners are likely to run their shopping carts as a sidebar widget. Those who do will notice that the shopping cart is more functional than flashy. However, the shopping cart is easy to style using a few CSS tweaks.

To do so, open the stylesheet for your particular WP e-Commerce theme. Keep in mind that this is not your regular WordPress theme, but the theme file inside your wp-content/uploads/wpsc/themes folder. For instance, if you are using the iShop theme, your stylesheet will be called iShop.css.

Inside the stylesheet, find the section that looks like this:

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

This is the CSS that controls how the sidebar shopping cart looks, and right now it has essentially no styling. Depending upon your WordPress theme, your cart might look something like this:

Your Cart

Number of items; L

Product Qty Price Sample CD 1 $5.00 Shipping: $2.00

Empty your cart Go to Checkout

Rather spartan, isn't it? Using some of the CSS knowledge gleaned from this chapter, you can easily make a few minor adjustments to the way the cart looks.

You can add a little padding, change the font color, make the font a bit larger, and add a dashed border all around the shopping cart:

div#sliding_cart{ margin: 0px; padding: 5px; background: none; color: #330066; border: 1px dashed #000000;

When you save the file and refresh the page, you should see something like this:

Your Cart

; Number of items: 1 Product Qty Price i Sample CD 1 $5.00 | Shipping: $2.00 i Tax: $0.25

| Empty your cart : Go to Checkout

It's not much, but it's a slight improvement. The possibilities are endless, so feel free to experiment.

Blogging 101

Blogging 101

Turn your posts into cash... If You’ve Been Struggling To Make Money With Your Blog You Must Read This!! If you are like me then you’ve been working non stop to find ways to promote your blog so that it will start earning money.

Get My Free Ebook


Post a comment