The North Commerce module is a Beaver Builder module that allows you to display North Commerce elements on your website. The module becomes available in the Beaver Builder UI when you have the North Commerce plugin installed.

In this article, you will learn how to use the North Commerce module to enhance your WordPress site and create a smooth shopping experience for your customers.

What is North Commerce?

Before diving into the details of the North Commerce Module, it’s essential to understand what North Commerce is and how it can help your e-commerce strategy:

North Commerce is a new, all-in-one e-commerce plugin for WordPress, designed to help users create high-performing online stores and sales funnels.

It provides a range of features to build, manage, and optimize online shops, focusing on speed, ease of use, and customization.

Key Features of North Commerce:

• Custom Checkout Forms: Enhance the checkout process with customizable forms that include options for pre or post-order upsells, boosting your sales potential.
• All-in-One Solution: North Commerce provides essential e-commerce features such as subscription products, payment plans, advanced coupons, and review collection without the need for additional plugins.
• Optimized for Speed: The plugin is engineered for speed, ensuring fast load times and a smooth user experience, which is crucial for retaining customers and improving conversion rates.

North Commerce aims to provide a seamless and powerful e-commerce experience within WordPress. It simplifies building, managing, and optimizing online stores.

Introducing Beaver Builder’s North Commerce Module

The addition of the North Commerce Module allows you to display North Commerce elements directly within your Beaver Builder layouts, offering a more intuitive way to build e-commerce pages:

With this module, you no longer need to rely on shortcodes to display products. Simply drag and drop the North Commerce Module into your page and customize it with the familiar Beaver Builder interface.

Benefits of the North Commerce Module:

• Seamless Integration: The module works within with your existing Beaver Builder layouts, making it easy to add e-commerce functionality to your site without learning new tools.
• Enhanced Control: Gain more control over the appearance and functionality of your e-commerce pages, allowing for a more personalized shopping experience.
• Improved Workflow: Speed up your design process with pre-built layouts and customizable settings that eliminate the need for complex coding.

How to Use the Beaver Builder North Commerce Module

Creating a seamless e-commerce experience is crucial for the success of your online store. The North Commerce Module for Beaver Builder simplifies the process of building stunning, fully functional e-commerce websites.

Step 1: Install Required Plugins

Before getting started, make sure you have the following plugins installed and activated on your WordPress site:

• Beaver Builder Page Builder: A flexible drag-and-drop page builder for WordPress that allows users to create custom layouts and designs without coding.
• North Commerce Plugin: An all-in-one WordPress e-commerce plugin designed to help users create high-performing online stores with a focus on speed and ease of use.
• Beaver Themer (optional): An add-on for Beaver Builder that allows users to create custom headers, footers, product pages, and dynamic content layouts for their entire WordPress site.

Once these plugins are in place, you’re ready to begin crafting your e-commerce site.

Step 2: Add the North Commerce Module to Your Page

Navigate to the page where you want to add your e-commerce features and click to open the Beaver Builder editor. Then, click on the “+” icon in the top right corner to access the modules panel.

In the search bar, type “North Commerce” to quickly locate the module. Once you find it, simply drag and drop the North Commerce module to your desired location on the page:

Adding the North Commerce module to your page is the first step in customizing your e-commerce experience. This gives you the flexibility to incorporate product displays, shopping cart elements, or checkout forms directly into your page’s design. This seamless integration ensures that your e-commerce features blend smoothly with the rest of your content, providing a cohesive and user-friendly experience for your visitors.

Step 3: Configure the North Commerce Module

The North Commerce Module offers a range of settings to help you customize the e-commerce elements on your site to match your brand and optimize the user experience.

Under the General tab, you can select from several layout options, each tailored to deliver a specific type of content or user interaction:

Each layout option caters to different aspects of your e-commerce store, helping you create a cohesive and user-friendly experience. Choose the layout that best fits your needs, whether to highlight products, streamline checkout, or enhance your site’s design.

Next, we’ll explore each layout option and provide guidance on configuring them for your store.

Product Page

The Product Page layout allows you to display a single product, just as you see on the default product page. This layout is perfect for highlighting a specific product anywhere on your site, such as on landing pages, blog posts, or custom sales pages.

Select Product Page from the Layout dropdown, then enter the Product Slug to showcase a specific item:

The product slug is a unique identifier for each product and ensures that the correct product information is displayed.

The Product Page layout gives visitors a detailed view of a product, including images, description, price, and options. It’s perfect for promoting featured products, running marketing campaigns, or creating custom showcases that blend with your site’s design.

Furthermore, by placing a product’s full details in strategic locations, you can effectively drive interest and boost conversions.

Product Gallery

To showcase multiple products on a single page, use the Product Gallery option in the North Commerce module. This feature is perfect for creating visually appealing category pages or product overviews.

Select Product Gallery from the Layout field:

The Product Gallery layout displays your products in a clean, organized grid, typically with three columns. Each product is highlighted with its featured image, title, and price, providing visitors with a clear and attractive presentation of your offerings.

The Product Gallery layout engages customers by displaying multiple products at once. This makes it easier for them to find what they’re looking for.

Product Slider

The Product Slider option enables you to showcase a selection of your North Commerce products in a dynamic, interactive slider. This feature is ideal for making your products more visible and engaging to your site visitors.

To create a product slider, select Product Slider from the Layout field dropdown menu:

Using a product slider on key pages, such as your homepage or landing pages, can effectively draw attention to your products and encourage users to explore your offerings, ultimately driving higher engagement and sales.

Checkout

The North Commerce module allows you to embed the checkout process directly within any page or post. This option gives you flexibility in how and where you guide customers through your sales process. By displaying the North Commerce checkout form on custom pages, you can streamline the purchasing process and reduce friction for your customers.

To use this feature, simply select Checkout in the Layout field:

This will automatically display the checkout form, making it easier for customers to complete their purchase without having to navigate away from the current page.

Integrating the checkout form into strategic locations, such as landing pages or sales funnels, can significantly enhance the user experience and improve conversion rates.

Cart

Lastly, the North Commerce module allows you to display the contents of the user’s cart. This feature is particularly useful when building sales pages and funnels, as it enables customers to easily review their selections before checking out.

To use this feature, select Cart in the Layout field. You’ll see a display similar to the example screenshot below:

Keep reading to learn how to customize the default North Commerce Cart and Checkout pages to better fit your needs.

Step 4: Customize Your Layout

After selecting your layout, you can further personalize the appearance of your e-commerce elements.

In the settings popup, click on the Style tab:

These options allow you to create buttons that match your brand and enhance the overall design of your e-commerce site:

Button Style

• Default Style: Set the appearance of the button in its normal state.
• Hover Style: Customize the button’s appearance when hovered over.

Color Options

• Text Color: Choose the color for the button text.
• Icon Color: Set the color for the button icon.
• Background Color: Select the background color of the button.

Button Border

• Border Styling: Customize the button’s border.
• Hover Border: Style the button border for the hover state.

Next, navigate to the Advanced tab:

Adjust margins for spacing, set visibility rules by device type, and apply animations for dynamic user experiences. You can also add custom code with advanced CSS and Javascript settings. These options give you full control over your content’s display and allow precise tailoring to your design needs.

Conclusion

The North Commerce Module for Beaver Builder allows you to create an engaging and functional online store. Combining North Commerce with Beaver Builder helps you build a visually appealing site that enhances the user experience.

The post North Commerce Module for Beaver Builder appeared first on Beaver 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 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. 

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

We’ve assembled a set of WooCommerce sample products for our course Build E-Commerce Sites With Beaver Themer and WooCommerce. You can download the WooCommerce Product Sample Set by setting up a free account on our file-sharing platform Assistant Pro.

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: Insert what you normally see on the WooCommerce cart page.
• Checkout: Insert what you normally see on the checkout page.
• Order Tracking: Insert 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.

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!

The post How to Build WooCommerce Site Using Beaver Builder appeared first on Beaver Builder.

In this post, we’ll discuss why a straightforward checkout process is vital for the success of e-commerce stores. Then, we’ll explore the qualities of an ideal checkout. Finally, we’ll show you how to create a checkout page using Beaver Builder and WooCommerce. Let’s get to it!

Table of Contents

How the Checkout Process Can Impact Your Online Store

For customers, getting to the checkout stage is an important crossroads in their sales journey. Your marketing may have guided them in the direction you had hoped for, but now it’s decision time.

At this stage, 59 percent of customers will abandon their cart, according to cart recovery results from Fresh Relevance. Ecommerce data from SaleCycle even suggests this number may go as high as 84 percent. Simply put, if you don’t want your efforts to be lost at the final hurdle, discovering why customers abandon carts is key.

The latest data on cart abandonment suggests numerous reasons, but most are directly related to the checkout process. For example, 24 percent of U.S. customers who abandoned a cart didn’t want to create an account. This shows the importance of a ‘guest’ checkout option.

Another 17 percent found the checkout process too long or complicated. Moreover, 16 percent complained that they couldn’t see the final amount of their purchase. 

Luckily, most of these issues can be resolved by a high-quality checkout process. Creating a good user experience (UX) is essential if you want a user to make a purchase.

Further statistics from the current state of checkout UX from Baymard Institute have shown that the average site has 31 preventable usability issues as part of its checkout process. These range from issues with the checkout layout to problems with payment methods. Therefore, ease of payment should also be a high priority.

What to Consider When Creating a WooCommerce Checkout Page

As we have learned, cart abandonment is likely an e-commerce challenge for every store owner. Now let’s consider how you can help prevent it by creating an optimal WooCommerce checkout page.

Firstly, you may be tempted to get creative and include special graphics and tools, but these can distract customers from making a purchase. It’s best not to complicate the process. Ideally, your checkout should be straightforward and easy to navigate.

You’d be wise to implement a simple design with plenty of white space and clear labels. Furthermore, the most important information, such as pricing, should be featured prominently.

Since one of the primary reasons for cart abandonment is a lengthy checkout, you’ll also want to simplify as much as possible. After all, the faster the checkout flow, the less time a user has to second guess their choice.

To do this, you can use fewer checkout fields. That way, potential customers only need to supply the most essential information. Additionally, consider using columns if you want to get more information onto the screen without requiring scrolling.

You’ll also want to avoid hard-to-read text colors and sizes, or options that can be presented in a more efficient format. For example, consider using drop-down menus.

Finally, you’ll want to ensure that you provide enough payment options and that your payment gateways are set up correctly. With so much fraud and identity theft, users will want your payment process to make them feel secure in their decision to share personal details.

Creating a WooCommerce Checkout Page Using Beaver Builder (In 4 Steps)

If you want to create a WooCommerce checkout page that will drive conversions, Beaver Builder is an excellent tool for the job. Our intuitive, drag-and-drop builder allows you to preview your designs in real-time. That way, you can prevent the most common checkout issues.

Plus, with modules for your every need, Beaver Builder can save you time when creating pages or entire websites. Keep in mind that you will need an active WooCommerce store to complete this tutorial.

To quickly recap before we get started, our initial tips for creating an optimized WooCommerce checkout design were:

• Use fewer checkout fields.
• Consider using columns to minimize scrolling.
• Avoid hard-to-read text colors and sizes.
• Utilize drop-down menus to present options more efficiently.

Now, let’s get to it!

Step 1: Install Your Beaver Builder Tools

The first step is to get set up with Beaver Builder. If you haven’t signed up yet, you will need to choose a plan. After that, you can download the plugin from your My Account page and head over to your WordPress dashboard.

Go to Plugins > Add New. Then, click on Upload Plugin at the top of your screen:

Now, locate the Beaver Builder .zip file you downloaded previously and select it. Click on Install Now, followed by Activate Plugin.

You will also need to input your license information. To do this, go back to your My Account page and copy your License Key number. Then, from your WordPress dashboard, navigate to Settings > Beaver Builder > License and click on Enter License Key:

After you paste your License Key in the above field, click on Save License Key. That’s it!

Next, you’ll need to purchase WooPack, which is one option in a larger collection of Beaver Builder add-ons. This tool gives you more than ten additional Beaver Builder modules specifically designed for use with WooCommerce.

Alongside a variety of advanced product modules, you’ll also get the WooCommerce Checkout Styler. This sophisticated styler drastically increases the potential for customizing your checkout process. For instance, you can create a one or two-column layout, style the input fields, section titles, colors, buttons, and more.

After you’ve purchased your WooPack plan, simply download, install, and activate it as you did with the Beaver Builder plugin.

Step 2: Insert Your Checkout Page Module

With everything installed, now it’s time to start creating your WooCommerce checkout page. One of the most popular WordPress themes is Storefront. If you’re using this theme, it comes with a default checkout page that looks something like this:

Here, we’re already seeing one of the major advantages of working with WooCommerce. With this theme, we already have a professional-looking checkout. It displays minimal required fields and an order summary presented in an efficient format.

However, there is certainly room for improvement. Let’s see how we can further optimize our checkout using Beaver Builder and WooPack. At this point, you may want to add a few sample items to your cart so you can see how they will be reflected in your checkout.

Then, the first step is to insert your Checkout module. To start, go to Pages in your WordPress dashboard and open your default WooCommerce checkout page using Beaver Builder.

Now, delete the default WooCommerce module, leaving your page blank. Then, click on the + button at the top right corner of your screen. From the menu, select Standard Modules then WooPack Modules:

Next, drag and drop the Checkout module onto your page:

You may notice that this checkout design doesn’t look that different from the default WooCommerce design in Storefront. However, we now have our Beaver Builder customization options in the settings window on the left of the screen.

Step 3: Customize Your Checkout Page

As you’ll see, the customization menu for the Checkout module is divided into Sections, Inputs, Content, Messages, Button, Typography, and Advanced.

First, let’s change the layout to Two Column. This allows us to modify the width of the two columns on the page:

Here, you can play around with what looks best. Keep in mind that you’ll want to ensure the three values add up to 100 percent. If you go above this, the second column won’t appear on the same row.

Beyond the general structure of your checkout page, one critical element to consider is your company’s visual branding. Gray default designs may cause customers to second-guess the authenticity of an online store. However, a checkout that reflects your visual aesthetic can make your website appear more trustworthy.

In this respect, colors can go a long way. First of all, a white or light background is likely the best choice, regardless of your branding. This way, users can easily read the contrasting content.

Now, let’s imagine our brand’s color palette includes cream, orange, black, and white. While the default hues are nicely minimalist, they don’t stand out very well.

To make our fields pop, we’ll go to the Input section. We’ll change the input field background to white and give our fields a 1px black border which helps them stand out a bit more on the page:

Feel free to explore the other options for background colors and text. You even have the possibility of adding shadows or realigning fields. Remember to keep it simple and in line with your website’s overall look and feel.

Step 4: Explore Further Customization Options

Now let’s use more color detailing to further customize our checkout. We’ve changed the odd and even items in the right-hand column to orange and cream:

As you can see, this subtle contrast highlights key information for the customer. This way, they can reference it quickly. In the Typography section, we can also change the text color.

Moving on to the payment section, we can use the Content tab to bring these fields in line with our branding too. We have ensured that our brand orange highlights the critical message about utilizing your Order ID:

