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.

Instant Ways To Monetize Your Blog

Instant Ways To Monetize Your Blog

Get Paid For What You’re Worth. Benefit From Your Talent. Get Your Due Credit. Provide Your Skills A Platform To Shine. Enhance Your Opportunities. Learn how to monetize your blog and reap the rewards of your skills.

Get My Free Ebook


Post a comment