WP e-Commerce Themes

Introduction

The Wp-e-commerce Plugin now uses themes just like wordpress, these themes either live in the wp-e-commerce directory

wp-content/plugins/wp-e-commerce/

or if you have already moved them to a safe place

wp-content/uploads/wpsc/themes/

By default you should have 3 themes inside this folder:

  1. default
  2. iShop
  3. marketplace
You can choose which theme your shop will use by changing the option ‘Select Theme:’ in your ‘Settings>Presentation’ page.

Anatomy of a Theme

If you open up the theme folders, you will notice the files are pretty much identical except for a few changes in the markup and css. Each theme has a css file that is named after the theme (i.e the default theme has a css file called default.css and iShop theme has a css file called iShop.css)
This is an important note if you are planning on creating a new theme.

File structure

  • cart_widget.php – HTML markup required for the shopping cart widget
  • category_widget.php – HTML markup for the category widget
  • themeName.css – CSS file for the theme
  • functions.php – functions for saving your pagination settings for the given theme
  • grid_view.php – HTML markup required for grid view (this file is only used if you have gold_cart_files installed)
  • images folder – contains your shops theme related images (i.e backgrounds, buy now buttons)
  • products_page.php – HTML markup for the main products page
  • shopping_cart_page.php – HTML markup for the checkout page
  • single_product.php – HTML markup for the single product page
Note: there is also a global css file called compatibility.css that lives inside your main themes directory. This file holds css rules that effects all themes.

Creating a new Theme

Please be aware that some XHTML and CSS knowledge is required

The best way to style your shop is to create your own unique theme, this process is quick and painless. Here are some quick instructions on how to create a new theme. We recommend duplicating the default theme and making your necessary changes in a new theme rather than changing the default theme, this way you always have a backup ‘default theme’ to revert to if you have any problems.

Steps in making a new theme

  1. Duplicate the default theme
  2. Rename the folder to a desired theme name (in this example newTheme)
  3. Open the newTheme folder and rename the default.css file to newTheme.css
  4. Open the newTheme.css file and change the Theme Name and Description comments at the top to newTheme
  5. Login to your wp-admin section and browse to your ’settings>presentation’ page, click on the drop-down list, your new theme should be in the list!

Styling your theme

So, you’ve duplicated the default theme and created a new theme to use but it is just like the default theme. Here comes the fun part, making your theme unique! We recommend using Firefox and Firebug to help in this process, Firebug is a great tool that you can use to inspect each element on the page and find what styles are being applied and where to find the file and line number.

  •