WooCommerce Default Sop & Category Pages

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 customize 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 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 and WordPress - Create Custom Headers & Footers

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.   

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.

Using Shortcodes to Customize the WooCommerce Default Shop & Category Pages.
Click to Enlarge Image

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…

Using Shortcodes to Customize the WooCommerce Default Shop & Category Pages.
Click to Enlarge Image
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath
Click to Enlarge Image

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.

Online Trade Marketing

Lets take you journey to online success together...

Your website is the most important advertisement for your business and good web design is a vital component of your future success. Online Trade Marketing are you one stop shop. Start your online adventure today.

Online Trade Marketing has just finished building your new website… what’s next?

SEO, Social Media, Domain & Hosting Management, Google & Facebook Advertising, Maps Listing. We can take care of everything for you.

  • 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 customizing one of your category pages it’s simple, use this code [ product_category ]. This code can be further customized 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” ]

Default Shop & Category Pages
1. Click to Enlarge Image
Default Shop & Category Pages
2. Click to Enlarge Image

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.

Default Shop & Category Pages
3. Click to Enlarge Image

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.

Click to Enlarge Image

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 Online Trade Marketing 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.

Click to Enlarge Image


We want to hear from you...