The Solution

If you want to create a homepage layout using the style and options of a single-product post, this tip is for you.

This method uses WooShortcodes. For detailed help on using WooCommerce Shortcodes, please visit the WooCommerce documentation. For an alternative method that uses a redirect to the product post, see How to Set a Single Post as the Homepage

  1. Click on Products and click the Edit button for the product you want to use.
  2. Look at the URL in your browser’s address bar and note the post ID.
  3. For example: http://www.yoursite.com/wp-admin/post.php?post=3841&action=edit
  4. Go to Pages → Add New.  Enter a page title, then place your cursor in the post editor.
  5. Enter the following shortcode:

    [product_page id=””]

  6. Place your cursor between the quotes  and enter the ID  number from your product . See below for an example.
  7. Select the Full Width page template from the drop-down at the right.
  8. Click Publish

Set the product as your Homepage

  1. Click on Settings → Reading and select Static Page
  2. Select your product page from the Home Page menu
  3. You may leave the Posts page menu default/blank. Click here for how to setup a blog or category page.

 Add Custom Styling

By default, the WooShortcodes may not format correctly. You will need to add custom styling to the Custom CSS field under Theme Options, or you can start with this basic styling below (the below CSS is optimized for Kiosk and may not work perfectly for other themes):

.single-product select {
margin-left: 5px;
padding: 5px;
}
.single-product label {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}
.products .price {
display: block;
margin-bottom: 5px;
text-align: center;
}
.full-width ul li {
list-style-type: none;
}
.single-product .thumbnails {
clear:  both;
}
.single-product .images{
float: left;
max-width: 47%;
}
.single-product .images img {
width: 100%;
}
.summary {
margin-bottom: 20px;
max-width: 47%;
float:  right;
}
.single-product .price {
font-size: 18px !important;
font-weight: bold;
}