1. Documentation
  2. Themes
  3. Whitelight


Important: This theme was retired in October 2015 and is not for sale. Documentation is no longer being updated.

Installing your Theme ↑ Back to top

To learn how to install your theme please reference our documentation here: Installing a Theme

Whitelight Theme Demo: demo.woothemes.com/whitelight

Checking your theme version ↑ Back to top

You can confirm your theme and WooFramework version by going to: Whitelight > Framework

Activate your Theme Key ↑ Back to top

After you install your theme, be sure to activate your theme key by downloading and installing the WooCommerce Helper plugin. This will verify your site when contacting support and will enable 2-click updates for quick theme upgrades down the road.

Updating your theme

It is very important to ensure you have the latest version of your theme at all times. This is the best way to proactively troubleshoot issues on your site.

Please reference the WooCommerce Helper Documentation to learn more.

Setting Up Whitelight ↑ Back to top

The home page of Whitelight is largely module based, with 4 regions available below the slider for you to use at your discretion. You can enable/disable via Whitelight > Settings > Homepage Options > Homepage Setup.


Featured Slider ↑ Back to top

First let’s walk through setting up the Featured Slider. You’ll initially need to enable the Featured Slider in the theme settings under Whitelight > Settings > Featured Slider. You then have a few options here to control the slider as well, with a few notables being the option to use a full width slider or normal width and order of the slides.


You can also enable or disable the slide title from showing, as well as the description and pagination. If you wanted to have the slider only show your slide image, you can disable these options for the slider.


With the Featured Slider setup we need to add slides. It’s important to note that you need to create at minimum the number of slides you set in the theme settings. If you’ve set it to show 3 slides then we need to create 3 slides. You can do so by going to Slides>Add New. Be sure to title your slide and write a short description/excerpt. Then you can either upload an image using the Featured Image panel, or you can paste a video embed code. The slider will handle either type of media just fine.

To add a slide follow these steps:

  1. Go to Slides > Add New.
  2. Type a title for the slide and complete all of the post’s body content.
  3. If you want an image to appear as the background to the entire slide than add a featured image via the Featured Image panel.
  4. If you want to use a video simply past the embed code in the proper box under the Custom Settings
  5. Publish the slide.
Creating A Slide
Whitelight Full Width Slider

Now we can talk about the other regions you have on the homepage as well. They are as follows; Intro Message, Features Area, Portfolio Area, Content Area and Blog Area.

Intro Message ↑ Back to top

The Intro Message is a small area under the slider where you can put any sort of message you’d like your visitors to see. Enable this and enter your message under Whitelight > Homepage Options > Intro Message (basic HTML is allowed here).





Whitelight Intro Message

Features Area ↑ Back to top

Next is the Features Area. This is very similar to our Mini-Features in our other themes. To change the Features settings go to Whitelight > Homepage Options > Features Area. You’ll find a place to enter a short message that shows up on the left of the features, as well as a title for the section and a link to view a list of all Features you’ve created.



Once you’ve setup your options you will need to create at minimum the number of features you specified in the settings. If you set it to show 3 Features then be sure to create at least 3 features.

To add a feature follow these steps:

  1. Go to Features > Add New.
  2. Type a title for the feature and complete all of the post’s body content.
  3. If you want an icon to appear beside the feature than add a “Features Icon” in the Custom Settings panel.
  4. Add an excerpt for the feature in the “Features Excerpt” field in the Custom Settings panel.
  5. Publish the Feature.




Setup The Portfolio ↑ Back to top

The portfolio area setup below is a great spot to show off the work you’ve done and is pretty simple to setup. First we’ll need to be sure that your portfolio is setup correctly. Create a page (via Pages > Add New) and title it however you’d like, we’d recommend calling it Portfolio. Then be sure to assign the Portfolio page template to it.

Portfolio Page Template

From here we need to add items to the portfolio.

To add a portfolio item follow these steps:

  1. Go to Portfolio > Add New.
  2. Type a title for the post and complete all of the post’s body content.
  3. If you are posting an image(s) upload them via the appropriate image options you’ve chosen.
  4. If you want to use a video simply past the embed code in the proper box under the Custom Settings
  5. Publish the portfolio post.
Creating A Portfolio Item

Portfolio Area ↑ Back to top

Now that we’ve setup our portfolio and added some work to it, we need to show a few of our latest posts on the homepage.

Go to Whitelight > Homepage Options > Portfolio Area to tweak any settings here to your liking.





Blog Area ↑ Back to top

The blog area is where you can feature a few of your latest posts on the homepage.

Go to Whitelight > Homepage Options > Blog Area to setup the options here as you’d like. You can choose how many posts to show, a message to display with the blog area, customize the image sizes, and more.



Whitelight Blog Area
Whitelight Blog Area

Content Area ↑ Back to top

The Content Area can display the content from the main content area of any of your Pages. Alternatively it can display a few of your latest blog posts.

To set this up, go to Whitelight > Theme Options > Homepage Options > Content Area.



To display page content:

  1. Select Page Content under the Content Area Content dropdown.
  2. Select which page you want to display content from in the Content Page dropdown.

To display blog posts:

  1. Select Blog Posts under the Content Area Content dropdown.
  2. Choose how many blog posts to display.
  3. Optionally specify categories to exclude from this section.

Shop Area ↑ Back to top

If you have installed our WooCommerce plugin, you can also choose to enable a Shop Area on the homepage, which will display your latest products.

To enable this, go to Whitelight > Theme Options > Homepage Options > Shop Area and configure the options there. (When selecting the number of products to display, multiples of 3 works best.)

Theme & Image Dimensions ↑ Back to top

Below are the dimension of the theme layout. The layout is responsive and will change based on the browser resolution. The widths below are the maximum for these containers.

  • Total site width: 960px
  • Main content width: 710px
  • Blog content width: 540px
  • Sidebar width: 210px

These are the ideal image dimension to use for Whitelight. Larger images will be dynamically resized to fit, while smaller images will be stretched to fit. All widths stated are in pixels.

  • Full width slider: 1600 x 400
  • Normal width slider: 960 x 400
  • Portfolio thumbnails: 215 x 220
  • Portfolio single page gallery: 710 wide (Can be any height)
  • WooCommerce Images: 720 x720
  • Blog featured images: 710 x 180

Custom Whitelight Widgets ↑ Back to top

The theme includes 9 custom widgets that you can add to any of your 5 widgetized regions – 1 sidebar and 4 footer widgetized regions.

The custom woo widgets included are:

  • Woo – Adspace
  • Woo – Search
  • Woo – Tabs
  • Woo – Twitter Stream
  • Woo – Flickr
  • Woo – Blog Author Info
  • Woo – Embed/Video
  • Woo – Subscribe/Connect
  • Woo – Component


The most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment