1. Documentation
  2. Themes
  3. Fashionable

Fashionable: Canvas Child Theme

Important: This theme has been retired. Documentation is no longer being updated.

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. —WordPress Codex: Child Themes

Welcome to Fashionable, the next edition in our new Canvas child theme fleet! When customers want to customize the look of their site we like to recommend starting with a child theme to preserve customizations and make updating easier, as you do not need to worry about your customizations being lost when you update your parent theme.

In this case, we’ve taken Canvas one step further for you, updating the design and utilizing the child theme, Fashionable, to its fullest extent! To help set up your theme follow the documentation below and be sure to reference the Canvas theme documentation if you are not familiar with the main features/setup of Canvas.

You can read more documentation on WordPress child themes in the WordPress Codex.

Installation ↑ Back to top

To get started you will need to first purchase, download and install the Canvas theme. To learn how to install your theme please reference our documentation here: Installing a Theme.

Once you’ve installed the Canvas parent theme you can then follow the same steps to download, install and activate Fashionable, the Canvas child theme. After you’ve activated Fashionable you will notice a new style on your site, compared to the Canvas style you might be used to.

Fashionable Theme Demo: demo.woothemes.com/fashionable

Checking your theme version ↑ Back to top

You can confirm your theme and WooFramework version by going to: Fashionable > 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.

Theme Settings ↑ Back to top

After you’ve installed and activated Fashionable, you will notice that the side menu says Fashionable:

Fashionable-Welcome

This is where you will go to configure your theme settings, you will also see an option to ‘Configure Fashionable’ on the welcome page as well as options to download the WooThemes plugins that are built to work with your theme.

Go to Fashionable > Settings to configure your theme.

Fashionable ‹ WooLocal — WordPress

Take note of the links in the top right corner of the settings where you can quickly access:

  • Documentationfor the theme.
  • Changelogthis is where you see the changes/updates to the theme.
  • Helpthis is a link to our Help Desk where you can search for answers, post in the Community or open a new ticket for assistance with setup or troubleshooting your WooThemes products.
To learn more about theme settings please see the Canvas theme documentation.

To edit settings specific to Fashionable go to: Fashionable > Settings > Fashionable.

fashionable-theme-settings

If you would like to customize your homepage past the homepage settings, you will want to download and install the Homepage Control plugin.

Disable Child Theme Custom Overrides ↑ Back to top

The first option you will see here will enable/disable the custom child theme styling that comes with Fashionable. If you’d like to customize the theme design yourself, uncheck this option.

When you install Fashionable the custom styling for the child theme will automatically override the Canvas theme styling. This includes:

  • Typography Settings
  • Navigation bar styling
  • Background color

To name a few. If you want to use the typography and color settings found on the Canvas Styling & Layout Settings pages, you’ll need to disable the Child Theme Custom Overrides first.

Fashionable also comes with custom homepage features, let’s review those next!

Hero Settings ↑ Back to top

Here you can set:

  • Hero Background Image
  • Hero Title & Font Style
  • Hero Message & Font Style
  • Hero Button Text & Link

Hero background image

We recommend 960x415px for the background image size which is the same size as the demo example. Padding is applied to the .home-section.hero element, this can help control the visible height of your image.

If you would like to adjust the height visible with this image you will need to add the following to the custom CSS adjusting the padding as needed:

.home-section.hero {padding: 6.854em 0;}

Fashionable Homepage Template ↑ Back to top

If you’d like the same Featured Products, Most Recent Products, and Product Categories on the homepage as you see in the Fashionable theme demo, you will need to setup a new page with the ‘Homepage’ page template. To do this:

  1. Go to: Pages > Add New.
  2. Add a page title (ex. ‘Homepage’).
  3. Go to: Page Attributes > Template just below the publish module to select the Homepage page template.
  4. Publish the page.
  5. Next, go to: Settings > Reading > Front Page Displays and select the Static Page > Front Page as your newly created homepage (instead of the recent posts setting).
  6. Save changes.

To learn more about Page Templates please see our documentation here: Page Templates.

Product Categories ↑ Back to top

This is what the Product Categories looks like on the Fashionable Theme demo:

Screenshot on 2014-07-25 at 14-20-48

In order to have images show in the product category section of Fashionable, go to: Products > Categories to add a new category or select a category to edit. Select Uploading/Add to add new thumbnail.

Screen Shot 2014-07-25 at 14.05.14

If you would like to set the visible Product Categories, go to: Products > Categories to drag and drop the order of the categories. The top 3 categories will be displayed on the homepage.

Screen Shot 2014-07-25 at 15.59.08

Featured Products ↑ Back to top

Featured products can be set through your WooCommerce Products page. Go to WordPress Dashboard > Products and click on the star to set the featured items.

Screen Shot 2014-07-25 at 15.41.34

Recent Products ↑ Back to top

The recent products on the homepage are the most recent products you have created on your WooCommerce shop.

Screenshot on 2014-07-25 at 16-03-06

As you can see, the order directly reflects the most recent products added:

Screenshot on 2014-07-25 at 16-06-20

Next Steps ↑ Back to top

Now that you have set your Homepage template you will need to setup your WooCommerce shop to see products on your homepage. Please see our WooCommerce Documentation to help you get started.

Please be sure review the Canvas theme documentation to learn more about how to set up the rest of your site!

WooCommerce - the most customizable eCommerce platform for building your online business.

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