Skip to content

How to Turn Beaver Builder into the Ultimate WooCommerce Page Builder

WooCommerce Page Builder

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 be struggling when it comes to designing one. Using a WooCommerce page builder can help you to 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:

The WooCommerce home page.

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 e-commerce 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:

A WooCommerce example product page.

There are many other features you can take advantage of through the use of WooCommerce add-on plugins, such as advanced pricing models, additional payment gateways, and more.

However, before you can really dig into WooCommerce's functionality, you need to design and build your website.

How to Turn Beaver Builder into the Ultimate WooCommerce Page Builder (In 5 Steps)

Before you get started, install and activate the WooCommerce and Beaver Builder plugins. Now you’re ready to follow the instructions below to build your storefront or shop page.

Keep in mind, you can customize the design of individual product pages as well with the help of our Beaver Themer add-on.

Step 1: Create Your Products

The first step in setting up your shop is creating 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 of how WooCommerce works with various types of physical products, you can install a sample product set provided by WooCommerce.

This sample set gives you an idea of how WooCommerce product features work, including product variations and sale items.

If you want to start with your own products, 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 from 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:

Adding a new WooCommerce product.

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 WooCommerce settings, but you can override those settings 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:

The WooCommerce product data panel.

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:

Product categories and tags.

Then add an image or two to your product listing. You have the option of adding a single image or a gallery:

Adding a product image with WooCommerce.

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: Create a Storefront Page

Next, set up the storefront page to display your products. You can’t use Beaver Builder with the built-in WooCommerce Shop page, so we’ll show you how to make your own page and configure WooCommerce to use it.

Create a fresh page by navigating to Pages > Add New from your dashboard. Give your page a title and publish the page. 

Now you can replace the default Shop page with this new page.

In your WordPress admin panel, navigate to WooCommerce > Settings and click the Products tab. Click the arrow for the Shop page option and choose the name of the page you just created:

There’s one final thing to configure if you want. Every WooCommerce page has a breadcrumb at the top.

By default, the breadcrumb does not include the Shop page, as you can see here:

The Home link takes you to the website’s home page, not to the shop page. 

To add your Shop page to the breadcrumb, go to Settings > Permalinks from the WordPress admin panel.

Scroll to the Product Permalinks section at the bottom of the page.

You can choose the URL structure you want, and this will be reflected in the breadcrumb. Here’s the same breadcrumb with the Shop base with category permalink selected:

Step 3: Add a Featured Product

While the design possibilities are nearly limitless, let’s start the page with a Featured Product heading and product item.

A featured product can be helpful for drawing attention to items that are on sale, new to your site, or otherwise special in some way.

Navigate back to Pages > All Pages and in the list, hover your mouse over the page you created, then click Beaver Builder:

 

Now you’ll see a blank screen with the invitation to add a row or module.

Click the plus (+) sign in the top right corner of the screen. Drag and drop the Heading module where you would like it to appear on the page:

Adding a heading with Beaver Builder.

In the module's settings panel, you can play with the style options until you're satisfied with the result.

You can change the font, color, size, or even add a link if you'd like:

The Heading module options in Beaver Builder.

 

Now you can add your featured product.

There are two methods to create a featured product using Beaver Builder. You can display all of the information normally included on the product page, such as the description and pricing.

If you prefer to keep it simple, you can just show a photo of the product and the Add to cart button.

Whichever way you want to go, the first step is to find the product ID for the item you'd like to feature.

From the WordPress dashboard, navigate to Products > All Products. Mouse over any product to see its ID:

How to find a WooCommerce product ID.

Now you can go back to your storefront-page-in-progress. In Beaver Builder, drag and drop the WooCommerce module where you would like your featured product to appear.

Select Product page from the Layout dropdown menu if you'd like to display all of the item's information. Select Single product if you'd prefer to show only the picture and Add to Cart button:

WooCommerce module layout options.

Enter the product ID into the relevant field.