You can change other elements in this section, such as Cart Heading, Cart Item, and Payment Method.

Since the black button doesn’t look quite right after changing the payment message, let’s try modifying that as well. When you click the three dots in your settings menu, you’ll find a few more options, which are Button, Typography, and Advanced.

Go ahead and select Button. Let’s change the button’s Background Color to orange and set black as our Background Hover Color. We’ve also made the text black, so it will stand out nicely:

Scrolling down, we’ve also added a black 1px border to make the message even clearer.

Heading over to the Typography section, we can see options for editing every part of the checkout’s lettering. You can alter fonts, sizes, alignment, line height, and color:

Here, we’ll go ahead and set the text to a uniform black. As you can see, we’ve maintained the sound initial structure of the checkout while adding a few touches to bring it in line with our overall site design:

You’d be wise to explore your checkout design options even further. That way, you can discover the exact settings you’re looking for.

Conclusion

Creating a straightforward checkout page isn’t always easy. However, the process can be simple with Beaver Builder and the WooPack add-on. Using a range of customization options, you can create a seamless checkout process that matches your website’s unique design.

To recap, here are the four steps to creating a WooCommerce checkout page:

1. Install Beaver Builder and the WooPack add-on.
2. Remove the existing WooCommerce checkout page and insert the WooPack Checkout module.
3. Customize basic elements like columns and background colors.
4. Personalize more advanced details such as buttons and text.

Do you have any questions about using Beaver Builder to build your WooCommerce checkout page? Ask us in the comments section below!

The post Your Complete Guide to Creating a WooCommerce Checkout Page appeared first on Beaver Builder.

In this post, we’ll explain what an order form is and how it can optimize the user experience for consumers. Then, we’ll walk you through how to create and customize an order form in WooCommerce using Beaver Builder. Let’s dive right in!

An Introduction to WooCommerce Order Forms

WooCommerce is one of the most common solutions for creating online businesses with WordPress. This WordPress plugin is known for its simplicity and user-friendliness.

The default settings in popular themes for WooCommerce stores typically display items with large images and prices:

Sometimes, they include an Add to Cart button. Moreover, product images are usually presented in a grid of three or four items per row. This can take up a lot of space on the page.

Typically, users can browse product pages or type what they’re looking for in the search bar. This layout offers customers a standard e-commerce experience:

In most cases, this basic web design works well because it lets shoppers browse products while also viewing their details. However, this layout isn’t ideal for every e-commerce store. Simply put, so many WooCommerce shop pages might be too complicated for your store’s needs.

That’s when order forms can come in handy. This simplified format condenses all your products onto one page. Items are presented in a table, where each product has its own row:

Order forms provide many benefits. For example, they allow your customers to more easily select the number of products they want to add to their cart, which can speed up the checkout process.

They might be especially appealing to bulk and wholesale buyers because of how easy it is to add a large number of products at once. As a result, this can improve user experience (UX) and boost sales for your business.

Order forms might not be for everyone. For instance, certain shops with a limited product catalog don’t necessarily need this kind of display. While a streamlined buying experience can benefit certain small businesses, you could risk underwhelming buyers if you don’t have enough products to showcase.

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

Now that you know the difference between the standard WooCommerce storefront and an order form, let’s take a look at how you can use one for your WordPress e-commerce site. Keep in mind, you’ll need an active WooCommerce store and the Beaver Builder page builder for this tutorial.

Step 1: Install WooCommerce Product Table Lite

For this walkthrough, we’re going to use WooCommerce Product Table Lite. This is a powerful, highly-rated plugin for creating simple yet professional product tables:

To get the tool, navigate to your WordPress dashboard. Go to Plugins > Add New and look for the plugin using the search tool in the upper right-hand corner of your screen.

Simply install and activate the plugin as you normally would. After you’ve installed it, you should see a new tab for the tool in your left-hand panel.

Step 2: Create a Table for Your Products

Now you’re ready to create a table for your products. To get started, navigate to Product Tables > Add New Product Table:

On the following screen, you should see two available presets, which are Regular table and List layout. You can select whichever you’d like to start with, or choose an empty table editor using the Blank option:

For our example, we’re going to select a Regular table. This will take you to the Product Table page. You will use the shortcode [product_table id=”100″] later:

Next, you can click on new page just below the shortcode field. This will automatically take you to the block editor, but go ahead and select Launch Beaver Builder here:

Now, click the blue plus sign on the top right to reveal the dropdown menu. Under Modules, choose the HTML module:

Drag it onto the page and you will see a blank field:

Now it’s time to add the shortcode. Go back to your dashboard and copy the shortcode product table id:

Paste it into your HTML module and click on Save. This will reveal your product table:

You can also add a heading to this page by clicking the Headings module and dragging it onto the page, above your order form:

Then type the name of your table:

You can modify the name of your table depending on your products.

Step 3: Modify Products in Your Query Table

If you want to use an order form layout, chances are you have a lot of products to organize. That’s why our next step is modifying your query table. This will enable you to handpick which products are shown in your form.

To do this, you’ll need to go back to the Product Tables dashboard and click on the Query tab. Then, select a product category.

For our practice order form, we’ll use the Clothing category. You can further modify which products you want to display by subcategory:

When you’re happy with your selections, click on Save Settings and refresh your preview page from before. Let’s try this with the Tshirts category:

Select Tshirts, then click on Save Settings and refresh your preview page. You should see only the products you selected:

Keep in mind that there’s no need to create a new product table each time you want to show a certain category. The plugin provides you with various shortcode options.

If you want to use another one, simply navigate to the Shortcode Options tab and change the option:

For example, if you want to show one category on your product table, copy the category shortcode:

Paste it into the HTML module, then enter the category name(s) into the shortcode. Here we used “hoodies” as an example:

You can also add multiple tables on the same page by duplicating the shortcode block and typing in different categories:

Here, we’ve added a second order form for “tshirts”:

You can add as many tables as you want and add a heading for each one.

Step 4: Edit Your Product Table’s Columns and Rows

In addition to selecting specific products, you can also customize the columns and rows in your table. This is something to try on the backend and then preview on the front end. Let’s try this out by adding a stock-keeping unit (SKU) column.

To get started, delete the category shortcode in the HTML module. Then, open the Columns tab under Product Tables in your dashboard:

Next, scroll down to the + Add a Column and click on it:

Then, select Add Element under the Cell Template tab. This will open up a window with a menu of elements to choose from. Here, click on SKU:

Next, click Add Element under the Heading tab. Select Text and type SKU:

Afterward, click out of the tab and rename the column SKU:

To move this next to the name column in the top panel, simply click on the up arrow:

Now, you can click on Save settings and refresh your preview page. The new SKU column should now be next to the Name column:

You can also change the number of products viewed per page using a shortcode. To do this, go back to the Shortcode Options tab. You’ll find the limit shortcode:

Copy this shortcode and paste it into the HTML module. Enter in the number of products you want displayed per page. We chose “8” for this example:

You are able to edit many other aspects of your table using the Shortcode Options tab, such as offsets, ids, and SKUs.

Step 5: Customize Order Form Details and Appearance

Beyond what we’ve already covered, you can edit many details of your order form, such as the add to cart button, image sizes, and more.

If you’d like to further personalize your order form, return to the Products Table tab. To edit the add to cart button go to Columns > add to cart:

Then, click on Design. From here, you can edit the color, font weight and family, and background color:

You can also modify the add to cart button by selecting it in the top menu and clicking Button under Cell template:

From here, you can create color, label, and “add to cart” actions, as well as the out-of-stock and Cart Badge selections. You can also customize the font style, color, weight, letter spacing, and border width:

Once you’ve made your changes, just click on Save settings and refresh your frontend preview tab:

There are many other ways you can edit and customize your order form. If you want further guidance on how to take full advantage of the WooCommerce Product Table Lite plugin, you can check out the How to use, Documentation, FAQs, and Support pages at the top of the table:

There you have it! Now you should have a fully functional order form for your WooCommerce site.

Conclusion

Order forms can help streamline the shopping experience in your WooCommerce store. This display format may be especially beneficial if your customers need to buy in bulk. Ultimately, presenting your products in one place can lead to increased conversions for your e-commerce site. 

To recap, here’s how to create a WooCommerce order form using the Beaver Builder page builder:

1. Install and activate the WooCommerce Product Table Lite plugin.
2. Create a table to display your products.
3. Adjust the products in your query table using shortcodes.
4. Edit your table by modifying columns and rows.
5. Customize the details of your order form, such as buttons, image sizes, and font colors.

Do you have any questions about how to create an order form for your WooCommerce store? Let us know in the comments section below!

The post How to Build a WooCommerce Order Form (In 5 Steps) appeared first on Beaver Builder.

In this article, we’ll explore why it’s essential to optimize your WooCommerce shop pages. Then, we’ll take you through five ways to get the job done with Beaver Builder and Beaver Themer. Let’s get started!

Why You Should Consider Optimizing Your WooCommerce Shop Pages

A typical WooCommerce store has key elements: product pages, checkout processes, and review opportunities. However, there’s one aspect that’s particularly important to most e-commerce stores: shop pages.

There are a few reasons for this importance. For one thing, shop pages provide crucial opportunities to show off many of your products at once. You might use several shop pages to organize items into categories or one catch-all page to give a clear overview:

A well designed shop page can be a great resource for your customers. Shoppers can reference it to see what you have to offer them with a single glance. It’s also perfect for those users who are just looking to browse instead of going directly to a specific product.

By the same token, shop pages might also help you introduce new customers to your site. That means that providing a positive user experience can be key.

You can optimize various features of your shop page, including:

• A robust search bar to navigate the page quickly
• Easy filtering functions to narrow down options
• Straightforward ways to contact customer service

Moreover, product pages are also opportunities for Search Engine Optimization (SEO). Quick loading times, natural inclusions of keywords, and internal linking can help your site show up higher in the rankings. This ranking can, in turn, boost your sales.

With so many potential benefits, optimizing your WooCommerce shop pages might be an activity worth prioritizing. Fortunately, you can also make the process easier by following a few essential tips.

5 Tips for Optimizing Your WooCommerce Shop Pages

Here are a few effective ways to take your WooCommerce shop pages to the next level!

1. Choose the Right Tools

If you’re looking to customize a WooCommerce shop page, it’s crucial to pick the right tools. You probably want something powerful yet simple to use. That way, you can create an effective shop page on the first try, but still easily tweak it later.

We designed Beaver Builder with those traits in mind.

Our builder is intuitive with a drag-and-drop interface and tons of ways to perfect your pages. It’s also developer-friendly, meaning you can get involved with any technical aspects as much or as little as you want to.

If you want to maximize Beaver Builder, we recommend using it alongside our other tool, Beaver Themer. This add-on helps you take Beaver Builder to the next level with features such as theme templates, partial layout parts, and post grids for maximum control over your design.

With the help of these plugins, you can optimize your WooCommerce shop page in tons of different ways, including (but certainly not limited to):

• Adjusting the spacing between page elements
• Adding parts to make unique aspects such as sale announcements in headers
• Improving navigation with search bars and breadcrumbs

Before you get started perfecting your shop pages, we highly encourage you to check out these tools – this article will be making use of both. If you’re not ready to invest, you can always work with the lite version instead.

2. Focus on Your Product Photos

Images play an important role in a successful shop page. After all, it’s a key way to provide an overview of your items for sale. Using high-quality photos can be an effective way to communicate your product offerings quickly.

Try to take simple photos that are focused on the products. You can achieve this by using a neutral background. If you can use the same backdrop for your items, this can help standardize the appearance on your product page too.

Additionally, consider taking some time to take photos from multiple angles. That way, you can choose the best result for the shop page and use the other images to enhance the product page:

Furthermore, we also recommend paying attention to the technical aspects. Compressing images will help optimize the page for top speeds, especially on an extensive shop page.

Finally, you might also like to try adding videos. These can be particularly helpful if you want to showcase products performing specific actions. Even a simple, short clip can help make your shop page more dynamic.

If you’re building shop pages for a client, try to communicate the importance of top-notch media elements early in the process. Thankfully, Beaver Themer makes it easy with a variety of modules for dynamically displaying products.

3. Craft Compelling Product Copy

Even if you’re looking to build a minimalist shop page, you’ll most likely want to list the product name and a short description at a minimum. On the other hand, you may also want to make use of the long description.

No matter which written content you choose, we encourage you to write your copy with care. This text is a brief yet important way to sell your products. It can also be a valuable opportunity to include relevant keywords.

Try to make product descriptions short and to the point. Your users should get an idea of what the item or service is, but still be curious enough to want to click on it to learn more.

Moreover, you might want to include information that quickly communicates what makes your products stand out from competitors. If you specialize in highly durable items, highlighting this can help customers associate that benefit with the brand.

Another type of copy to consider could be a Frequently Asked Question (FAQ) section. Including FAQs on the shop pages can help inform customers before they dive deeper into specific products.

Furthermore, try to include information about the store as a whole. For example, you might mention any environmentally friendly practices if that’s an integral part of the brand. You can also use FAQs to get more specific on individual product pages too.

As for design, we recommend that you make the text as readable as possible. For example, try to make sure it contrasts nicely against the overall theme and is large enough to read.

You may also want to adjust the text boxes so they can show off the entirety of the copy instead of cutting it off at an awkward point. Just make sure that you’re following all accessibility guidelines.

4. Invest Time in Building a Distinctive Shop Page

There’s something appealing about a standardized shop page. After all, predictable layouts can make it easier for shoppers to navigate your store. However, this strategy can also make your shop page get lost in the crowd. That’s why we highly recommend trying to make the page distinctive.

Fortunately, Beaver Builder’s default shop page is already standardized. That means you have a lot of freedom when it comes to creativity. You can experiment quite a bit, and rest assured that Beaver Builder will provide the basic infrastructure.

You’ll start with the basic WooCommerce shop page. It may get the job done, but it’s also a tad generic. That’s why we recommend using Beaver Themer to customize the shop page.

This video tutorial walks you through setting up a WooCommerce shop page step by step: 

You will be able to begin with a pre-designed template and you can start dragging and dropping content areas to customize your page.

For example, you might want to include a subscription form on the shop page. You can offer a discount for people who sign up for promotional materials. As a result, they may be more inclined to both join your mailing list and make a purchase.

Don’t be afraid to spend some time here! Even a few basic additions like these can help bring your shop page more in line with your brand. When you’re happy with your work, go ahead and move on to the next step.

5. Don’t Forget the Technical Details

You probably don’t need us to tell you the importance of technical details for a successful website. However, we feel like it’s a point worth repeating: shop pages should be optimized for speed, SEO, and ease of use, just like the rest of the site.

You can start by choosing a lightweight, responsive theme. Too much code can bog down your performance, jeopardizing the all-important element of speed. Additionally, investing time and money into a theme that looks awkward on mobile devices can be frustrating.

A non-responsive theme could also lose you potential customers. Tons of people shop online today using their phones. If browsing products isn’t easy, they may give up on the store altogether.

Similarly, try to create a page that has multiple sharing options. Whether texting a link or posting about the store on social media, these functions can make it easy to get the word out about your shop.

