Home » Resources » Documentation » Design and Layout » Styling with CSS

Styling with CSS

Trust us when we say, with a bit of CSS knowledge, your store can be a thing of beauty.

If you want to get started, go ahead and download Firebug (if you are using Firefox). It’s the greatest tool you could possibly ask for. If you are not using Firefox, get with the program man!

Body Tag Classes

WP e-Commerce 3.7.5 adds the following styles to the body tag:

  • wpsc
  • wpsc-home
  • wpsc-single-product
  • wpsc-single-product-id
  • wpsc-category
  • wpsc-category-id
  • wpsc-group-id
  • wpsc-shopping-cart
  • wpsc-transaction-details
  • wpsc-user-account

These extra classes will give you more flexibility when designing themes for WP e-Commerce.

Where are these classes included?

wpsc
Included in every WP e-Commerce page.

wpsc-home
Included on the main WP e-Commerce shop page.

wpsc-single-product & wpsc-single-product-id
Included on single product pages. The wpsc-single-product-id class allows you to set css rules for a single product based on the product id.

wpsc-category & wpsc-category-id
Included on category and individual product pages. The wpsc-category-id class allows you to set css rules for different categories. As these classes are also applied to single product pages, if a product appears in more than one category you could style a product page differently depending on which category you click through from.

wpsc-group-id
Included on category and single product pages. The group id is set based on the group in which the current category resides.

wpsc-shopping-cart
Including on the shop cart checkout page.

wpsc-transaction-details
Including on the transaction details page displayed after a successful purchase.

wpsc-user-account
Including on the WP e-Commerce user account pages.