1. Documentation
  2. Themes
  3. Canvas


Note: This product is no longer for sale at WooCommerce.com. Documentation is not being updated.

Homepage overview ↑ Back to top

The Canvas homepage is completely customizable with layout controls in the theme options panel. The below screenshot gives you an overview of the general layout.


Note: Canvas comes bundled with several page templates, any of which can be used as the homepage layout.

Styling & Layout ↑ Back to top

Canvas is different from most of our other themes. Usability and layout construction are used to create a clean starting point upon which you design your website. The options allow you to set general styling and layout, as well as styling for each section of your website — posts, pages, widgets, header, typography and more.

Go to: Canvas > Settings > Layout to set the styling and layout of your site.


Set the layout per post or page ↑ Back to top

The column layout option can be overridden per post or per page, using the Canvas Custom Settings meta box when adding or editing an entry in your WordPress Admin.

Pages that are overwritten by a post type archive, such as the WooCommerce Shop page or the Projects page in the Projects plugin, will not pick up the per page Layout Setting, and thus not display the Layout set globally on Canvas > Settings > Layout or Canvas > Settings > WooCommerce.


Typography ↑ Back to top

You have complete control over typography found in various sections under General Styling, Layout. The Misc Typography options only control basic typography; you control the specific typography in the related section, such as Posts and Pages.

The typography option allows you to:

  • Set the font size in px or em
  • Select the font from web-safe fonts and Google Fonts
  • Select the font style
  • Select the font color
  • Preview your font selection

Header ↑ Back to top

The header is the first section of your website seen by visitors. It is important that the header showcases your brand and provides a clear menu for navigating your website.

To customize your header under Canvas > Settings:

  1. Upload a Custom Logo under the General Settings > Quick Start screen.canvas-custom-logo-image
  2. Visit the Settings > Header & Footer section to optionally add a background image and header border.canvas-header-footer
  3. Visit the Styling & Layout > Navigation section to customize the look of your navigation menu (even dropdown menus have options!).canvas-navigation

Boxed Layout ↑ Back to top

The Boxed Layout option, in the Settings > Layout > Boxed Layout section, allows you to place a box around your website content and separate it from the background. This is best illustrated by the below image.


Go to: Canvas > Settings > Styling & Layout > Full Width Boxed Layout to set the following options:

  • Enable Boxed Layout Style
  • Select the color of your Box Background Color
  • Set the Margin inside your Box
  • Set the Box Border Size and Color and the size of the Box Rounded Corners
  • Enable the Box Shadow


Full Width Layout ↑ Back to top

Canvas 5.2 introduced a new full-width layout option, which allows you to set your header, navigation and footer area to span the entire width of the browser.

This option cannot be used in conjunction with the Boxed Layout.

Go to Canvas > Settings > Styling & Layout > Full Width Layout to:

  • Enable the Full Width Header option to expand the header and navigation to full width
  • Set the color of your Header Background Color or upload a Header Background Image
  • Go to: Styling & Layout > Primary Navigation to change the navigation styling
  • Enable the Full Width Footer option to expand the widgetized footer and footer area to full width
  • Set the color of your Footer Widget Area and Footer Area


Magazine Template ↑ Back to top

Canvas includes a Magazine page template with a featured post slider and a grid-based post layout.

To set up the Magazine page template:

  1. Add a new page with the Magazine page template.
  2. Go to: Canvas > Settings > Magazine Template to set up your template.


 Set up the posts slider ↑ Back to top

The magazine template slider uses posts that have a featured image.

  1. Enable the slider in Magazine Template > Posts Slider
  2. Set which post tag(s) to use in Post Tag(s) field
  3. Add a new post or edit an existing post, and tag your post with these tag(s)
  4. Add a Featured Image to the post.


Set up the featured post(s) ↑ Back to top

The Magazine template has an option to show a full-width post, both below the posts slider and above the post grid layout.

Go to Magazine Template > Featured Posts:

  1. Select the Number of Featured Posts to show.
  2. If you have added a Featured Image to the post, you can tweak the size and layout.
  3. Select if you want to show Full Content or The Excerpt.


Set up the posts grid ↑ Back to top

The Magazine template has a custom post grid layout.

