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 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.
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.
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.
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” ]
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.
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.