Shop layout

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

1. If you are working on a theme created during the previous tutorial (Blog Tutorial), add the following CSS code to style.css
• HTML

.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;
}
    

2. If you are new to this tutorial, just download the following starter theme, place it under wp-content/themes and activate it in the Appearance menu.
3. Open the main page of your website.

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 a woocommerce.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.

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:

1. Go to WooCommerce->Status
2. Scroll down untill WooCommerce pages panel
3. Verify that Shop base: is set

In case it wasn't created, you will have to create and assign it manually:

3. Create and assign a shop page (optional)

1. Go to Pages->Add page and create a page called Shop
2. Check and remember the permalink

3. Go to WooCommerce->Settings and click on the Products tab
4. In a Shop page option, choose a page that you have just created and click on the Save changes button
5. Verify that the page was correctly assigned (See step 2. Verify the shop page.)

4. Create your first WooCommerce template

1. Create a new file called woocommerce.php in a root folder of your theme
2. Add the following code:
• PHP

<?php get_header(); ?>

<?php require_once('components/navbar.inc.php'); ?>

<?php woocommerce_content(); ?>

<?php get_footer(); ?>
        

3. Open your shop page (you can check the page url by editing theShop Page in WP Admin). You should see some products.


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.