fbpx

Default Shop & Category Pages – Create Your Own

If you are selling products on your website, the default shop and category pages that come with WordPress and WooCommerce will already be familiar to you. Have you ever wished that you could design them yourself? Have you ever wanted to customise the look of the product category pages? You can. And there are a number of ways to do it.
Default Shop & Category Pages Post Featured Image

You Don't Have to Use Default Shop & Category Pages - Create Your Own. There are a number of ways to do this...

share this post...

Share on facebook
Share on twitter
Share on email

If you are selling products on your website, the default shop and category pages that come with WordPress and WooCommerce will already be familiar to you. 

Have you ever looked at them and wished that you could design them yourself? Have you ever wanted to customise the look and feel of the main shop page or the product category pages?

You can. And there are a number of ways to do it, depending on what type of website you have and what type of products you sell.

We are going to look at various configuration methods in this post. If you want to learn specifically about E-Commerce Home Page Design click here to read this post. We will be using free methods and premium methods of customizing the default shop and category pages. I will walk through the steps and introduce some plugins that will smooth the process.

WooCommerce Shortcodes

WooCommerce Shortcodes

WooCommerce places the all the elements needed to run an online store throughout your website using shortcodes. This means that you can place products, or groups of products, categories or sale items for example, anywhere on your site. You can create new pages specifically for this purpose.

Elementor Pro

Elementor is a real time, drag-and-drop page builder. If you are new to WordPress and you are working with Gutenberg or the classic editor I would highly recommend that you give Elementor a try, it will take the design of your site to the next level.

To be honest, without hiring a professional developer, building an E-Commerce website is very difficult and for the inexperienced, Elementor Pro (the premium version at $49) is a must. Professional designers and developers all over the world are using it every day.   

WordPress Redirection Plugin

When you’ve created a new page that you like you will want to replace your default shop and category pages with this new page. I’ll explain this in more detail later, but you might need to redirect the old page to the new one using a WordPress Redirection Plugin. 

Using Shortcodes to Replace Your Default Shop & Category Pages

(the example below will have spaces in the shortcodes, this is to prevent them from firing on this site. When you use them yourself remove the spaces)

WooCommerce comes with several shortcodes that can be used to insert content inside posts and pages. When you install WooCommerce it creates the default pages automatically.

Click here to learn more about WooCommerce Shortcodes. 

To see what I’m talking about for yourself; Add a new page, call it “Test Page” or something similar. You can use this page to experiment with different layouts.

Place the shortcode [ products ] in the editor and preview the page.

What you have now are 2 pages displaying a full list of your products. The page that was created automatically by WooCommerce and this one that you created yourself.

There is very little difference between the 2 pages. You can now use this page to experiment with design and layout. 

Using just the standard WordPress editor you can now add text to the top and the bottom of the page…

How to Display Product Categories

The above shortcode displays every product, but what if you want to limit the products shown. You need to specify product attributes in the shortcode. This gets a little more complicated but once you understand what a shortcode does you will pick it up in no time. Below is a list of everything you can add to the shortcode, then we’ll take a look at some examples of how to format the code. You can display exactly the products you want, the amount to display and in what order. 

  • Limit - The number of products to display. Defaults to -1 (display all).
  • Columns - The number of columns to display. Defaults to 4.
  • Paginate – Toggles pagination on. Use in conjunction with limit. Defaults to false, set to true to paginate.
  • Orderby – Sorts the products displayed by the entered option. One or more options can be used by adding both slugs with a space between them. Available options are:
  • Date - The date the product was published.
  • id - The post ID of the product.
  • menu_order - The Menu Order, if set (lower numbers display first).
  • Popularity - The number of purchases.
  • Rand - Randomly order the products on page load (may not work with sites that use caching, as it could save a specific order).
  • Rating - The average product rating.
  • Title - The product title. This is the default orderby mode.

FutureProof Digital

Empowering Business... Empowering People

Accessable, Responsive Websites for Small Business, Start-Ups and Public Figures. Future Proof & Robust Design, built to grow alongside you, achieving your Goals.

The web design process is a collaboration, easy to understand but most importantly friendly. We listen to your requirements, we listen to your needs. It’s your website, you need to love it as much as we do.

  • Category - Comma separated list of category slugs.
  • Order - States whether the product ordering is ascending (ASC) or descending (DESC), using the method set in orderby. Defaults to ASC.
  • on_sale - Retrieve on sale products. Not to be used in conjunction with best_sellingor top_rated.
  • best_selling - Retrieve best selling products. Not to be used in conjunction with on_sale or top_rated.
  • top_rated - Retrieve top rated products. Not to be used in conjunction with on_sale or best_selling.

There are endless combinations and configurations of shortcodes. For a full list of WooCommerce shortcodes click here.

If you are customising one of your category pages it’s simple, use this code [ product_category ]. This code can be further customised using the information above. Next we’ll look at some examples of how to place these on the page.

Here are some examples, with visuals below;

(remove all spaces from shortcodes)

1. Display 4 Sale Items in order of popularity

[ products limit=”4″  columns=”4″  orderby=”popularity”  on_sale=”true” ]

2. Featured products, 2 per row, with a maximum of four items.

[ products limit=”4″  columns=”2″  visibility=”featured” ]

3. Display 3 best selling products in one row.

[ products limit=”3″  columns=”3″  best_selling=”true” ]

WooCommerce Shortcodes - Display 4 Featured Products in 2 Columns
1. Click to Enlarge
WooCommerce Shortcodes - Display 4 Sale Items in 4 Columns
2. Click to Enlarge

The possibilities are endless. Decide what it is you want to display, visit the shortcode documentation at WooCommerce and add the code you need to the page.

The possibilities are endless. Decide what it is you want to display, visit the shortcode documentation at WooCommerce and add the code you need to the page.
3. Click to Enlarge

Using Elementor to Upgrade Your Default Shop & Category Pages

Elementor Page Builder allows you to further customize the default shop and category pages. Click here to read about customizing the Home Page design. It gives you complete control over the layout of the page. Below is the Elementor Theme Builder Dashboard, it saves so much time and effort designing each page, allowing you to create templates; header, footer, shop pages, that display site-wide.

As you can see Elementor is a live editor. As you make changes using the bar on the right you will see those changes take effect in real time. When you are happy simply click update/publish.

Every aspect of this page is created using Elementor Pro, everything you see can be changed; you can have a full width page with no sidebar, you can place descriptive text at the top or bottom of the page, you can display featured or sale products at the top, you can display the products in more or less columns.

This is the way we approach the web design process. First you need to decide what you need the website to do, and how you want it to look. When you have answered these questions clearly in your mind then research the applications required to make that happen.

Alternatively get in touch with us here at FutureProof Digital and we will walk you through the entire process.

Thank you for reading this post, I hope it has helped you understand the different options for your Default Shop & Category Pages. Please leave any comments or questions, we love to here from you.

Posts that help you do business... better.

Our blog posts cover every aspect of online business. Web Design, Search Engine Optimization, Facebook & Google Advertising, Local Marketing…

Business
&
Marketing

News
&
Opinion

How
to
Guides

Stay up to date with our latest projects & posts...