Feel free to add another WooCommerce module and set up the other option so you can compare the product page and single product options.

Just keep the module you like and delete the other.

Step 4: Display Multiple Products on Your Storefront Page

With Beaver Builder, you have a lot of flexibility in how to group and show your products.

To display multiple products on your storefront page, begin by dragging and dropping the WooCommerce module where you'd like the listings to appear.

This time, choose Multiple products from the Layout dropdown. If you don't make any changes, the module displays all of your products by default:

Displaying all products via the WooCommerce module.

There are a few ways you can display smaller groups of products.

First, you can simply enter the individual product IDs of all the items you want to include.

Select the Product IDs option from the Products Source dropdown, then add separate entries and divide them using commas:

Displaying multiple products by product ID via the WooCommerce module.

If you'd like to showcase all the items in a particular category, choose Product Category from the Products Source dropdown.

Then, enter the category slugs of the categories you'd like to display:

Displaying products by category in the WooCommerce module.

You can find the category slug from your WordPress dashboard. Navigate to Products > Categories to see a list of your taxonomies and their slugs:

Finding a product category slug in WooCommerce.

You can use the WooCommerce module to display other subsets of products as well:

  • Recent: Show off your latest products.
  • Featured: Mark items of particular interest as featured and easily display them together.
  • Sale: Create a grouping of discounted products.
  • Best selling: Quickly curate your most popular items.
  • Top rated: Once you've collected some buyer reviews, try drawing attention to your customers' favorites. 

To make use of any of these categories, simply select it from the Products Source dropdown:

Products source options in Beaver Builder.

You can use the WooCommerce module options to make additional tweaks to how your products will be displayed. For instance, you can determine the number of items and columns, as well as the order in which the products are sorted.

Step 5: Customize Your Shop Page Further With WooCommerce Layouts

Another feature that makes Beaver Builder an effective WooCommerce page builder is that it provides you with ways to incorporate additional eCommerce features on your shop pages.

You can find them by using the included WooCommerce layouts:

  • Cart: Enable customers to see what's currently in their shopping carts without having to navigate to the cart page.
  • Checkout: This layout displays the content of your checkout page.
  • Order Tracking: You can use this layout to provide an order tracking form on any page of your site.
  • My Account: Enables customers to view their account information, including past orders and address details.

Once again, you can get started by dropping the WooCommerce module onto your page. Then, select your desired layout from the relevant dropdown:

WooCommerce layouts in Beaver Builder.

Click Save. After you've added the layout to your page, you can still drag and drop it in another location if you change your mind and customize it using the options in the module settings panel.

Conclusion

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 five steps using WooCommerce and Beaver Builder:

  1. Create your products using WooCommerce's built-in features.
  2. Design your storefront page using Beaver Builder.
  3. Add a featured product via the WooCommerce module.
  4. Display multiple products on your storefront page using the WooCommerce module.
Just like your Netflix account, it's okay to share...

About Will Morris

Will Morris is a staff writer at WordCandy. When he's not writing about WordPress, he likes to gig his stand-up comedy routine on the local circuit.

3 Comments

  1. Al on February 4, 2021 at 10:53 pm

    Good article on the technicalities of implementing WooCommerce, which I have found confusing with the amount of additional plug-in required.
    One think your article should address is the cost of implementing WooCommerce, in other words, how many additional plug-in subscriptions are required. This is an important aspect in deciding whether to choose this platform or not.

    • Anthony Tran on February 9, 2021 at 8:03 am

      Hi Al, I think the cost of WooCommerce plugins will really depend on the additional type of functionality that you’ll need in your eCommerce store. Every store will have different requirements thus it’s hard to provide you an estimate.

  2. Roy Randolph on February 25, 2021 at 3:19 pm

    I would have to agree with Anthony, every store has different requirements, which is the beauty of WooCommerce, you can add whatever you need to customize and achieve the best way to showcase and sell your products/services to your customers and give them the best experience possible.

Leave a Comment