Author: Dawid Adach
Shop Layout
In this tutorial, we will create two crucial pages for our store - the main page of the store listing our products, and a product page showing details of a product. This is how the end result will look like:
Main shop page

Product page

Warning
If you haven't finished a Blog tutorial before, that's all right. You can still continue with the tutorial. Both tutorials are independent and supplementary. You can create either Blog, Ecommerce shop or both together, however, it is required to either finish the "Theme" tutorial or at least download the starter package from here.
We will use two different approaches to create the above pages. The first approach for a single product page will be the one proposed by WooCommerce. We will update their templates and adjust them to display a product page in the way we want to. The second approach is more complex but allows us to fully control each element on the page without the need to mix our own code with the one automatically generated by WooCommerce.
1. Starter pack
- If you are working on a theme created during the previous tutorial (Blog Tutorial), add the following CSS code to
style.css
- If you are new to this tutorial, just download the following starter theme, place it under
wp-content/themes
and activate it in theAppearance
menu. - Open the main page of your website.
.table-products img {
max-width: 200px;
max-height: 200px; }
.table-products tr th, .table-products tr td {
vertical-align: middle; }
ins {
text-decoration: none;
}
.w-100px{
width: 100px;
}
Verify
If you have created a Blog before you should see your blog and posts without change. If you have used downloaded templates, you should see a page with Navbar and Footer. If you are interested in how they were created, just go back to the previous tutorial where I explain that in detail. In both cases, our main page is handled by the
index.php
file. Soon we will create awoocommerce.php
file that will handle our WooCommerce websites including the main shop listing page as well as a product page, but before we will do that we have to verify that our WooCommerce installation has been configured.
2. Verify the shop page.
- Go to
WooCommerce->Status
- Scroll down untill WooCommerce pages panel
- Verify that Shop base: is set
If you have finished using a Woocommerce Wizard, most probably your shop page is available at mydomain.com/shop
or localhost/websitename/shop
. In order to verify that the shop
page was successfully created:

In case it wasn't created, you will have to create and assign it manually:
3. Create and assign a shop page (optional)
- Go to
Pages->Add page
and create a page called Shop - Check and remember the permalink
- Go to
WooCommerce->Settings
and click on theProducts
tab - In a Shop page option, choose a page that you have just created and click on the Save changes button
- Verify that the page was correctly assigned (See step 2. Verify the shop page.)

4. Create your first WooCommerce template
- Create a new file called
woocommerce.php
in a root folder of your theme - Add the following code:
- Open your shop page (you can check the page url by editing theShop Page in WP Admin). You should see some products.
<?php get_header(); ?>
<?php require_once('components/navbar.inc.php'); ?>
<?php woocommerce_content(); ?>
<?php get_footer(); ?>

Note: If you can't see the page, as on the screen above navigate to Settings->Permalinks
and simply click on Save changes. This will tell WordPress to refresh the template lists.
As you can see woocommerce.php
is our new template file which is responsible for displaying all of our WooCommerce pages. Our shop doesn't look great yet but we will fix that on. What is important now is that you know that woocommerce.php
is responsible for displaying pages related to the WooCommerce plugin. Let's move to the next lesson and create our product page.
Previous lesson Download Live preview Next lesson
Spread the word:
