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 From The Beginning

Blogging From The Beginning

The Blogging From The Beginning course was specifically designed with these people in mind. It starts at the very beginning, by helping them choose the right platform and takes them all the way though creating content, getting traffic and making money from their blog. It is simple, straight forward information that will help them even if they've never heard of blogging before. It will teach them how to get started and quickly harness the power of blogging for themselves.

Get My Free Ebook

Post a comment