Another technical aspect to consider is navigation. It is vital for large product pages or those with never-ending scroll functions instead of pagination. Making your shop pages easy to find and no further than three clicks away from the homepage is essential.

On that same note, try to include a prominent search bar. That way, users looking for specific items can find them without searching through several different categories. If you can add filters for customized results, all the better:

Finally, don’t be afraid to cater to your audience. Consider using analytics to find out which pages your visitors spend the most time on. Then, you can focus on ways to make the other pages more similar and deliver the features your shoppers appreciate most.

Conclusion

A WooCommerce shop page is an essential part of the sales process. It provides an overview of your products and can introduce your brand to new customers. Fortunately, optimizing this vital element can be easy with the help of a few simple tips.

In this article, we covered five ways to optimize your WooCommerce shop pages:

1. Choose the right page-building tools, such as our Beaver Builder plugin, to support the process.
2. Invest in high-quality photos and videos.
3. Offer descriptive copy in your titles and product descriptions.
4. Build a distinctive shop page with Beaver Themer.
5. Don’t forget to polish more technical aspects such as speed and SEO.

Do you have any questions about creating the perfect WooCommerce shop page? Let us know in the comments section below!

The post 5 Tips for Optimizing Your WooCommerce Shop Pages appeared first on Beaver Builder.

Fortunately, with the right plugins, you can transform WooCommerce into a complete restaurant ordering system your customers and staff will love to use. In this post, we show you how to do just that. Let’s get started!

Why You Might Want to Set Up Online Ordering for Your Restaurant

The internet has completely changed the way we think about food. People worldwide visit restaurant websites, download dedicated food delivery apps such as DoorDash and Uber Eats, and regularly get their favorite meals delivered directly to their doors.

In fact, global revenue in the online food delivery sector has almost doubled since 2017. Furthermore, it is expected to reach nearly $97 billion by 2024. If your restaurant isn’t already offering online ordering, you may be missing out on a huge chunk of potential revenue.

By offering takeout or delivery, you can often connect with an entirely new audience who may be unable or unwilling to visit you in person. This strategy can help expand your reach.

Assuming that you make a good first impression, you might even turn these first-time customers into loyal repeat clients who provide your restaurant with revenue for months or even years to come.

To help you secure more business, you can combine the convenience of online ordering with the immediacy and reduced costs of in-person pickup. You might even accept pre-orders to gain more sales.

Today, the restaurant industry is fiercely competitive. Giving customers this level of flexibility and convenience places you one step ahead of your competition. You could even become the top place to eat in town!

How to Set Up Online Ordering for Your Restaurant Using WooCommerce (In 4 Steps)

There is no shortage of ecommerce and online ordering software. However, the WooCommerce plugin is hugely popular, powering around 4.5 million websites.

This plugin is easy to set up, and supports over a hundred payment gateways, including common names such as PayPal and Stripe. There’s also a huge range of addons you can use to extend the core WooCommerce plugin.

For these reasons, we’ll be using WooCommerce throughout this post. We’re going to assume that you’ve configured the plugin and added all the items that are available for delivery. With that covered, let’s dive in!

Step 1: Set Your Opening and Closing Times

Unless you offer takeout 24/7, you should specify your delivery hours. If you neglect this step, your customers might place orders when no one is available to cook and deliver their food. This would result in a poor customer experience, and possibly even some negative reviews.

You can quickly and easily set your schedule using the plugin Store Hours Manager for WooCommerce. This plugin enables and disables the WooCommerce checkout automatically to match your opening and closing hours:

After activating Store Hours Manager, navigate to WooCommerce > Store Hours and enter your opening and closing times:

Many restaurants take breaks throughout the day, for example in between lunchtime and evening service. You can add multiple time slots to the same day using the + button:

In the Holidays Schedule section, you can enter any days that your restaurant is completely closed for business. When you’re happy with your schedule, click Save Changes:

After setup, Store Hours Manager disables the checkout whenever you’re closed. If you need to manually override these settings for special circumstances, go to WooCommerce > Store Hours and enable Ordering Status in the Force Override Store Schedule section:

This setting is useful if you’re ever forced to close your doors at short notice. For example, your head chef has just called in sick, you’ve sold out of stock early, or you need to suspend takeout in order to cater a private function.

Step 2: Add a ‘Store Closed’ Notification and Countdown

Next, you can specify which actions customers can perform while your store is closed for business. To make these changes, select the Actions tab:

By default, Store Hours Manager will disable the checkout whenever your restaurant is closed. However, customers can still add items to their shopping carts. This is useful if you plan to accept pre-orders.

Alternatively, you might prefer to hide the Add To Cart button completely. For example, you might be concerned about customers wrongly assuming that you’re open for delivery:

If you upgrade to Store Hours Manager Plus, you get access to some additional features that can help you avoid this confusion. For example, it has a widget that can appear throughout your site and notify customers that you’re currently closed:

You can configure this widget on the Widget tab. By default, the notification appears at the bottom right of the screen but you can change its position to make it more noticeable:

You can also edit the widget text using the Text for Hours Open Modal and Text for Hours Close Modal settings. You might even decide to create a sense of anticipation in your hungry customers by adding a countdown:

This timer appears as part of the collapsed modal. To count down the hours until you open your doors, select the following checkbox: Show Open/Close Countdown on Schedule Modal.

Step 3: Give Your Customers a Choice of Delivery or Pickup

When it comes to delivering delicious takeout, accepting the customer’s order is only the first step. You also need to handle the logistics of getting the meal to the buyer.

Although the core WooCommerce plugin has delivery settings, it isn’t designed to meet the specific needs of the food industry. For this reason, we suggest using the Takeout and Delivery plugin that’s designed with features specifically for restaurants. With this plugin configured, your customers can seamlessly choose between in-person pickup or delivery, and you can optimize your back end with restaurant-appropriate settings.

After activating the Takeout and Delivery plugin, you get access to some new tabs in the WooCommerce > Store Hours dashboard. To start, select Order Type.

Next, scroll to the Checkout Settings section and specify whether you offer pickup or delivery, or both:

These options now appear on your checkout page. After making their selection, your customers get access to some additional choices:

You can customize the text that appears in this section using the Label fields. For example, you might change the prompt that appears alongside the delivery scheduling calendar:

To maximize your sales, you could accept pre-orders. To offer advanced ordering, select the Closed Hours & Holidays checkbox:

If you enable this setting, it’s vital to communicate that your restaurant is closed and that you’re only accepting pre-orders. You can add a warning to your modal widget or some extra text to your checkout page.

The Takeout & Delivery plugin offers advanced features, such as order volume management:

To ensure that your kitchen has enough time to prepare the food, use the order volume management feature to define how many online orders you want to accept in a specific time slot. We recommend using this feature to avoid keeping your hungry customers waiting.

Step 4: Print Your Orders and Receipts Automatically

The last step is providing your customers with physical receipts and your kitchen with food fulfillment tickets. Out of the box, WooCommerce cannot configure your orders into a readable receipt format or print them out automatically but there are other solutions.

Automated printing saves time and errors while benefiting your staff and creating a better experience for customers by getting food in their hands quickly. To put this strategy into action, use the Print Manager Plugin powered by BizPrint Cloud Service:

BizPrint enables many advanced features that aren’t typically accessible from a standard WordPress plugin. The cloud enables you to automatically send your orders to multiple printers. You can even assign the printers based on product category.

For example, you might send all products under a “beverage” category to a thermal printer at your bar, and only send orders that contain a “hamburger” category to the printer that’s located near your chef’s grill:

After activating this plugin, configure all the different printers that you want to use for your WooCommerce orders. To add these locations, navigate to WooCommerce > Print Settings > Locations. Then select Add New, and complete the following form:

Once you’ve added all your printers, click the General tab, then Enable Automatic Printing. You can now specify the information that Print Manager for WooCommerce should include in your printouts:

You can use this free plugin to print up to 50 orders. However, as your new takeout business attracts more customers, you may need to upgrade. To help support your growing business, BizSwoop offers various plans, starting at $10 per month.

Conclusion

There are more people ordering takeout than ever before. If you’re not online, then you could be missing out. By setting up online ordering for your restaurant, you can appeal to customers who may be unable (or unwilling) to visit you in person.

Let’s quickly recap how to transform WooCommerce into a food-focused online ordering platform:

1. Specify your opening and closing times with the Store Hours Manager for WooCommerce plugin.
2. Add a ‘Store Closed’ notification and countdown.
3. Give your customers a choice of delivery or pickup with the Takeout and Delivery plugin.
4. Print your orders and receipts automatically using the BizPrint Cloud & Print Manager for WooCommerce plugin.

Do you have questions about any of the WooCommerce plugins mentioned in this tutorial? Let us know in the comments section below!

The post How to Set Up Online Ordering for Your Restaurant Using WooCommerce appeared first on Beaver Builder.

In this article, we cover the anatomy of an effective product page. Then we explore how Beaver Builder can help you build one. Finally, we take you through four easy steps to design your own WooCommerce single product page. 

The Essential Elements of a Product Page

If you’ve ever shopped online, you’re probably familiar with the information that customers need. Details such as each product’s title, price, and description are almost always necessary, as well as key features like an “Add to cart” option. Other elements such as a variety of high-quality product images can be helpful.

Of course, that’s just for the simplest of online stores. There are other options you can incorporate to enhance your product display. For example, you can add a section to display customer ratings and reviews, which can help encourage visitors to convert.

Practicality isn’t the only aspect to think about. A well-designed page can be crucial, too. If you can make your product pages easy and even enjoyable to spend time on, users are more likely to become customers.

Finally, it’s important to consider a site’s brand identity before you start building product pages. Not only will this help determine elements such as color and imagery; it can also guide your choices about what features to include. A minimalist storefront may provide just the basics about each item, while a large store that sells complex projects may require detailed and thorough product pages.

Why Beaver Builder Is a Top Choice for Creating Product Pages

So how do you create product pages that convert? The good news is that our own Beaver Builder makes for an excellent WooCommerce single product page builder. It’s a premier solution with a lot of possible uses. However, there are a few features that make it perfect for this purpose in particular.

For one, Beaver Builder lets you view your product pages from the front end as you create them. This lets you see exactly what customers see, which in turn can help you build more intuitive pages.

Additionally, our tool works on a module-based system. As such, you have a lot of freedom with your designs and can drag and drop elements as needed to build a product page quickly. If you opt for the premium version of Beaver Builder, you gain access to a much larger library of modules, including one designed specifically for WooCommerce.

If you want even more design flexibility,  Beaver Themer can help as well. This add-on plugin fully integrates with Beaver Builder to give you control over parts of your site that are normally controlled by the theme, such as archive and single posts, which in WooCommerce translate to product collections (like the shop and product category pages) and single products. By using Beaver Themer to design your product pages, you can ensure that they mesh perfectly with the rest of the site’s design.

Finally, Beaver Builder is multifaceted. Layouts for WooCommerce pages are a very small part of the ways you can use Beaver Builder to enhance your layouts and speed up your design process. This makes Beaver Builder an effective all-around tool for most developers.

How to Design a WooCommerce Single Product Page With Beaver Builder (In 4 Steps)

If you’re still not sure whether Beaver Builder is the tool for you, look no further. Here’s the four-step process of creating a simple product page for a WooCommerce store, to illustrate both how easy it is and how many options you have available.

Step 1: Set Up Your Technology

First, make sure you have all the tools you require. That means starting with WooCommerce:

If you’re reading this walkthrough, you may already have this software installed and activated. There should be at least one product listed. If you don’t have WooCommerce yet or could use a refresher, check out our comprehensive WooCommerce guide for more info.

After the bones of your store are in place, you can purchase, install, and activate the main Beaver Builder plugin:

To follow along, you need the premium version of Beaver Builder, as well as the Beaver Themer add-on. If you’re not ready to commit to a purchase just yet, you can also check out our live demo site to get a better idea of what Beaver Builder can help you do.

Step 2: Create a Singular Themer Layout

Once you have everything in place, you can move on to creating a layout. First, navigate to your WordPress dashboard. Select Beaver Builder > Themer Layouts:

This will bring you to a page listing all of your existing Themer layouts. If you’ve just added Beaver Themer to your site, the page is empty. Click Add New:

Themer Layouts have a lot of potential, but we’ll focus on product pages right now. Start by giving your new product page a title. Then set Type to Themer Layout and Layout to Singular. When you’re ready to move on to the next step, click on Add Themer Layout.

Step 3: Add the Product’s Essential Elements

The next step is to set up your page’s basic layout in the Beaver Builder editor and add some key features.

If you just completed the previous step, the next screen looks like this:

This screen is where you specify where your layout applies. Under Themer Layout Settings, click Choose to open up a dropdown menu.

Scroll until you find Product and select the subcategory that’s also named Product. This generates another field, where you should select All Products:

Click Publish, then on the next screen click Launch Beaver Builder. 

In the upper right-hand corner of the Beaver Builder editor, click the Plus sign to open the Content panel. Click the Templates tab to view your options:

Click the template on the right labeled Product, which opens the following pop-up:

Be sure to choose Replace Existing Layout. This will help ensure that you’re building a specialized page, and not simply adding a template onto the existing one.

Now you should be looking at a rough preview of your new product page. You may need to adjust some fields to get the look you’d like. Here’s an example of an applied template with no customizations:

As you can see, there are a few placeholders. Some, such as the woocommerce_template_single_rating field, populate content depending on information previously submitted by customers for a particular product.

You can now select each module to edit its individual settings.

Step 4: Enhance Your Page With More Features

Now that you have the basics established, you can start adding and tweaking elements. You can change a variety of options to tailor your page to a specific purpose and brand.

You may want to begin by dragging modules around to rearrange the layout. For example, you can move the product image to a more prominent space if you want to focus on the visual aspect of an item:

It’s easy to picture your changes in the context of an actual product by previewing individual items. At the top of the page, locate the Preview as option and select the product you want to see from the dropdown menu. This gives you a preview of a particular item in your WooCommerce store.

This feature can also help you determine what further changes need to be made. For example, you may find that products with lengthy descriptions display better if noncritical information is placed near the bottom of the page.

You can also add new modules to your page. Beaver Themer comes with several that have been specifically designed to work with WooCommerce. To find these, open the Content panel again by clicking the Plus icon in the top-right corner. On the Modules tab, select Group > Themer modules:

You can see plenty of WooCommerce-specific modules, some of which already appear in the template that you selected. Adding a Breadcrumb module can be helpful for easier navigation.

Finally, you can consider building a separate sales page. Individual products are important, but a sales page can help you more effectively close deals and boost overall profits.

Conclusion

Finding the perfect WooCommerce single product page builder can be difficult. Since products are such an important part of your site, it’s essential to make sure they look good and provide all the information required to help customers make a decision.

You can use Beaver Builder and Beaver Themer for all your product formatting needs. It just takes four easy steps to design a new WooCommerce single product page:

1. Install and activate WooCommerce, Beaver Builder, and Beaver Themer.
2. Create a singular Themer Layout to apply to your site.
3. Add the basic product elements such as product title and price.
4. Enhance your page with extra features as necessary.