Go to Magazine Template > Posts Grid:

  1. Select if you want to show Full Content or The Excerpt.
  2. Change the Post Title Font Style.
  3. If you added a Featured Image to the post, you can control the size and layout.


Business Template ↑ Back to top

Canvas has a Business page template that includes a featured slider page content below the slider.

To set up the Business page template:

    1. Add a new page.
    2. Go to: Page Attributes > Template option to select the Business page template. Screenshot on 12.3.2014 at 9.14.57 AMNow go to: Canvas > Settings > Business Template to set up your template.


Content and sidebar setup ↑ Back to top

Content in the main column below the featured slider is the content on the page you set as your business page template, as shown below. Unlike normal pages, the Business page template does not output a page title. This makes it more flexible, allowing you to add a title to the page content using h2, h3 or h4 tags or omit it completely.


If you want a unique sidebar for the business page, use the WooSidebar plugin to add a custom sidebar. If you use a 3-column layout for your page, the second sidebar serves as the normal Secondary sidebar.

Featured Slider Setup ↑ Back to top

To set up the Featured Business Slider, you need to:

  1. Add Slides.
  2. Add Slides to a Slide Group.
  3. Configure the Business Slider Theme Option Settings.

Add Slides to the Business Page Template

You have two options when adding slides: a) An image that fills the entire background area of the slide, or b) the slide page layout.


To add a slide to the business page template:

  1. Go to: Slides > Add New.
  2. Add slide content in the main content area, including a title and description.
  3. Add the slide to a Slide Group or Add a New Slide Group.
  4. Add a Featured Image if you want the image to fill the entire background of the slide. The example below shows an image embed in the post of the slide aligned to the right.
  5. Scroll down to review additional options in Canvas Custom Settings to enter a URL linking the slide.
  6. Publish slide to save.


Business Slider Theme Option Settings

To complete setup of your Business Slider:

  1. Go to: Canvas > Settings > Business Template > Featured Slider to Enable the featured slider.
  2. Choose if you want the slider to be normal or full width of your browser window.
  3. Select the Number of slides you want to display.
  4. Optionally select the Slide Group to show, if you are using WooSlider plugin.
  5. Optionally configure the remaining settings for Order, Title, Fonts, and Content Overlay position.
  6. Save All Changes.


Add a Button to a Slide

Use the button shortcode to add a button to your slide. To add a button or any other shortcode, add it to the Excerpt field.

Add shortcode to the Excerpt field
Add shortcode to the Excerpt field

If the Excerpt field is not visible on your Slide page, enable it in Screen Options (upper right corner).

To learn more, see: WooFramework Shortcodes

Set the Homepage ↑ Back to top

To set a page template as your homepage, go to Settings > Reading and select your newly created page as a static front page:


Review our Menu documentation on how to customize the menu after adding a static page as the homepage.

Portfolio ↑ Back to top

We no longer support the Portfolio feature in Canvas, and we encourage transitioning to our Projects plugin.

More about reasons for retiring the Portfolio module at: http://woocommerce.com/2014/02/introducing-projects-our-brand-new-portfolio-plugin-for-wordpress/

There is a converter from Portfolio to Projects: http://docs.woocommerce.com/document/converting-portfolio-items-into-projects/

Features and Testimonials ↑ Back to top

Canvas includes support for our free Testimonials by WooThemes plugin and Features by WooThemes plugin, which allows you to add features or testimonial blocks to any post or page. Canvas has styling and support for one to six columns for both plugins.

You can find additional documentation for each here:

See our demo for examples of features and testimonials.

These plugins are only fully supported in Canvas version 5.5.0+. Testimonials replaces the previously used Feedback post type.

Filters (Post Meta) ↑ Back to top

Use the Filters to customize the Above Post Content and Read More sections of each post on your website.

Use shortcodes, HTML and text in these sections to display desired content for each section. This could, for example, include a share button below each post.



