2021 Q4 Sale BFCM – Free Users Sitewide Banner

  1. Documentation
  2. Themes
  3. Bon Appétit

Bon Appétit

Important: This theme was retired in October 2015 and is not for sale. 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 Bon Appétit, the next edition in our new Canvas child theme lineup! 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, Bon Appétit, to it’s fullest extent! But we didn’t just stop there! This theme also has built-in support for some excellent plugins to help make this an ideal restaurant theme. Add food items to a menu using the Restaurant plugin by ThemeHybrid and allow guests to book a reservation using the Restaurant Reservations plugin. You can also use the Contact Details by Woo plugin to help quickly add your contact information including linking up your Twitter and Facebook accounts!

Note: None of these plugins are required for this theme, but it does have built-in support should you want to utilize them. For the plugin recommendations that are not created by Woo, we are unable to help support or troubleshoot any issues you have with these plugins. If you need further assistance with 3rd party plugins it is best to contact the 3rd party developer directly. If there is a conflict with the plugin and the display in the theme, this is something we can assist with. Please open a new ticket to let us know.

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 WooTheme.

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

Bon Appétit Theme Demo: demo.woothemes.com/bon-appetit

Checking your theme version ↑ Back to top

You can confirm your theme and WooFramework version by going to: Bon Appétit > 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 Bon Appétit, you will notice that the side menu says Bon Appétit:

Bon-Appetit-Welcome

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

Go to Bon Appétit > Settings to configure your theme.

BonAppétit-Settings

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 Woo products.
To learn more about theme settings please see the Canvas theme documentation.

To edit settings specific to Bon Appétit go to: Bon Appétit > Settings > Bon Appétit.

Bon Appétit-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 Bon Appétit. If you’d like to customize the theme design yourself, uncheck this option.

When you install Bon Appétit the custom styling for the child theme will automatically override the Canvas theme styling. Typography settings, navigation bar styling and 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.

Bon Appétit also comes with custom homepage features, let’s review those next!

Intro Settings ↑ Back to top

Here is an example from the Bon Appétit demo of what the Intro featured area can look like:

mmm... is it just me or does this make you hungry?
mmm… is it just me or does this make you hungry?

Here you can set:

  • Custom Background
  • Intro Title & Font Style
  • Into Message & Font Style
  • Intro Opening Hours
  • Intro Button Text & Link (this is the first button on the demo)
  • Optionally display a button to link to your menu (if using the Restaurant plugin)
  • Set the currency symbol to be displayed on your menu

In this particular demo, we applied a strong HTML tag to bold ‘Café Woo’ in the Intro Title and the Intro Message is ‘Fine dining at it’s very best’.

Intro background image

We recommend a minimum width of 1920 pixels for the background image size if you want the image to fill the width of the largest average browser window size.

You can adjust the height visible with this image by adjusting the padding as needed:

@media only screen and (min-width: 768px)
.page-template-template-homepage-php .hero-wrapper {
  margin-bottom: 0;
}

Intro Text/Button

It is important to note that just because the demo uses and features the Restaurant Reservations plugin and the Restaurant plugin by ThemeHybrid, these are not required plugins for the theme to work. You can set the intro text and button text/link to go to whatever location you’d like. The secondary ‘menu’ button will only appear if you have the Restaurant plugin installed and activated.

Bon Appétit Homepage Template ↑ Back to top

If you’d like the same layout on the homepage, with a section beneath the intro header as you see in the Bon Appétit 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 – this will be displayed in the section beneath the Intro header.
  3. Optionally add page content to display in the box beneath the Intro.
  4. Go to: Page Attributes > Template just below the publish module to select the Homepage page template.
  5. Publish the page.
  6. Next, go to: Settings > Reading > Front Page Displays and select the Static Page > Front Page as your newly created page (instead of the recent posts setting).
  7. Save changes.

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

Contact Details ↑ Back to top

To add contact information to your site beneath the site logo/nav as seen on the Bon Appétit demo:

Bon-Appetit-Contact-Details

You will need to download and install the Contact Details by Woo plugin. Documentation to help set this up can be found here: Contact Details Documentation

Next Steps ↑ Back to top

Now that you have set your Homepage template you can continue to setup a WooCommerce shop or install, activate and setup the recommended restaurant plugins.

Related Documentation ↑ Back to top

Here is a quick reference to related documentation.

Canvas ↑ Back to top

To help set up the rest of your theme follow the Canvas documentation if you are not familiar with the main features/setup of Canvas.

Main Navigation Setup ↑ Back to top

To learn how to setup your main or top navigation review our Menus documentation.

Contact Details by Woo ↑ Back to top

Plugin documentation

WordPress Child Themes ↑ Back to top

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

Restaurant plugin by ThemeHybrid ↑ Back to top

To learn more about how to setup and use the Restaurant plugin, please see their documentation here: Restaurant Plugin FAQs

Restaurant Reservations by NateWR ↑ Back to top

The documentation for this plugin is located in the Restaurant Reservations > Docs plugin folder. You can also quickly access this from the Plugins page:

Restaurant-Reservations-Help

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