A shop design is an integral part of any ecommerce website. It's where your products are displayed and where customers can browse and purchase them. If you're using WordPress to power your online store, then there's a good chance you're using WooCommerce as your ecommerce platform. WooCommerce is the most popular ecommerce plugin for WordPress, and it's used by millions of online stores around the world.
If you're using WooCommerce, then you can easily create a shop page using Breakdance Builder. Breakdance allows you to seamlessly integrate WooCommerce with WordPress, and it provides a powerful drag-and-drop builder that makes it easy to create custom pages for your WooCommerce store. In this article, we'll show you how to create a WooCommerce Shop page using Breakdance Builder.
Overview
Before we get started, you'll need to have the following things:
- A WordPress site
- Breakdance Builder installed and activated on your WordPress site
Install WooCommerce in WordPress
To install WooCommerce, log into your WordPress dashboard and navigate to Plugins > Add New. In the search field, type "WooCommerce" and hit enter. The first result should be the WooCommerce plugin by Automattic. Click on the "Install Now" button and activate the plugin once it's installed.
Once WooCommerce is activated, you'll be redirected to the WooCommerce setup wizard. This wizard will walk you through the process of setting up your WooCommerce store.
WooCommerce Setup Wizard
Setting up WooCommerce is a fairly straightforward process. The wizard goes through 5 pages of: Store Details, Industry, Product Types, Business Details, and theme. Fill out these pages accordingly and click on the "Continue" button at the bottom of each page.
On the final page of the setup wizard, you'll be asked to choose a theme for your WooCommerce store. You can either use one of the default WordPress themes or a WooCommerce-specific theme. We recommend using the currently active theme (Breakdance Zero Theme) since we'll be customizing the shop page using Breakdance Builder.
Once you've selected a theme, click on the "Finish" button and you'll be redirected to the WooCommerce dashboard.
Add Product to WooCommerce
Before we can create a shop page, we need to add some products to our WooCommerce store. To do that, log into your WordPress dashboard and navigate to WooCommerce > Products. On the products page, you'll see a "Add product" button. Click on that button and you'll be taken to the product editor screen.
In the product editor, you'll need to add a title and description for your product. You can also add images, videos, and other media to your product. Once you're done, click on the "Publish" button to publish your product.
Repeat this process for each of the products you want to add to your WooCommerce store.
Customize WooCommerce Shop Page Using Breakdance
Now that we have our WooCommerce store set up and we've added some products, it's time to create our shop page. We have two options when designing our page, we can use the default WooCommerce shop page template or we can create a custom WooCommerce template.
The default Breakdance WooCommerce shop page works very well to design our page but limits your layout. If we want to control the layout as well, it would make more sense to create a custom shop page.
If you navigate to your website pages, you should see that WooCommerce has already created a shop page for you. Breakdance has an amazing shop layout automatically generated for you. At the top of your page navigate to:
Breakdance -> Global Styles
You can edit styles live in the style builder. At the bottom of Global Settings you'll see options to edit typography, colors, spacings, shadows, and more. Because of this, it's not really necessary to create a custom WooCommerce shop template if you want to customize design, since you can do that all right here.
Create Custom WooCommerce Shop Templates in Breakdance
If you're not satisfied with the default WooCommerce shop page template or you want more control over the layout, you can create a custom WooCommerce shop template in Breakdance. To create a custom WooCommerce shop page, log into your WordPress dashboard and navigate to
Breakdance -> Templates
On the templates page, you'll see three options for WooCommerce customization:
- Single Product
- Shop Page & All Product Archives
- Specific Product Archive
We're going to go over the first two options since they're the most relevant for creating a shop page.
Single Product
This template is used to customize the layout and design of an individual product page. If you want to change the way your products look on an individual basis, then this is the template you'll want to use.
The benefits of creating a product page this way is you can disable upsells and related products below the product block.
Shop Page & All Product Archives
This template is used to customize the layout and design of your shop page and all other product archive pages. If you want to change the way your products look on your shop page, then this is the template you'll want to use.
Once creating this template, add a Product List block to the page. This block is great to easily customize what kind of product lists you want displayed. You could query or manually select products and to add to a display list. We've added columns and inserted a Shop Filters widget for further interactivity.
Conclusion
Your online shop should not just be easy to setup, but also easy to design. Thanks to Breakdance, you can create a stunning WooCommerce shop page without having to write any code. You also have full control over the layout of your products and can easily customize the look and feel of your shop. Combining the powerful customization of Breakdance with WooCommerce gives you the ultimate online selling platform.
Your online shop is now live! You should have a basic understanding of how to set up and customize a WooCommerce shop page in Breakdance. If you have any questions or need help, leave a comment below. Good luck with your online shop!
