WooCommerce Page Builder

How to Use Beaver Builder to Build WooCommerce Product and Shop Pages

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. 

We just launched 6 FREE Beaver Builder courses. Learn how to easily build WordPress websites with step-by-step video tutorials. Get started today.

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

A WooCommerce example product page.

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:

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

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: 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.

The main screen for Beaver Themer, a powerful tool for enhancing your WooCommerce page builder.

 

Go to Beaver Builder > Themer Layouts > Add New:

Adding a themer layout with product settings to help it act as a WooCommerce page builder.

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:

The correct Themer layout settings to use Beaver Themer as a WooCommerce page builder.

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:

The location of the WooCommerce product template in Beaver Thermer.

Select Product > Replace Existing Layout. This transforms your template into a product page, with a few helpful defaults already in place:

Beaver Builder's default product template

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:

Using WooCommerce modules

 

You can use Beaver Builder’s Preview As: feature to change the product that you see while editing the layout:

Previewing different products in Beaver Builder

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:

WooCommerce's default shop layout

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:

Creating a shop page layout

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.

Customizing the product archive page

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:

 

Using a Beaver Builder template

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

WooCommerce layouts in Beaver Builder.

See the WooCommerce module article in our knowledge base for detailed information and examples.

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

  1. Add products to your store.
  2. Design new product pages.
  3. Redesign the WooCommerce shop page.
  4. 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!

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.

Our Newsletter

Our newsletter is personally written and sent out about once a month. It's not the least bit annoying or spammy. We promise.

Try Beaver Builder Today

Just like your Netflix account, it's okay to share...

Related articles

How to build a WooCommerce order form

How to Build a WooCommerce Order Form (In 5 Steps)

If you run an e-commerce store, offering a frictionless buyer journey is crucial for success. However, WooCommerce creates a separate…

Read More...
5 tips for optimizing WooCommerce shop pages

5 Tips for Optimizing Your WooCommerce Shop Pages

Your WooCommerce shop pages are essential parts of your store, no matter what kind of products you sell. As such,…

Read More...
How to Set Up Online Ordering for Your Restaurant Using WooCommerce

How to Set Up Online Ordering for Your Restaurant Using WooCommerce

WooCommerce is a flexible ecommerce plugin that lets you sell practically any product, including delicious restaurant meals. However, just because…

Read More...

Join the community

We're here for you

There's a thriving community of builders and we'd love for you to join us. Come by and show off a project, network, or ask a question.