It can be exciting to create an online store. It contributes to your business’ success to have a great storefront. However, if you want to design a shop that works well, you may struggle.
An eCommerce site that is both pleasing to you and your customers can be created with the help of a WooCommerce page builder. Let’s take a look at the WooCommerce plug-in. Our next step will be to demonstrate how easy it is to create your online store with Beaver Builder. Come on, let’s get started!
Contents
A Brief Introduction to WooCommerce
With WooCommerce, you can add eCommerce functionality to your WordPress site so that you can sell your products online:
In addition, you’ll find yourself in good company, since WooCommerce is projected to have a market share of about 28 percent by 2020.
WooCommerce is an open source, highly customizable solution, just like WordPress. With it, you can set up payment gateways and different shipping options, and get started with your eCommerce empire immediately.
Using WooCommerce, you can also create, edit, and manage your products:
Using WooCommerce add-on plugins gives you access to many other features.
Building WooCommerce Shop and Product Pages with Beaver Builder (In 4 Easy Steps)
However, before you can get to grips with WooCommerce’s features, you first need a website to launch. Start by installing and activating the WooCommerce, Beaver Builder, and Beaver Themer WordPress plugins. Now you’re ready to create your product and shop pages.
Step 1: Create your store by adding products
Create listings for your products as the first step to setting up your shop. When you use WooCommerce, you can sell physical goods, digital goods, and items with variations (like size and color).
You can install a sample product set provided by WooCommerce to get a sense of how the system works with different types of items if you are new to WooCommerce. Several WooCommerce product features are explained here, including variation and sale options.
You will learn how to create a basic product, if you’d like to start from scratch. No matter what you plan to sell, the other sections in this post will benefit you.
Create a new product in your WordPress dashboard. Select Products > Add New in the menu to the left. Fill in the following fields for the item you wish to add to your store:
You can set most of the important parameters for your item by scrolling down to the Product data panel, including pricing, taxes, and shipping. In WooCommerce, you have the option to include taxes and shipping options for products, which can be overridden on an individual basis.
Decide whether your product is downloadable or virtual in the General settings. Keep the boxes unchecked if the product is a physical one:
As well as inventory management, you can begin. Connecting products gives you the option to cross-sell and up-sell.
You can also add a second, more brief description of your item under the Product short description field, below the Product data panel. Storefront listings typically contain this information.
You will see product categories and tags to the right of your screen. Here are some helpful organizers:
Your product listing should include a picture or two. The following options are available: single images or groups of images:
You can either upload a photo from your device or add an image from your Media Library. In the same way, you can add images to product galleries. The images can simply be dragged and dropped to reorder them.
Step 2: Design New Product Pages
To display your products, you can create product pages. The Beaver Themer video tutorial provides step-by-step instructions on how to customize WooCommerce single product pages.
Beaver Themer is a powerful tool for extending Beaver Builder into a WooCommerce page builder. You can apply templates to your whole site with this add-on.
Click Theme Layouts > Add New in Beaver Builder:
Your layout should have a title. You must select your layout and type before clicking the Add Themer Layout button.
Continue to make sure the new design is applied to every product page as you move on to the next page. In the second box, choose All Products under Location, then select Product:
You can edit your layout with Beaver Builder after saving your work. Starting at the top-right corner, click on the blue plus sign. Once you have clicked Templates, click New:
Replace existing layout by selecting Product > Replace Existing Layout. A few helpful defaults are already in place, which turns your template into a product page:
Adding or removing WooCommerce modules from your basic layout is possible once you have it. The WooCommerce modules can be accessed via Modules > Theme Modules > WooCommerce. Aside from product ratings, descriptions, upsells, and many others, you’ll have a lot of options:
While editing a layout, you can switch to seeing another product by using the Preview As: feature in Beaver Builder:
With that feature, you can check out how each of your products looks when you view them. Publish your product page once you’re satisfied with the design and modules it includes. Your single product pages will now be styled in the new format.
Step 3: Create a WooCommerce Shop Page
It’s time to give the shop page the same treatment as your WooCommerce products. A default WooCommerce shop layout is very simple and not very exciting:
When designing your Shop page, Beaver Themer is a better choice. Start by going to WooCommerce > Settings, clicking the product tab, and making sure the Shop page points to Shop or any other custom page you have created. It displays your products as an archive page if you specify one.
Select Themer Layouts > Add New in Beaver Builder > Theme Builder and then click Add New. Choose the Theme Layout option under Type on the next screen:
The following screen will allow you to choose the location of the Product Archive. Your store’s products will be displayed on the Shop page and product category pages. If necessary, you can modify it.
By clicking on Launch Beaver Builder, you will be able to customize your layout. The following page appears when you click the plus sign at the top of the screen and then click Templates:
A new shop page can be easily created using the Products template. Using all the tools we’ve covered up to this point, you can make changes to the template once it’s created.
Ensure that your shop layout fits with the Posts module style settings by tweaking them until they fit.
At the top of the screen, click Done > Publish once the changes have been saved to the module.
The last thing you need to do is ensure that whatever page you designated as your Shop page appears in your site’s navigation menu. Otherwise, you can add it from the Appearance > Menus section of the WordPress dashboard.
Step 4: Customize Your Shop Page Further With WooCommerce Layouts
A WooCommerce module is also an excellent feature of Beaver Builder that makes it an excellent WooCommerce page builder. It enables you to add parts of WooCommerce functionality to any Beaver Builder structure on your site. The following options are available in this module:
- Single and multiple products:
- You can display selected products based on product IDs or categories, or you can show products that are on sale, recent products, top-rated products, or anything else you want.
- Cart: Displays the contents of the WooCommerce shopping cart.
- Checkout: Displays the checkout page as it would normally appear.
- Order Tracking: Enters information about orders in this form.
- My Account: This page contains the information normally found on the My Account page, such as account information, past orders, and address details
Quick Links
Conclusion
Creating an online shop that represents your brand effectively is a challenging endeavor. The process can be made easier, however, with the help of Beaver Builder, a plugin for WooCommerce.
As you can see, we have outlined four important steps for building your storefront using both WooCommerce and Beaver Builder:
- Create a store by adding products.
- Design a new product page.
- Create a new WooCommerce shop page.
- With WooCommerce layouts, you can further customize your eCommerce site.
Is there anything you want to know about utilizing Beaver Builder to build product and shop pages? Please share your thoughts below in the comment section!
