WP e-Commerce themes refers to your WP e-Commerce theme, located at either:

• /wp-content/plugins/wp-e-commerce/themes, or
• /wp-content/uploads/wpsc/themes/

By default, WP e-Commerce comes with 3 (three) WP e-Commerce themes:

• Default
• iShop
• Marketplace

You can choose which WP e-Commerce theme your shop uses from the Store > Settings > Presentation page under ‘Select Theme’.

Migrating WP e-Commerce Themes to a ‘Update Safe’ Location

As mentioned above WP e-Commerce comes with 3 (three) themes, when you install WP e-Commerce for the first time these themes are stored within the Plugin files directory (/wp-content/plugins/wp-e-commerce/…) which is considered a volatile directory. When you update WP e-Commerce using the automated Plugin updater as part of the update process it removes the Plugin directory and then populates a new directory with the latest Plugin files, this means any customised files within that Plugin are destroyed. For this reason WordPress Plugin authors – like us! – recommend storing customised files – like WP e-Commerce themes! – outside of the Plugins directory, in our instance within the Uploads directory (/wp-content/uploads/wpsc/…).

To make your WP e-Commerce theme update safe do the following:

1. Open Store > Settings > Presentation
2. From the note in the top-right corner of the Presentation page click on the ‘Move theme files’ link
3. That’s it!

You can now make changes to your WP e-Commerce theme files with the assurance that they are safe from future automated Plugin updates from their new home in the Uploads directory (/wp-content/uploads/wpsc/themes/…).

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 important to note if you are planning on creating a new theme. Here is the different parts of the theme

1. cart_widget.php – HTML markup required for the shopping cart widget
2. category_widget.php – HTML markup for the category widget
3. themeName.css – CSS file for the theme
4. functions.php – functions for saving your pagination settings for the given theme
5. grid_view.php – HTML markup required for grid view (this file is only used if you have gold_cart_files installed)
6. list_view.php – HTML markup required for list view
7. images folder – contains your shops theme related images (i.e backgrounds, buy now buttons)
8. products_page.php – HTML markup for the main products page
9. shopping_cart_page.php – HTML markup for the checkout page
10. 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.

AJAX

Products Page

Ensure the product_form class is applied to the Product FORM element within each Product loop as without this AJAX support for dynamically adjusting the Shopping Basket widget is lost and results in a page refresh through the Add to Cart submit button.