CSS Styles & Designs

wpStoreCart is easy to customize using CSS. For performance and convenience, we recommend adding CSS to your theme’s CSS file so that it is cached and uses the same HTTP request. However, if you switch themes you will need to redo the CSS for wpStoreCart. Alternatively, you can insert CSS into the wpStoreCart > Settings > Display > wpStoreCart CSS option, which will work even while switching themes, but will not cache that CSS.

Here are a few breakdowns of the element’s class and IDs. Not all optional features are shown, so use the resources here as well as tools such as the Firefox extension, Web Developer Toolbar, or Firebug, which both easily allow you to identify which class and IDs to target with your CSS styles.

Checkout Page:

Checkout Widget:

Use the CSS references below to alter the appearance of wpStoreCart:

wpStoreCart CSS Selectors

Elements by ID:

#wpsc – The cart is always displayed inside this parent element
#wpsc-title – The title of the shopping cart, displayed on the checkout page and in the Cart Contents sidebar widget
#wpsc-checkout – The checkout button, displayed in the Cart Contents sidebar widget
#wpsc-footer – Really only surrounds the Enter Coupon text on the Checkout page.
#wpsc-shipping – The shipping charge displayed on the checkout page and in the Cart Contents sidebar widget
#wpsc-subtotal – The subtotal displayed on the checkout page and in the Cart Contents sidebar widget
#wpsc-tax – The tax displayed on the checkout page and in the Cart Contents sidebar widget
#wpsc-total – The final total displayed on the checkout page and in the Cart Contents sidebar widget
#wpsc-registerform – Added in 2.2, governs the registration form on the checkout page
#wpsc-loginform – Added in 2.2, governs the login form on the checkout page
#wpsc-shipping-calculation-form – Added in 2.2, governs the Shipping Calculation pop up on the Checkout page only.
#wpsc-shipping-calculation-form-widget – Added in 2.2, governs the Shipping Calculation pop up on the Checkout widget only.
#wpsc-captcha – Added in 2.5.16, governs the captcha image box.

Elements by Class:

.wpsc-grid – Governs the way categories and products are listed in a grid
.wpsc-list(DEPRECIATED in wpStoreCart 3) Governs the way categories and products are listed in a list. Not used in wpStoreCart 3 or higher. Instead, product listings will always be wrapped in a div with the .wpsc-grid class.
.wpsc-products – In wpStoreCart 2.1 and higher, is used in conjunction with .wpsc-grid if the listing is of products
.wpsc-single-product – Introduced in wpStoreCart 3, this wraps the entirety of a product listing on a product’s page
.wpsc-categories – In wpStoreCart 2.1 and higher, is used in conjunction with .wpsc-grid if the listing is of categories
.wpsc-button – Various buttons, displayed on the checkout page and in the Cart Contents sidebar widget. Almost all buttons have this class, in addition to their more specific classes.
.wpsc-addtocart – All the add to cart buttons.
.wpsc-moreinfo – All the more info buttons. Added in 3.0.
.wpsc-buynow – All the Buy Now buttons. Added in 2.4.2.
.wpsc-thumbnail – Another way to access the thumbnail images
.wpsc-individualqtylabel – Qty label on specific product pages
.wpsc-individualqty – The Qty field itself on specific product pages
.wpsc-qtylabel – The Qty label on categories, main page, and other lists of products.
.wpsc-qty – The Qty field itself on categories, main page, and other lists of products.
.wpsc-checkout-qty – The Qty field on the checkout page and in the checkout/cart widget
.wpsc-h1 – H1 tags
.wpsc-checkout – Checkout buttons BEFORE the final checkout.
.wpsc-checkout-button – Added in wpStoreCart version 3. All the checkout buttons for different payment gateways.
.wpsc-empty – All the empty buttons
.wpsc-update – All the update buttons
.wpsc-paypalcheckout – All PayPal checkout buttons
.wpsc-authorizenetcheckout – All Authorize.NET checkout buttons
.wpsc-2checkoutcheckout – All 2CheckOut checkout buttons
wpsc-libertyreserve – All Liberty Reserve checkout buttons
.wpsc-by-category – The parent DIV that contains the products from the current category
.wpsc-error – Error messages, displayed in multiple places
.wpsc-hide – Stuff that is meant to be selectively hidden, like the update and clear buttons
.wpsc-recent-products – The parent DIV that contains the recent products.
.wpsc-remove – The “remove” text in the shopping cart, displayed on the checkout page and in the Cart Contents sidebar widget
.wpsc-top-products – The parent DIV that contains the top products.
.wpsc-product-img – The product image, displayed on the product page and where ever else the product shortcode is used (with images enabled.) Note that if a max width or height is specified in the admin panel, then inline max-width and max-height will be used, which will override your CSS for the same selectors. To use your pure CSS, set both values to 0 in the settings.
.wpsc-product-info – On product pages, or where ever a product shortcode is used, this is the unordered list where the product name, price, and quantity are displayed.
.wpsc-register-button – Added in version 2.2, this allows you to style the register button during checkout
.wpsc-login-button – Added in version 2.2, this allows you to style the login button during checkout
.wpsc-required-symbol – Added in version 2.2, this allows you to style the symbol that denotes a required registration field on the checkout page.
.wpsc-required-help – Added in version 2.2, this allows you to style the Required Symbol Description on the checkout page, which by default reads: * – Fields with an asterick are required.
.wpsc-calculate-shipping – Added in version 2.2, this allows you to style the Calculate Shipping link that appears when shipping charges have yet to be determined.
.wpsc-navigation – Added in version 2.2, this governs the pagination DIV. Use .prev .next .current and .page-numbers to further style these.
.wpsc-gallery – Added in 2.3, this is the DIV that includes all the product’s gallery thumbnails inside of it.
.wpsc-gallery-thumbnail – Added in 2.3, this is an individual product gallery thumbnail. Note that max-width and max-height may be over ridden inline, regardless of what you set here.
.wpsc-shareyourcart-product – Added in 2.3, this is the ShareYourCart button displayed on product pages. Note that this class is attached to an iframe element.
.wpsc-shareyourcart-checkout – Added in 2.3, this is the ShareYourCart button displayed on the checkout page. Note that this class is attached to an iframe element.
.wpsc-checkout-thumbnail – Added in 2.3.4, this is the thumbnail of the product displayed on your checkout page.
.wpsc-grid-price – Added in 2.3.6, this is the price of the product displayed in the product grid, wrapped inside a span tag.
.wpsc-list-price – Added in 2.3.6, this is the price of the product displayed in the product list, wrapped inside a span tag.
.wpsc-checkout-table – Added in 2.3.14, this is the optional setup for the checkout page, where the products are listed inside of a table.
.wpsc-states – Added in 2.4.0, this is a custom wpStoreCart U.S. states field that customers must enter when registering.
.wpsc-countries – Added in 2.4.0, this is a custom wpStoreCart countries field that customers must enter when registering.
.wpsc-product-accessories – Added in 2.5.2, this is a table that list related products and bundles, usually located on specific product pages.