Hotel – Storefront Child Theme

Hotel is a child theme for Storefront, the official WooCommerce theme. It features a design that has been tailored to businesses selling time/services and provides a unique integration with WooCommerce Bookings and WooCommerce Accommodation Bookings.

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

Hotel is a Storefront child theme, so you first need to install and set up Storefront and then Hotel.

1. Download Storefront for free at Storefront theme file.
2. Download Hotel from your WooCommerce.com account at My Downloads.
3. On your website, go to Appearance > Themes and click the Add New button. 
4. Click Upload to upload the Storefront .zip file from step 1.
5. Go to Appearance > Themes to Activate.
6. Repeat steps 3-5 for the Hotel theme from step 2.

More information at: Installing and Configuring Storefront and Managing WooCommerce.com Subscriptions.

Once installation is complete and the subscription is activated for Hotel, it’s time to configure and set up your themes.

More info at: Storefront theme documentation and WordPress child themes in the WordPress Codex.

Assign the Homepage template to the page you’re going to use as your site’s front page. To set up the homepage, see Storefront Homepage Template.

The template governs part of the front page design, specifically adding the titles of the 4 posts, created further down, to the sidebar.

To account for high resolution (retina) displays, we recommend the following image dimensions for Hotel as a minimum:

• Catalog images: 500 x 500
• Single product images: 980 x 700
• Product thumbnails: 980 x 700

WooCommerce Product Image settings are found at Appearance > Customize > WooCommerce > Product Images. More at: Managing Product Images.

More information on WooCommerce image sizes can be found at:

• Managing Products
• Product Images and Galleries

It’s possible to import WooCommerce Dummy Data to populate your site with demo products as a starting point.

Note: We do not supply the exact images you see in our Hotel demo due to copyright restrictions. Images used in this demo can be downloaded from the Open Library project.

Here’s how to create the look of the Hotel theme demo site. The instructions assume a clean start and therefore only mention settings that change. For the rest, default values are used.

In addition to the themes, the following plugins are required:

• WooCommerce
• Storefront Theme
• Storefront Powerpack
• Storefront Parallax Hero
• Homepage Control
• WooCommerce Bookings

• Start by activating all the required plugins mentioned above.

• Create and publish 1 page with the title “About Woo Cottage”.
  1. Set the page template to use the Homepage template (otherwise some features may not work as expected)
  2. Add a paragraph block with the “The original Woo Cottage building… text from the demo.
  3. Add a column block with a 50/50 split.
  4. Add a button block to each column with the button text as per the demo.

• Create and publish 4 posts with the titles seen in the right-most footer widget.

• Create and publish 1 Bookings product. The default values will suffice, but do add a featured image.

• Go to Appearance » Customize » Homepage settings
  1. Set Your homepage displays to A static page
  2. Set Homepage to About Woo Cottage (the page created in step 2 above)

• Still in the Customizer, go to Parallax Hero (only visible if the Homepage template has been assigned)
  1. Under Content, configure the Heading, Description, and Button
  2. Under Background
     1. Set Background media to Image, and add an image
     2. Set Background image size to Cover
     3. Check Parallax – Enable the parallax scrolling effect
     4. Tweak the remaining settings to your preference and what suits your image
  3. Under Layout set Text alignment to centre, and Hero layout to fixed width.

• Next in the Customizer, go to Homepage Control.
  1. Uncheck all section except for Homepage Parallax Hero, Storefront Recent Products and Storefront Homepage Content
  2. Click-and-drag the elements to be in order, top to bottom, mentioned in 7.1

• Now go to Powerpack » Homepage
  1. Uncheck all sections except for Page content and Recent Products
  2. Under Recent Products change the title to “Award winning WooVille holiday home”, and set both Columns and Number of products to display to 1

• Lastly in the Customizer, go to Widgets.
  1. Under Footer Column 1 add a Heading block and a Paragraph block with the relevant text in each
  2. Under Footer Column 2 add a Recent posts block configured to show the last 4 posts

• Click the Publish button at the top of the Customizer column.

Hotel applies some specific styles to elements such as buttons and the header, so these settings are removed from Storefront Designer to avoid confusion.

If you don’t want to display content, don’t add any. To hide the title, use Title Toggle for Storefront to hide the page title on any page across your site. Alternatively use Homepage Control to toggle the display of this component.

Yes. Go to Storefront Blog Customizer to see what’s possible.

Yes. Go to Storefront Checkout Customizer to see what’s possible.

Yes. Go to Storefront WooCommerce Customizer to see what’s possible.

Many WordPress tutorials recommend inserting code snippets in a child theme’s functions.php file. This ensure that you’re always able to update the parent theme without losing changes.

Because Hotel is already a child theme, you are unable to do this. Any changes added to the Hotel functions.php file will be lost when updating. Instead, we recommended that you add code snippets to a customization plugin. We’ve created one to do just this. Download Theme Customizations for free.

Have a question before you buy? Please fill out this pre-sales form.

Already purchased and need some assistance? Get in touch with a Happiness Engineer via the Help Desk.