Do you have any questions about using Beaver Builder as your WooCommerce single product page builder? Let us know in the comments section below!

The post How to Design a WooCommerce Single Product Page With Beaver Builder (In 4 Steps) appeared first on Beaver Builder.

In this article, we’ll introduce you to the Beaver Themer add-on for Beaver Builder, discuss why it pairs well with WooCommerce, and describe what features it offers that go beyond the capabilities of the Beaver Builder plugin and Beaver Builder Theme. Then we’ll walk through the steps to create a custom WooCommerce product page with Beaver Themer that will wow your customers with beautiful product pages and theme designs.

An Introduction to Beaver Themer

Beaver Themer adds great power to Beaver Builder in several different ways. 

First, it extends Beaver Builder’s layout options to apply to pages or parts of pages that are normally controlled by your theme. These include:

• Pages generated by WordPress, such as blog archives and your Shop page
• Single post information outside the content area, such as post title, featured image, post metadata, related articles, and post navigation.
  WooCommerce single product pages are a type of single post.
• Headers, footers, 404 pages, search results.

Having complete control over the layouts of these areas is like having a theme developer in your pocket.

Second, Beaver Themer effectively creates “theme templates” that you can apply across your site or to particular locations. This means that you can create one layout (header, footer, banner, and so on) that applies to multiple posts, pages, or WooCommerce products. 

Third, Beaver Themer adds two important features to Beaver Builder: field connections and conditional logic, both of which include special WooCommerce settings.

• With field connections, in your row, column, or module settings you can create dynamic connections to database fields, so the content changes depending on which page you’re viewing. Field connections are what turn Themer layouts into templates that work on every page they’re displayed, but you’ll have this same functionality in standard Beaver Builder layouts. For example, field connections on static pages let you display custom fields in your layouts. This means you can add or edit custom content in the back end without worrying about how it’s going to be displayed.
• With conditional logic, you have fine-grained control of the visibility of Themer layouts rows, columns, and modules, depending on the conditions you create. For example, you could display a banner to users with $75 in their cart that says they’ve earned a free gift and another banner to users with under $75 in their cart that they get free shipping with $75. Or you could display a special Themer header that is only seen by repeat customers after they log in to their account.

Fourth, Beaver Themer has a number of WooCommerce-specific modules that give you full WooCommerce functionality in WooCommerce layouts. We’ll describe those later.

Finally, you’ll be able to accomplish all of this using the familiar and user-friendly drag-and-drop Beaver Builder interface. Best of all, you won’t have to touch a line of your theme’s code. When paired with a supported theme, Beaver Themer provides you with a huge range of modification options for your website.

Considering the power and efficiency you’ll have at your fingertips, Beaver Themer is reasonably priced at $147 per year.

Beaver Themer requires any of the premium versions of Beaver Builder, which start at $99 per year. Like Beaver Builder, you can use Beaver Themer on an unlimited number of sites.

Beaver Themer can easily pay for itself with the time, effort, and cost saved on customizations, templates, and maintenance.

WooCommerce Integrations in the Beaver Builder plugin and Theme (and How Beaver Themer is Different)

The Beaver Builder plugin and Beaver Builder Theme have several WooCommerce integrations.

First, in standard Beaver Builder layouts, you can list WooCommerce products with a Posts module. Here’s a screenshot showing all products in the category of Accessories. You can filter products by listing or excluding product categories or product tags, or you can display only specific products. The Posts module is great for displaying WooCommerce products on a static page, but to get the WooCommerce functionality of a Shop page that ties into the shopping cart and checkout pages, you need Beaver Themer. 

This module is great for manually building parts of WooCommerce displays in static pages or post content layouts, but even if you save it as a layout template and reuse it, you might have to make changes on each page. With Beaver Themer’s templating ability, you can set up field connections that display the data you want on each page.

Third, the Beaver Builder Theme has a variety of settings for WooCommerce Shop and product pages, as shown in this screenshot. Just like with any theme, no matter how many settings there are you can’t tweak the layout to appear exactly the way you want it, but with Beaver Themer you can achieve a truly custom layout, and you can add any custom fields to your layout to make your Shop and product pages unique.

How to Customize a WooCommerce Product Page With Beaver Themer (In 5 Steps)

We have a great step-by-step video tutorial that demonstrates how you can use Beaver Themer to customize your WooCommerce product pages or Shop page. Watch the video below…

Here’s how to create a custom Themer product page layout in just five steps.

Step 1: Set up your Beaver Builder/Beaver Themer/WooCommerce environment

This tutorial requires that the WooCommerce plugin, any premium version of the Beaver Builder plugin, and the Beaver Themer plugin are installed. 

If you don’t yet have products in WooCommerce, create some in the normal fashion, or if you’re impatient, you can import the WooCommerce sample data. Having a basic set of products helps you to preview the Themer layouts as you’re building them. 

Step 2: Add a New Themer Layout

Now the fun starts! Let’s create a Themer layout to display a single product.

In the WordPress admin sidebar, click Beaver Builder > Themer Layouts and then click the Add New button at the top of the screen:

Name your layout and select Singular in the Layout field, which applies to any type of single post. Click Add Themer Layout:

Let’s apply this layout to each product page. For Location, choose Product and then All Products:

Click Update when you’re done selecting the location.

Step 3: Select the Template option from the Themer Menu

Click Launch Beaver Builder in order to open your layout in Beaver Builder:

The initial layout is more geared towards a post than a product page. To change this, open the Content panel by clicking on the plus (+) symbol in the upper right-hand corner of the page.

Select Templates, choose the Product template: and choose the option to replace the current template.

You can click Preview in the top bar of the editor to choose a specific product page to preview as you work on your layout.

The template may not look exactly like what you had in mind, but many of the special Themer WooCommerce modules are already included in the template with their field connections in place, so you can rearrange and style the modules on the page rather than constructing a layout from scratch.

Step 4: Customize Your Product Page Layout

Now that you have something to work off, you can start moving, deleting, and adding rows, columns, and modules in your layout. As you can see in this screenshot, in the Themer modules group there are many WooCommerce-specific modules to choose from:

Many of these modules are already included in the Product template, and you can mouse over any module’s Wrench icon to see which module it is:

 To make the most out of this powerhouse of design tools, there are a few WooCommerce modules you might want to test out on your site, including: 

Product Rating. This module is a nice addition that displays the average customer rating and the number of reviews for a given product. It’s already in the Product template, and if there aren’t any product ratings yet, you’ll see a code placeholder:

• Add to Cart Button. In WooCommerce, the Add to Cart section includes product variations and quantities, so the Add to Cart Button module also has those settings.
• Related Products. Cross-selling is an effective way to increase revenue, and the Related Products module lets you use this technique. Using standard WooCommerce functionality, it displays a feed of products that share the same tags and categories as a given item.
• Product Upsells. If you’ve configured products as ‘upsells’ in your WooCommerce product settings, the Product Upsells module displays them under the heading You may also like…. This is a simple way to display more expensive products your customers might be interested in instead of the item they’re viewing, resulting in more income for you.

You can use other WooCommerce modules in the Themer modules group to display description, image, price, title, and other details about your merchandise. You can reference the Beaver Themer Knowledge Base to learn more specifics about the available WooCommerce modules.

Of course, you aren’t limited to WooCommerce modules. You can also use any of the Beaver Builder modules in either the Standard modules group or the Themer modules group. 

Step 5: Save and Publish Your Page Layout

Once you’ve made all the edits and adjustments you want, click the Done button. You can then either save your layout as a draft or publish it to apply it to your product pages: 

