Shop layout

Author: Dawid Adach

-

Shop Layout

In this tutorial, we will create 2 crucial pages for our store - the main page of the store listing our products, and product page showing details of the product. This how the end result will look like:

Main shop page
Main shop page
Product 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 "Theme" tutorial or at least download starter package from here.

We will use 2 different approaches to create above pages. The first approach for 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 for mixing 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 following CSS to style.css
  2. .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;
    }
        
  3. If you are new to this tutorial, just download following starter theme, place it under wp-content/themes and activate it in Appearance menu.
  4. 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 get back to the previous tutorial where I am explaining that in details. In both cases, our main page is handled by index.php file. Soon we will create woocommerce.php file which will handle our WooCommerce websites including main shop listing page as well as a product page, but before we will do that we have to verify that our WooCommerce has been configured.

2. Verirfy the shop page.

    If you have finished 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 till WooCommerce pages panel
  3. Verify that Shop base: is set
  4. WC pages

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

3. Create and assign shop page (optional)

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

4. Create first WooCommerce template

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

    Note: If you can't see the page like on the screen above navigate to Settings->Permalinks and simply click Save changes. This will tell WordPress to refresh template lists.

As you can see woocommerce.php is our new template file which is responsible for displaying all WooCommerce pages. Our shop doesn't look great yet but we will fix it soon. What is important now is that you know that woocommerce.php is responsible for displaying pages related to WooCommerce plugin. Let's move to the next lesson and create our product page.


Previous lesson Download Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...