07 Building a custom WooCommerce Shop Page
This tutorial teaches you how to customize the WooCommerce Shop Page to create a custom layout with fields of your choice.
Sometimes you need to show the WooCommerce Shop page in a unique manner.
You may want to display your products in a custom layout. For example, instead of the classic product grid, you could use a list that has sortable columns.
You may want to include custom fields in your product catalog.
You may want to add a search to your shop so that your users can filter the product list.
You may need to include some additional sections on your shop page.
Extra offer for members
You may want to show products differently to people who are members of your site as opposed to visitors.
Creating a Custom Shop Template: Steps to Follow
We will customize the shop page template using Toolset plugins and without PHP coding. Our new shop template will display products in a two-column grid with a different set of product fields. Compare the following Before and After screenshots.
You can use the Toolset & WooCommerce training site to follow the tutorial, which is free for use.
7.1 Switch from WooCommerce to Toolset templates
The appearance of your shop page is determined by the WooCommerce template and the theme you use.
If you want to create a custom template, first you must disable the WooCommerce default template and switch to Toolset templates.
In the WordPress admin:
- Go to Toolset ->WooCommerce Views.
If you cannot see this option, ensure that you have the Toolset WooCommerce Views plugin installed and activated on your site.
- In the Product Archive Template File section, select “WooCommerce Views plugin default product archive template.”
Switching from WooCommerce to Toolset templates
7.2: Create new template layout for products
Create a new (blank) archive for products.
In the WordPress admin:
- Go to Toolset ->Dashboard.
- Scroll down to the Custom post types created by the theme and other plugins section.
- Locate the row for Products.
- In the Archive column, click Create archive.
Switching from WooCommerce to Toolset templates
7.3 Designing your shop layout
An empty layout opens and you can add cells to it.
We will start by including the Archive cell. We can use this template for any product archives–the shop page, product categories, product tags, product colors, etc.
- Add an Archive Cell to your layout.
Creating new template layout for products
The Create new WordPress Archive cell screen opens.
- Scroll down to the Loop Output Editor section.
- Click Loop Wizard.
- Change the number of columns to 2.
- Click Next.
- Insert the following fields:
- Post title with a link
- Post featured image (edit it by selecting the shop_catalog size)
- Post excerpt
- Product attributes
- Product price
Inserting WooCommerce fields
- Scroll down to the Content Template.
- Wrap the product title in h2 HTML tags.
- Click Save and Close this view and return to the layout.
- Preview your layout.
Your shop page displays your products in a two-column grid. Each grid cell includes the product fields you have chosen.
Your shop page displays the products correctly, but it lacks styling. We will tweak it a bit using additional HTML and CSS classes.
Customize Your WooCommerce Shop and Product Pages with Storefront
For as long as I have been working with WordPress, I cannot tell you how many times someone has asked me about doing some tweaks to their theme. For many, it’s not some major production. More often it’s more about colors, fonts and some pretty basic layouts. There are so many options these days between page builders and other plugins that now WordPress users can do a lot of without knowing code. And that’s a good thing.
The Storefront theme from WooCommerce is one of the most popular themes out there. What makes it so great is that there are child themes available as well, and extensions to bring even more to the table. I will be writing some posts on those extensions, but I’d like to start out with the Storefront Powerpack.
Customizing Storefront with the Powerpack
The Storefront Powerpack extension gives you the ability to change your store’s fonts and colors. You have more control over your header and the page layouts around checkout and other elements. And it delivers the ability to customize without knowing code.
Once installed, you will find the Powerpack features in your customizer, which gives you all these options.
This cool option lets you style the CSS (without the coding) by clicking on an element on the page. Simply click Add a Style, and choose an element to highlight. In this example, I am clicking on the single product or what is called loop product. You will notice it also highlights the other product on that page to tell me what all is going to be affected by the changes I make.
I could have also went as detailed as just the button.
Going back to the Loop Product, once I click on it, I get all these options for changing that specific element.
You will be able to style just about any element of your Shop page as well as your Product page.
The layout options give you a couple of choices for the page layout width and for adding a custom frame. If you do add the custom frame, you can easily change the background color.
Here you have some great options for your checkout page. You will get three different layouts for the checkout page, as well as Distraction Free Checkout, Two Step Checkout, and Sticky Order Review.
There are three layouts:
Default – the layout that comes with the Storefront theme.
Stacked – the customer input area is now moved to the top with the order below it.
Columns – Here you will find the customer input and order divided into two columns.
The other three options include:
Distraction Free Check – this removes a lot of the clutter to put the focus on checkout.
Without this option:
With the distraction free view, removing header elements, menus, breadcrumbs and foot elements:
This option separates out the customer details and the order summary into two pages. And if you want, you can also have the distraction free option check here as well, as I have done in this example.
Page 1 – Your Details
Page 2 – Your Order
Sticky Order Review
The review section will stick to the top as the customer scrolls down the page to the Place Order button.
This option gives you the power to rearrange and toggle all the elements in your header. You can also add, resize and move the components around. In addition, you can choose to stick the header to the top of your browser window when customers are scrolling through a page or post.
You can easily customize your copyright text in the footer, toggle the Storefront/WooThemes credit there, and a gain control of it when viewed on smartphones.
With Storefront comes a Homepage template that gives you a nice layout consisting of Welcome text, product categories, recent products, featured products, top rated products, on sale products and best sellers. But if you would like more control over this, the Powerpack works great here. Some of these areas you may choose not to display and it gives you the ability to hide them and also to set the number of columns for each, from 1 – 6 columns. You will also be able to add a description below each one and a view more button.
Your product page layout also has some options. The page layout itself can be default or full-width. And like the checkout page, you have the Gallery Layout options.
Default Gallery Layout – your standard layout that comes with Storefront.
Stacked Gallery Layout – This moves all the product details from the right side of the page to below the image.
Hidden – The one removes the product image. You might wonder why you would want to do this, but having used WooCommerce in the past for selling services, and having to think of an image for those, it came in handy in such instances.
Also, in the settings, you will find options to toggle the product tabs, related products, product description and product meta on and off. Again, think about the times you might want to hide one of these areas globally on your store. The related products was one of those.
And for all those messages that pop up with the default background color, you can control those as well.
More Storefront Customizations
As you can see, this gives you a lot more control over the Storefront theme, though I’ll admit that the Storefront theme by itself it a great option for online stores powered by WooCommerce.
There are some other extensions as well, both free and premium. I will be covering these in the near future, but until then, you can learn more about them over on Woo or I encourage you to look at the Storefront Extensions Bundle that gives you even more.
So I would certainly check our the Storefront Powerpack extension. And if you are just looking to change your blog archive and posts layouts on your Storefront theme, you can check out this post.
Documentation, Reference Materials, and Tutorials for your WooCommerce products
Upon installation, WooCommerce creates the following new pages via the Setup Wizard:
- Shop – No content required.
- Cart – Contains [woocommerce_cart] shortcode and shows the cart contents
- Checkout – Contains [woocommerce_checkout] shortcode and shows information such as shipping and payment options
- My Account – Contains [woocommerce_my_account] shortcode and shows each customer information related to their account, orders, etc.
Install pages again ↑ Back to top
If you skipped the Setup Wizard or want to install missing WooCommerce pages, go to WooCommerce > Status > Tools and use the page installer tool.
Tell WooCommerce what pages to use ↑ Back to top
If you set up new pages yourself, or want to change what pages are used for things like cart and checkout, you need to tell WooCommerce which pages to use.
To tell WooCommerce what pages to use for Cart, Checkout, My Account, and Terms and Conditions, go to WooCommerce > Settings > Advanced.
To tell WooCommerce what pages to use for the Shop page go to WooCommerce > Settings > Products.
What is the Shop page? ↑ Back to top
The Shop page is a placeholder for a post type archive for products. It may render differently than other pages in your install.
If you’re using SEO plugins, they may include settings specific to custom post type archives, and these settings are what you should be using to control the shop page.
This page should be compatible with all WordPress themes, even ones not made specifically for WooCommerce, as of version 3.3x. Should you be using a custom/child theme or a version of WooCommerce prior to 3.3x, or experiencing a compatibility issue, go to: Third-party/custom theme compatibility.
How to Get Help
WooCommerce – the most customizable eCommerce platform for building your online business.