As mentioned above, shortcodes have been designed to work with Filters. Each, however, can function independently of it. Main shortcodes to note are:

  • [post_date] – The post date.
  • [post_time] – The post time.
  • [post_author] – The post author (no link).
  • [post_author_link] – The post author (link to the author’s website).
  • [post_author_posts_link] – The post author (link to the author’s posts archive).
  • [post_comments] – Comments for the post.
  • [post_tags] – Tags for the post.
  • [post_categories] – Categories for the post.
  • [post_edit] – “Edit” link for the post.
  • [view_full_article] – Link to read the full post. The default text is “Continue Reading”, but you can change this with the ‘label’ parameter, e.g. [view_full_article label="Your Text Here"]

Each shortcode is also pluggable (overridden by child themes) and filterable using the following filter naming convention: woo_shortcodecode_shortcode (i.e., woo_post_date_shortcode).

All other shortcodes are also available for use here (i.e., placing a “button” shortcode in the “read more” section of your blog posts).

The “Footer Left” and “Footer Right” sections can also display shortcodes, using any available on your website.

Hooks ↑ Back to top

Hooks are points in the code of the theme where custom code can be loaded. This is covered in more detail at: Using Hooks and Filters.

Use Hooks to add custom HTML and/or shortcodes at various hook points within Canvas.


This could be used to add code after each post in an archive (maybe an advert or some sharing shortcodes?) or add extra HTML above or below certain areas of your theme without modifying the theme’s code.

Any shortcode can be used in the Hook Manager. To execute shortcodes on a hook, tick the Execute Shortcodes on this Hook checkbox below the desired hook.

More info at: Canvas Hook/Filter Reference.

Layouts ↑ Back to top

The Layouts screen provides a quick way to adjust column widths in various column layout possibilities that are built into Canvas.


To use the Layout Manager:

  1. Select the Enable Layouts checkbox.
  2. Choose the layout you’d like to adjust under the Select Layout section.
  3. Use the draggable interface to adjust the column widths as desired. The width percentage is displayed in each column.

Appropriate gutter spacing between each column is added automatically when calculating values for each column.

Settings for each layout are preserved and saved whenever the various layouts are in use. For example, the default layout of your website can be “Three Columns with Content in the Centre,” which you adjust. If you then adjust the layout for “Two Column with Content on the Left” layout, and make use of it on a specific page, your customizations are implemented on that page.

Woo Component Widget ↑ Back to top

Woo Component widget
Woo Component widget

The widget loads any of these components:

  • Business Slider
  • Magazine Slider
  • Magazine Posts Grid
  • Blog Posts
  • Current Page Content

And can be used in these widget areas:

  • Homepage
  • Widgets page template
The Woo Component widget is designed to be used in the Homepage widget area and on the Widgets page template, but it also works in other widgetized areas.

Homepage Widget Area ↑ Back to top

Adding widgets to this area displays them on your homepage and overrides the default homepage content. Use the Woo Component widget to set up a custom homepage.

Go to: Appearance > Widgets to add the Woo Component widget to your Homepage widget area.

If you set a static page as your front page in Settings > Reading, the Homepage Widget area will not show.

Widgets Page Template ↑ Back to top

This page template uses its own widget area to display content. If no widgets are added to this widget area, the default page content is displayed.

Go to: Appearance > Widgets to add the Woo Component widget to your Widgets page template widget area.

Using the Widgets page template on multiple pages ↑ Back to top

The Widgets page template can be used to display different widgets in the content of different pages. To do this, use the WooSidebars plugin.

  1. Create a New Widget Area in WooSidebars.
  2. Set the Sidebar to Replace for this widget area to Widgets Page Template.
  3. Add a condition for the page you’d like to customize widgets for. Ensure that this page has the Widgets page template selected.

Header Widget Area ↑ Back to top

Canvas v5.5.0 introduced a Header widget area, allowing you to add any widget to the right of the header area. This replaces the previous Top Ad section.

To use the Header Widget:

  1. Go To: Appearance > Widgets
  2. Add the widget you want to use to the Header Widget Area.
  3. Save.


Page Templates ↑ Back to top

Canvas includes a few unique templates, in addition to standard ones that you can add to your theme:

  • Magazine – A full-fledged magazine page template with slider and two column layout.
  • Business – A business template with a slider and simple page/sidebar setup.
  • Widgets – A page that uses the “Widgets Page Template” widget area as its content.
  • Feedback – A page that shows all your Feedback posts
  • Portfolio – A page that shows all your portfolio posts

