Building an online store can be an exciting undertaking. Your storefront is a huge part of your branding, and can contribute to the success of your business. However, you might struggle when it comes to designing an effective shop.
Using a WooCommerce page builder can help you create an eCommerce site that both you and your customers are happy with. In this guide, we’ll introduce you to the WooCommerce plugin. Then we’ll show you how to use Beaver Builder to quickly and easily create your online storefront. Let’s get started!
A Brief Introduction to WooCommerce
If you're using WordPress for your online store, WooCommerce is an excellent plugin for adding the eCommerce functionality you need to sell products on your site:
You'll also find yourself in good company, because WooCommerce accounts for just over 28 percent of the eCommerce platform market share in 2020.
Like WordPress, WooCommerce is open-source and highly customizable. It includes everything you need to get your eCommerce empire started, including functionality for setting up payment gateways and multiple shipping options.
You can also use WooCommerce to create and edit your products and manage all of your orders:
There are many other features you can take advantage of by using WooCommerce add-on plugins. Among those features, you have options such as advanced pricing configuration, additional payment gateways, and more.
How to Use Beaver Builder to Build WooCommerce Product and Shop Pages (In 4 Steps)
However, before you can really dig into WooCommerce's functionality, you need to design and build your website. Before you get started, install and activate the WooCommerce, Beaver Builder, and Beaver Themer plugins. Then you’re ready to follow the instructions below to build your product and shop pages.
Step 1: Add Products to Your Store
The first step in setting up your shop is to create listings for individual products. With WooCommerce you can sell anything, including physical products, digital products, and items with variations (such as size and color).
If you are new to WooCommerce and want to get a sense for how it works with various types of physical products, you can install a sample product set provided by WooCommerce. This gives you an idea of how WooCommerce product features work, including product variations and sale items.
If you want to start with your own items, we'll walk you through how to create a simple product. The rest of the sections in this post work no matter what kind of merchandise you plan to sell.
To create a new product, start in your WordPress admin dashboard. In the menu to the left, navigate to Products > Add New. On this screen, enter a title and description for an item you wish to include in your store:
If you scroll down a bit, you'll come to the Product data panel, where you can set most of the important parameters for your item, including pricing, taxes, and shipping options. Note that taxes and shipping options are usually set globally in the WooCommerce settings, but you can override those options for individual products.
In the General settings, choose if your product is virtual or downloadable. If it's a physical product, leave the boxes unchecked:
You can also get started with your inventory management. The Linked Products options connect products, so you can take advantage of opportunities to up-sell and cross-sell.
Finally, below the Product data panel, you'll find the Product short description field where you can add a second, briefer description of your item. This typically displays as part of the listing in your site's storefront.
On the right side of the screen, you'll find product categories and tags. You can use these to help organize your items:
Then add an image or two to your product listing. You have the option of adding a single image or a gallery:
You can add the product image from your Media Library, or you can upload a new photo from your device. Adding images to the product gallery works the same way. If you'd like to reorder the images, you can simply drag and drop them.
Step 2: Design New Product Pages
Next, you can create your product pages to display your products. We have a great step-by-step video tutorial that demonstrates how you can use Beaver Themer to customize your WooCommerce single product pages. Watch the video below…
Beaver Themer is a powerful way to extend Beaver Builder into a complete WooCommerce page builder. This add-on helps you create templates that you can apply to your entire site. That way you can make sure your storefront page, product pages, and entire site look cohesive.
Go to Beaver Builder > Themer Layouts > Add New:
Title your product layout. Afterward, select Themer Layout as your type and Singular as your layout, and click Add Themer Layout.
On the next page,make sure your new design applies to each single product page. Scroll down to Location, select Product first, and then choose All Products in the second box:
Save your work and click Launch Beaver Builder to edit your layout. You can start by clicking the blue plus sign in the top-right corner and then clicking Templates:
Select Product > Replace Existing Layout. This transforms your template into a product page, with a few helpful defaults already in place:
Once you have a basic layout, you can add or remove WooCommerce modules from it. To access WooCommerce modules, navigate to Modules > Themer Modules > WooCommerce. You'll have options for product ratings, descriptions, upsell sections, and many more:
You can use Beaver Builder's Preview As: feature to change the product that you see while editing the layout:
That feature lets you see how your new page looks when viewing each product. Once you're happy with your product page design and the modules it includes, click Done and Publish to save your work. Now the new page style applies to all of your single product pages.
Step 3: Create a WooCommerce Shop Page
Once you have a killer layout for your WooCommerce products, it's time to give your shop page the same treatment. By default, WooCommerce uses a very simple shop layout that's not very exciting:
You can do better by using Beaver Themer to design your Shop page. First, go to WooCommerce > Settings, click the product tab, and make sure that the Shop page is pointing to Shop, or any other page you have created. Any page you specify here is treated as an Archive page by WooCommerce, which means it displays a collection of your products.
To create a brand new layout, return to the Beaver Builder > Themer Layouts tab and click Add New. On the next screen, set a name and select Themer Layout under Type:
Select the Product Archive option under Location on the next screen. That means the Shop page and product category pages will display all of your store's products. You can modify it to suit your needs.
Click on Launch Beaver Builder so you can get to work customizing your layout. On the next page, click the plus sign at the top of the screen and then click the Templates tab:
The Products template works perfectly for a new shop page. Once you set the template, you can modify it using all of the tools and instructions that we've covered so far.
We recommend that you spend some time tweaking the Posts module style settings until your shop layout fits in with the rest of your store.
Once you're done, save the changes to the module and click Done > Publish at the top of the screen.
All that's left to do now is to check your navigation menu on your site to make sure that whatever page you designated as your Shop page is there. If not, go to Appearance > Menus from your WordPress dashboard and add it.
Step 4: Customize Your Shop Page Further With WooCommerce Layouts
Another feature that makes Beaver Builder an effective WooCommerce page builder is that it includes a WooCommerce module, which lets you place parts of WooCommerce functionality into any Beaver Builder layout on your site. This module, includes the following options:
- Single and multiple products: Display selected products by product ID or product category, or display sale products, recent products, top-rated products, and so on.
- Cart: Inserts what you normally see on the WooCommerce Cart page.
- Checkout: Inserts what you normally see on f the checkout page.
- Order Tracking: Inserts the order tracking form.
- My Account: Inserts the content that normally appears on the My Account page, including account information, past orders, and address details
See the WooCommerce module article in our knowledge base for detailed information and examples.
Setting up a stylish online shop that reflects your brand can be quite a project. However, with a WooCommerce page builder such as Beaver Builder, the process can become a lot less intimidating.
In this guide, we showed you how to build your online storefront in four steps using WooCommerce and Beaver Builder:
- Add products to your store.
- Design new product pages.
- Redesign the WooCommerce shop page.
- Customize your eCommerce site further with WooCommerce layouts.
Do you have any questions about how to build product and shop pages using Beaver Builder? Let's talk about them in the comments section below!