You can also revisit your Beaver Builder > Themer Layouts menu at any time and adjust the settings for your new layout. If you decide you want to apply it to only a few items instead of all your products, this is where you’ll make the change:

If you recall the Product template we started with, you can see how just a few drag-and-drop adjustments with Beaver Themer can make a huge difference in a product page’s layout:

Time to admire your work!

That’s it, you’ve created a custom Themer layout for single products! And you can see that it won’t be hard to produce a page that really looks great and is easy to maintain and modify in the future.

The procedure is very similar to customizing Shop pages. Just start with an Archive-type Themer layout and go from there.

Conclusion

The Beaver Builder plugin offers several ways to display subsets of WooCommerce products on static pages and in post-content layouts. The Beaver Builder Theme has a number of Customizer settings for WooCommerce Shop and product pages. 

But Beaver Themer gives you the power to customize your Shop and product pages exactly how you want them and apply these layouts dynamically wherever you choose. By utilizing the available WooCommerce modules, you can take your product pages to a whole new level.

Creating a custom product page with Beaver Themer is quick and easy if you follow these five steps:

1. Purchase, download, and install Beaver Themer. 
2. Create a new singular layout. 
3. Select the product template option.
4. Customize your new layout with modules. 
5. Save and publish your page layout.  

Do you have questions about the Beaver Themer add-on for Beaver Builder? Share them with us in the comments section below!

The post How to Customize a WooCommerce Product Page Using Beaver Themer appeared first on Beaver Builder.

What is the reason for its immense popularity?

WooCommerce is easy to install, offers many features through premium extensions, and is a trusted brand in the WP community.

But building an eCommerce store with WooCommerce can sometimes feel overwhelming. Its flexibility leads to an immense number of decisions, and there’s definitely a learning curve.

In this post, I will explore some of the best places to get WooCommerce support.

Where do you find the best WooCommerce help?

There are lots of online resources where you can find help and support for WooCommerce. I’ve listed the top resources here, in no particular order.

1. WooCommerce Official Website

The official website of WooCommerce is a great resource for you. On the website, you can find information about the plugins, add-on extensions, product guides and more.

There are different variations of support available as well.

• WooCommerce Docs – provides tutorials, reference materials, and detailed step-by-step walkthroughs.
• Customer Support – if you’re already a customer you can contact the WooCommerce support team for assistance.
• WooCommerce Blog – the blog is a great free resource with tons of helpful tips and tricks about WooCommerce.

Using the official website will guarantee you get the latest most up to date information about the product and resources.

2. Reddit

Reddit is an online community platform that has over 300 million global users with every type of interest, who discuss, argue, and share their knowledge and opinions.

Reddit also has an active thread for WooCommerce help and support, and it can be the best way to get technical advice from professional developers.

You usually won’t find basic-level solutions here. Most of the advice and discussions deal with higher skills and pro-level questions.

However, the discussion is secure and reliable. You don’t need to worry about biased or promotional posts.

If you love a forum type environment than Reddit is a great place to ask for WooCommerce help.

3. Quora

Quora is the biggest Q & A platform. There’s no special WooCommerce area, but when you ask a WooCommerce question you’ll find some expert WooCommerce answers that can solve your problem.

Quora is free to use, and once you’re logged in you can use the search bar to find answers to questions from other users about WooCommerce.

Because it’s an open platform, you’ll also see a lot of posts from spammers and marketers, so beware of information and links that you follow.

In spite of this disadvantage, Quora can be another great resource for WooCommerce support for anyone, beginner to pro.

4. WordPress WooCommerce Support Forum

WooCommerce has a free version that you can download in the WordPress plugin repository. In this area, you’ll find the support forum for basic help.

This forum is active and maintained by professionals who developed the plugin. You can find answers from other people who have posted questions on the forum as well.

If you don’t find an answer to your question you can register and submit a question.

It’s a great place to start, but you may get a quicker response using other platforms.

5. Advanced WooCommerce (Facebook Group)

This group is the official WooCommerce Facebook Group. But don’t let the name “Advanced WooCommerce” scare you as it’s open to people at all levels.

It’s a place for WordPress developers, store owners, and WooCommerce enthusiasts to connect, ask questions, share ideas. Ultimately, it’s a source of support for people seeking help with their WooCommerce project or store.

There are over 22,849 members and it’s one of the most active Facebook groups concerning the WooCommerce plugin.

You can request to join the group as it’s free. However, the group is not designed for you to promote your website or services. If you violate these rules you could be removed from the group.

6. The WooCommerce Slack Community

I bet you’ve heard about Slack. But, just in case you haven’t let me explain.

Slack was created to “make work life simpler, more pleasant and more productive.” Many companies use Slack as an internal communication area for their employees.

But, people can also create their own online Slack Communities using the platform as well.

There are many great features within Slack for example:

• You can have direct messages with people within the community.
• You can explore different Channels within the community that discuss various topics.
• Slack also offers an easy to use search tool so you can find answers to previous discussions.

The WooCommerce Slack group is free to join and currently has over 6,516 members that are ready to assist you.

Whether you want to use Slack to communicate with other WooCommerce fans or use it for your own team, Slack is a secure and robust communication tool.

7. WooCommerce Help & Share (Facebook Group)

Help & Share is another Facebook group dedicated to WooCommerce with more than 27K active users. It’s a closed group so you have to request to become a member, but it’s not hard to get approved.

Similar to the official Advanced WooCommerce Facebook Group it is used as a place to share ideas, ask questions, and connect with other members within the community.

This group does allow you to share your products and services if they’re related to WooCommerce, but I suggest making sure you’re an active contributor before soliciting your website.

This group’s guidelines require that you state your problem clearly, and they prohibit any spamming.

The members range from beginner to pro level, so you’ll get a wide variety of answers to any question you ask.

8. Verified WooCommerce Experts

For those problems you just can’t solve yourself, WooCommerce offers a list of service professionals you can use to hire for assistance.

These are hand-selected experts that understand WooCommerce inside and out. You can search for an expert that matches your criteria and budget.

If you need to get some special assistance for your WooCommerce shop, a Verified WooCommerce Expert can be an excellent resource.

9. Local WooCommerce Meetup Groups

If you like to meet people face to face in your local area then Meetup is a great resource for you.

At Meetup, you can search for the nearest WooCommerce community and join their activities to improve your skills and get answers to your questions.

First, sign up here, then search for groups in your area and join any that look promising.

If you can’t find an existing WooCommerce Meetup group that meets your interests, consider starting your own Meetup group and arrange a meeting.

10. Codeable

Similar to the Verified WooCommerce Experts, you can hire top WordPress freelance developers to assist you with your WooCommerce website.

Codeable allows you to post your project request for free on their marketplace platform. Freelance developers will review your project and provide you a proposal to complete it.

You can submit projects for the following:

• Customize Extensions for WooCommerce
• WooCommerce Troubleshooting
• WooCommerce Maintenance
• WooCommerce Customizations
• WooCommerce Performance Optimization
• WooCommerce Shipping & Tax Setup
• and more…

Over 8,000 WooCommerce clients have used Codeable for custom work. The rates range from $70 – $120 per hour.

Final Thought

With all of these WooCommerce support sites available, you’ll be able to find the help you need as you build your shop.

I also wanted to mention that Beaver Builder has a built-in WooCommerce module that enhances your ability to design beautiful layouts to display WooCommerce products and embed WooCommerce product listings in other parts of your site.

If you’re looking for an easier way to create a beautiful WooCommerce site, be sure to try out the free Beaver Builder live demo.

Hope you enjoyed this article and good luck with your WooCommerce store. Cheers!

The post Top 10 WooCommerce Support Resources Online for Beginners and Pros appeared first on Beaver Builder.