Template Engine ↑ Back to top

The Canvas content templating engine provides more control over the appearance and context of each post. For example, you can customize how posts with the Aside post format are displayed within archives and search results. The templating engine is child theme friendly. This is demonstrated with Uno and Duo, two child themes we released to help customize the style of Canvas.

The templating engine works, as follows: Main Template File > Loop File > Content File. An example of this would be:

archive.php looks for loop-archive.php (defaults to loop.php), which in turn looks for content.php for each post. The content.php template lookup searches the following files, in this order of priority:

  • content-archive-test-of-image-attach-2.php (archives and posts page only)
  • content-archive-post-1173.php (archives and posts page only)
  • content-single-test-of-image-attach-2.php (single posts/pages only)
  • content-single-post-1173.php (single posts/pages only)
  • content-test-of-image-attach-2.php
  • content-post-1173.php
  • content-archive-post.php (archives and posts page only)
  • content-archive.php (archives and posts page only)
  • content-single-post.php (single posts/pages only)
  • content-single.php (single posts/pages only)
  • content-format-aside.php
  • content-post.php
  • content.php

Which translates, in general terms, to:

  • content-archive-slug.php (archives and posts page only)
  • content-archive-posttype-ID.php (archives and posts page only)
  • content-single-slug.php (single posts/pages only)
  • content-single-posttype-ID.php (single posts/pages only)
  • content-slug.php
  • content-post-ID.php
  • content-archive-post.php (archives and posts page only)
  • content-archive.php (archives and posts page only)
  • content-single-post.php (single posts/pages only)
  • content-single.php (single posts/pages only)
  • content-format-postformat.php
  • content-posttype.php
  • content.php

Using this engine, it is possible to customize the look of a single post or how a post type looks in the global context (i.e., in a multiple post type search results list). In short, this customizes templates down to the per-post level.

MailChimp Subscription List URL ↑ Back to top

To locate the MailChimp Subscription List URL that can be entered into the Subscribe & Connect section of the theme, go to MailChimp and follow the instructions below.

After creating your list in MailChimp, browse to that list and click Signup Forms.


Once on this section, select Embedded Forms.


The list URL you require is in the form code like this example below. Your personal subscription URL is (of course) named differently from the example as it’s unique for each person and list.



Once you have your subscription list URL, insert into the Subscribe & Connect MailChimp subscription field in the theme settings.

Contact Form and Map ↑ Back to top

Note: As of 5.12.0 the Contact Form and Map functionality have been removed. We recommend using a plugin to replace this functionality such as Jetpack.

To configure the Contact Form:

  1. Go to: Canvas > Settings > Contact Page.
  2. Tick checkbox to enable Contact Information Panel.
  3. Enter a Location Name.
  4. Enter Location Address, Telephone, Fax and Email. 
  5. Tick checkbox to Enable Subscribe and Connect (if applicable).

Google Maps is working for Canvas version 5.11.1 and higher, and requires a Google Maps API Key.

How to get a Google Maps API Key:

  1. Go to Google Maps API at: Developers Documentation – Get a Key.
  2. Click the blue button: Get a Key. A new window will pop up titled: Enable Google Maps JavaScript API. 
  3. Enter a project name, e.g., Example Store.
  4. Answer Yes.
  5. Select Create and Enable API. Wait, and a new window will pop up with your API key. 
  6. Select and copy Your API Key.
  7. Finish.

To configure your Map:

  1. Go to: Canvas > Settings > Contact Page > Maps.
  2. Paste your API key into Map API Key.
  3. Get and enter the coordinates in Contact Form Google Maps Coordinates. Click the link for assistance.
  4. Tick the checkbox if you wish to disable mousescroll (optional).
  5. Enter Map Height in pixels.
  6. Select Zoom and Map Type.
  7. Enter Map Callout Text, e.g., Name of your company/business.
  8. Save changes.

Google Maps is unable to display for older versions of Canvas prior to 5.1.11 due to Google Maps requiring an API key. A workaround would be to install and use the plugin: API Key for Google Maps.


The most customizable eCommerce platform for building your online business.

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