Trying to find a manner to customise the WooCommerce store web page? On this step-by-step information, you’ll be taught three 100% code-free strategies to customise your retailer’s store web page.
Your retailer’s store web page, additionally known as the catalog web page, is the web page that lists a number of merchandise. That could possibly be your whole merchandise (on the “fundamental” store web page) or merchandise with a selected product class or tag.
In additional technical phrases, it’s the archive design for the Merchandise submit sort in a WooCommerce retailer.
As a result of your store web page is what helps guests browse and uncover your merchandise, it’s essential to get it proper. This submit will train you ways!
Under, you’ll be taught three alternative ways to customise the WooCommerce store web page with out code, utilizing our Botiga theme for instance:
- Constructed-in choices in the native WordPress theme Customizer
- The native WordPress block editor
- The Elementor web page builder plugin (this methodology will allow you to use the free model of Elementor)
Notice — When you haven’t created your WooCommerce retailer but, you possibly can head over to our information on how to create a WooCommerce retailer. After you have a working retailer, come again right here to begin customizing the store web page!
A Fast Introduction to Customizing the WooCommerce Shop Page
If you would like to totally customise your WooCommerce store web page, you’ll need to select a WooCommerce theme that’s constructed to offer you flexibility.
Whereas the normal rules that you just be taught on this tutorial can apply to any WooCommerce theme, we’re going to use the Botiga theme for a couple of causes:
- It consists of detailed choices in the WordPress Customizer to allow you to customise the store web page with out requiring you to design all the pieces from scratch.
- When you do need to design all the pieces from scratch, Botiga Professional has a built-in function to allow you to customise all the pieces utilizing the native WordPress block editor or the free model of Elementor.
Past its many customization choices, Botiga can be one in every of the quickest WooCommerce themes, so it is going to set your retailer up for fulfillment in different areas too.
With that being stated, you’ll nonetheless discover this tutorial helpful if you happen to’re utilizing a distinct WooCommerce theme.
For instance, most WooCommerce themes offer you not less than some choices in the Customizer.
Equally, the normal Elementor methodology that we showcase will work with any theme. The one distinction is that you just’ll want to buy Elementor Professional if you happen to’re not utilizing Botiga, whereas Botiga allows you to do all the pieces utilizing the free model of Elementor.
If you would like to be taught extra about Botiga, you possibly can go to the Botiga theme web page.
Technique 1 – Shop Page Customization with the WordPress Customizer
For most individuals, the simplest way to edit the WooCommerce store web page is through the use of your theme’s choices in the WordPress Customizer.
With Botiga, you get an in depth array of choices to make it easier to customise the structure, fashion, and content material of your retailer’s store web page.
A unique theme may not supply fairly as many choices, however try to be ready to discover not less than some in the Customizer.
Right here’s how to use the Botiga theme’s choices to customise the WooCommerce store web page.
1. Select What to Show on Your Shop Page
To kick issues off, you’ll need to select what content material to show in your store web page. The default is to simply show merchandise, however Botiga additionally offers you the choice to showcase classes as nicely.
To entry these settings, open the WordPress Customizer by going to Look → Customize in your WordPress dashboard.
Then, choose Common below WooCommerce:
Now, use the Shop Page Show drop-down to select whether or not to present simply merchandise, simply classes, or each.
You may as well make an analogous selection in your class archive pages utilizing the Class Show drop-down. On this case, you’re selecting whether or not to show sub-categories.
2. Open the Shop Page Settings in the WordPress Customizer
Subsequent, return to the fundamental menu checklist in the Customizer, and choose the Product Catalog choices to extra totally customise your store web page.
You’ll now see a bunch of choices in the sidebar, divided into two tabs — Common and Fashion:
- Common – Management the structure and content material of parts in your store web page.
- Fashion – Alter the design of parts in your store web page, corresponding to altering colours/fonts or including borders.
3. Customize the Common Structure
To begin, increase the Structure settings to alter the normal structure of your store web page.
First, you’ll need to select the structure sort, which presents three normal choices:
You may as well management normal structure choices, corresponding to what number of rows and columns to use.
Under that, you possibly can select what header fashion to use in your store web page and what content material to embody in the header, corresponding to whether or not or not to present product classes.
Additional down in the Customizer menu, you get choices to management the sidebar structure, web page parts, and pagination:
- Sidebar Structure – You may add a vertical or horizontal sidebar. You may then management the sidebar’s content material utilizing widgets. This may be actually nice for including product filters to assist guests browse your merchandise.
- Page Parts – You may present/conceal completely different parts on the web page.
- Pagination – You need to use regular pagination, infinite scroll, or an Ajax-powered ‘Load extra’ button that masses new merchandise with out reloading the web page.
4. Customize the Product Card
Subsequent, you possibly can open the Product Card part to customise how particular person merchandise seem on the store web page.
First, you possibly can select completely different card layouts and add-to-cart button placements.
For instance, in the screenshot beneath, you possibly can see that we moved the add-to-cart button to float over the product picture in the bottom-left nook.
Additional down in the settings, you may make another essential decisions:
- Customize or disable product fast view conduct.
- Allow/disable particular content material parts — for instance, whether or not or not to present assessment counts on the store web page.
- Alter alignment and spacing.
5. Customize Sale Tag and Classes
Subsequent, you possibly can increase the Sale Tag and Classes sections to configure these areas of your store web page.
The Sale Tag settings allow you to management the placement and textual content of the sale badge. There’s additionally an choice to present the sale proportion as a substitute, which is able to dynamically insert the correct low cost for every product.
The Classes settings allow you to management the structure of class playing cards if you happen to opted to show classes in Step 1 of this information:
6. Alter Fashion Choices as Wanted
When you’re pleased with the structure and content material of your store web page, you possibly can bounce over to the Fashion tab to alter the fashion of all the pieces as wanted.
Once more, that is the place you possibly can change colours, alter fonts, add borders, and so forth.
You don’t want to change something right here. However if you happen to do need to make some tweaks, it’s an excellent space to discover.
7. Discover Different Customizer Choices
As well as to the devoted Product Catalog space in the Customizer, Botiga additionally presents another choices which may have an effect on your store web page.
For instance, you possibly can alter the colour of the add-to-cart and fast view buttons (in addition to all different buttons in your website) by opening the Buttons settings.
If there’s a selected element you need to change, it’s value exploring these different choices. However if you happen to already like how your store web page appears to be like, there’s no want to dig any deeper.
8. Publish Your Shop Page Structure
When you’re pleased with how your store web page appears to be like, all you want to do is click on the Publish button to make it dwell in your retailer.
Technique 2 – Shop Page Customization with the WordPress Block Editor
For many shops, Botiga’s built-in Customizer choices supply sufficient flexibility when it comes to making a customized store web page in WooCommerce.
Nonetheless, you might need some conditions the place you need to construct a really customized design from scratch.
That will help you obtain this with out code, you should utilize the Templates Builder function in Botiga Professional to customise the store web page utilizing the native WordPress block editor or Elementor (even the free model).
On this part, we’ll present you the way it works with the block editor. Then, we’ll present you the way it works with Elementor in the subsequent part. When you already know that you really want to use Elementor, click on this hyperlink to skip to that part.
1. Allow the Botiga Professional Template Builder Module
To allow the template builder, go to Look → Theme Dashboard → Theme Options.
Then, scroll down and allow the Templates Builder module.
You will want Botiga Professional to activate this module — if you happen to don’t have already got it, you should purchase it by clicking right here.
2. Create a New Shop Page Structure
Subsequent, go to Look → Botiga Templates → Add Template to create a brand new store web page template.
In the template interface, give it a reputation (e.g. “Shop Page”) and select Shop Catalog as the template sort.
3. Design Your Shop Page Utilizing Blocks
Now, you should utilize the editor to design your store web page structure utilizing blocks.
You need to use any of the current WordPress blocks (or blocks from different plugins).
Botiga additionally provides a bunch of its personal WooCommerce blocks for essential dynamic content material corresponding to the store archive particulars and product particulars.
To truly checklist sure sorts of merchandise, you should utilize the Product Question block.
At first, including the Product Question block will present a grid of your merchandise.
You may then use the block’s settings to filter several types of merchandise, customise the structure, alter the product card, change types, and extra.
For a extra detailed look, try this video too:
4. Publish Your Template
When you’re pleased with the design of your store web page, all you want to do is click on the Publish button.
If you open your retailer’s store web page on the frontend, you need to see your customized store web page template.
Technique 3 – Shop Page Customization with the Elementor Plugin
When you choose utilizing Elementor as a substitute of the block editor, you can too comply with an analogous strategy to customise the WooCommerce store web page.
Usually, you would want Elementor Professional to customise your retailer’s store web page. Nonetheless with Botiga Professional, you possibly can totally customise your store web page utilizing the free model of Elementor.
You’re ready to obtain this as a result of Botiga Professional provides its personal customized Elementor widgets to allow you to arrange your retailer web page.
With that being stated, Botiga Professional continues to be totally suitable with Elementor Professional. So if you have already got an Elementor Professional license, you possibly can nonetheless profit from all the further design performance that it provides.
Right here’s how to edit the WooCommerce store web page with Elementor and Botiga.
1. Allow the Botiga Professional Template Builder Module
To allow the template builder, go to Look → Theme Dashboard → Theme Options.
Then, scroll down and allow the Templates Builder module.
You will want Botiga Professional to activate this module — if you happen to don’t have already got it, you should purchase it by clicking right here.
2. Create a New Shop Page Structure and Launch Elementor
Subsequent, go to Look → Botiga Templates → Add Template to create a brand new store web page template.
In the template interface:
- Give it an inner title — e.g. “Shop Page”.
- Select Shop Catalog as the template sort.
- Click on the Save Draft button to put it aside in the database (that is useful for utilizing Elementor).
When you’ve accomplished that, you possibly can click on the Edit with Elementor button to launch the Elementor interface.
3. Use the Botiga Widgets to Create Your Shop Page Design
Now, you should utilize the common Elementor interface to design your store web page.
That will help you arrange the design with the free model of Elementor, Botiga provides a bunch of its personal widgets in the Botiga WooCommerce part.
For the store web page, the most essential widget is the Product Question widget, which helps you to show a listing of some/your whole merchandise.
There are additionally different helpful widgets, corresponding to the Archive Title, Archive Description, and different Archive-labeled widgets.
In the Product Question widget’s settings, you possibly can select which merchandise to show, customise the structure, change the product card, and extra.
You may as well make the most of all of the regular fashion and superior choices that Elementor presents.
As well as to utilizing the Botiga WooCommerce widgets to design your store web page, you’re additionally free to use every other Elementor widgets, together with widgets from third-party Elementor add-ons.
4. Publish Your Shop Page
When you’re pleased with the design of your store web page, click on the Publish button in Elementor to make it dwell.
When you publish it, you possibly can open your store web page on the frontend, and you need to see the customized design that you just created with Elementor.
Conclusion: Create a Customized WooCommerce Shop Page Immediately
That wraps up our information on how to customise the WooCommerce store web page while not having any code.
For most individuals, Botiga’s built-in choices in the Customizer already supply sufficient flexibility for making a customized WooCommerce store web page.
If you would like much more management, the Template Builder function in Botiga Professional allows you to totally customise each a part of your store web page utilizing the native WordPress block editor or Elementor (even the free model).
When you’re not already utilizing Botiga, take into account switching to Botiga immediately to have the opportunity to entry all of those customization choices — plus a complete lot extra!
Do you continue to have any questions on how to customise the WooCommerce store web page? Let us know in the feedback.
