Articles About WooCommerce

If you’re looking to add a product builder to your online store, it simply can’t be done with WooCommerce as it comes. But if you want to allow customers to customize products without having to add a huge number of variations, you can achieve this by installing the right plugin.

By the end of this article, you’ll know exactly how to add a customizable product builder to your WooCommerce store. This will allow customers to visually create customized products to suit them.

But before we get into the detail of making that happen, let’s go over the reasons why having a product builder is a must-have feature for your store. We'll also compare two fantastic plugins which take different approaches to building customized products so that you can choose the one that best meets your needs.

Why you might want to use a product builder in WooCommerce

Imagine this: a customer lands on your product page, and is excited about the shoe in front of them. They love the sneaker design, the material, and the price. Great! Except, the lacings of the shoe are not in the color they like.

They’re struggling with the purchase because they know this color doesn’t particularly suit them or their personal preferences, but they can’t see other colors available (although you have more!). Without a proper product builder in your WooCommerce store, you might lose this potential customer.

You may also like: Use WooCommerce to sell 'Build Your Own' products: Veg boxes, gift baskets & more!

If you fall into these categories, you’ll benefit from a product builder plugin

You sell customizable clothing or accessories

Let’s use a watch as an example of a customizable product. Today’s watches are highly configurable - from the color of the face to the color and material of the straps. With a product builder plugin, your customer will be able to seamlessly pick and choose the style they prefer.

You sell customizable furniture

If you’re in the furniture business, you might want to offer your customers different fabric colors or leg combinations. If this is the case, you’ll likely want a visible representation of the final selected product rather than having them click through back and forth from dropdown selections.

You sell sports equipment

The tennis player that comes to your store to purchase a racket will want the ability to customize their grip and head size, as well as the racket’s weight, depending upon their level. You don’t want them leaving the product page to go search for these attributes on a separate screen.

If your products are customizable, or configurable, then you’ll need a WooCommerce product builder plugin to help you take your store to the next level.

Can't I just add these options as product variations?

In theory, you can use a normal variable product as a product configurator. However, it would be a bit of a nightmare for you - and not ideal for the customer either!

Here's why:

That's why it's much better to present these options using a WooCommerce customizable product builder plugin.

Which is the best WooCommerce product configurator plugin?

There are two excellent WooCommerce product configurator plugins to choose from. Which one you choose depends on the type of customizable products you sell and how you want to display them on your product pages.

Plugin 1: WooCommerce Product Options

The WooCommerce Product Options plugin is perfect for creating a custom product configurator. It works by letting you add a huge range of options to your products, which are infinitely more flexible (and easier to set up and manage) than variations.

For example, you can add checkboxes, radio buttons, clickable images, color swatches, text buttons, file upload fields, text fields and more. Given the variety of options available, customers will enjoy building the product to their exact specification.

Each option in the product configurator can be associated with its own price. This adjusts the price as the customer configures their products, creating a completely custom product just for them. Alternatively, you can create a custom price calculator for more complex pricing rules.

Plugin 2: WooCommerce Product Configurator

The only limitation of WooCommerce Product Options is that it doesn't visualize the custom product as you are configuring it. If that's important to you then it's worth considering Iconic's WooCommerce Product Configurator plugin instead.

It works with image layers. You upload a transparent PNG image for each option. When the customer configures the product by selecting multiple options, the product image updates to show all the layers associated with their selections.

Note: The WooCommerce Product Configurator plugin doesn’t allow customers to add custom text or designs to the products, which you can do with WooCommerce Product Options (above). It simply allows your customers to play around with the different elements you offer (as attributes) to create a finished product. This is slightly more limited in terms of how you select the options, as it either uses normal variations or the image and color swatches which you can create using Iconic's Attribute Swatches plugin. However, the benefit of this plugin is the way that it updates the main product image to display a new image based on the exact combination of options that the customer has selected.

How to add a custom product builder to WooCommerce

Plugin 1 instructions: WooCommerce Product Options

To use WooCommerce Product Options to create an interactive product configurator, you need to add a series of extra options to your products.

1. First, get the plugin and install it on your WordPress site.
2. Next, go to Products → Product Options.
3. Create an option group and select the product(s) that you want the configurator to appear on.
4. Now add your first option to the configurator. Choose what you want it to look like (checkboxes, dropdpwn lists, clickable images, etc.). Configure it as needed, for example to add prices, minimum/maximum quantities, or conditional logic so that it only appears when the customer selects a different option.
5. Repeat step 4 to add as many options as you like to the WooCommerce product builder.
6. Save the option group.

Now view the product that you just added the configurator to. You'll see a highly visual product configurator on the product page. Customers can select options one by one to build their customized product.

Plugin 2 instructions: WooCommerce Product Configurator

Customers want an easy and seamless user-friendly experience in the store that’s hassle-free. With this plugin, whenever they select a product option, the image will automatically change, giving them a visual representation of the product they’ll be buying.

When their desired product is in the cart, they’ll be able to see their final choice with the options they selected. This will reduce cart abandonment and returns because they’ll know it’s the product they chose.

First, purchase the WooCommerce Product Configurator plugin and install it in your WordPress dashboard.

Next, you need to create your first configurable product in WooCommerce. We'll do this by using a watch as an example, to give you an idea of what you can do with your own products. For this example, we’re going to attach three attributes to the watch for customers to change, and set them up as variations. You can have more or fewer attributes for your own products.

Our three attributes are the face, the case, and the strap itself. Each one of these has several options associated with it for the customers to pick and choose from. What this means is that while the face is the attribute, the options for the face might be the different colors offered.

Next, you’ll need to create the variations. Keep in mind that you might need to add a separate product variations for each:

• Price
• SKU number
• Stock amount
• Image

Once you’re done setting up the variations, Save the product. Now we can go ahead and enable the product configurator.

Enabling the product configurator for a variable product

1. In the current product you’re editing, scroll down to the ''Product Data' 'section.
2. Click on the ''Configurator'' tab on the left-hand side.
3. Then, you’ll notice on the page the 'Enable Configurator' option. Check that box.
4. Now, Save your product.

Now it’s time to get your images ready. Without a high-quality product image, your efforts might be in vain. Let’s make sure you have great configurable product images for your customer to browse through. For this portion of the work, keep in mind that you’ll need to use a professional editing program (we recommend Adobe Photoshop or Affinity Photo).

To create configurable product images:

1. Open the editing program, and create a 1000px by 1000px (minimum) blank square area to play with.
2. Now, you’re going to put your image layers together. Each attribute you created is an individual configurable element of your product. So, for our watch example, we’ll create a layer for each watch strap, case, and face variation.

1. When you add a new product element (a different color for example) make sure that it has its own layer with a transparent background. That way, everything will line up.
2. Save each one of your layers (as the initial size you created) with a transparent background.
3. Once you have all your layers saved as individual images, you’ll need to create a background layer as the foundation for them. You can make this background layer a solid color, but make sure you save it as a PNG image.

For more details on all these steps, you can go through this in-depth Product Configurator guide.

Now that you’ve created the images in your editing program, let’s add them to your configurable product in WooCommerce.

Add the images to your configurable product

Finally, go back to the product you saved earlier in WooCommerce. Right underneath the 'Enable Configurator' checkbox, you’ll see your attributes list. You need to associate a picture with the value you created in this section:

1. Click on the plus (+) icon on the grey square where an image should be.

1. Upload the image layer you create to your media library.
2. Click on 'Set Image' to have it set up for the value selected.
3. Do these 3 steps for all of the values you’ve created.
4. Keep in mind that the layers need to be layered on properly. You can re-order them to fall in the right place. For example, we want our watch face layer to be on top of the strap layer, so image order will reflect that.
   1. To re-order the attributes, click on the icon with the 3 lines next to your attribute to drag and drop them.
5. Lastly, upload the background layer you created. This is an important step for the configurator as it needs to know the overall size of your image.

1. Now that you’re done, Save or Update your product. It will be added to your WooCommerce store.

Create your customizable product builder today

That’s it! You’re now ready to allow customers to create their own products in your WooCommerce store.

As a reminder, you need to choose one of these recommended plugins:

• WooCommerce Product Options - Perfect for adding a wide range of visually appealing options to create an interactive product builder.
• WooCommerce Product Configurator - Perfect for creating a product builder where the images update to visualize the customer's selections.

Whichever plugin you choose, set it up today and you’ll get to see a boost in your sales and customer satisfaction!

Want to keep your customers happy? Make sure your WooCommerce stock status is always updated and provide clear messaging about out of stock and discontinued products!

Managing your store's inventory can be a daunting task, especially if you deal with customized or built-to-order items or face stock issues. It is crucial to set appropriate expectations with customers regarding their orders. Clear displaying stock availability and lead times will ensure smooth business operations. In this tutorial, we will guide you through the process of managing inventory and adding WooCommerce stock status to your store.

We will discuss how to display stock quantity and other information on your online store. We will also explore ways to showcase stock statuses to provide your customers with clear and accurate information. To do this, we’ll learn how to use the WooCommerce Lead Time plugin to display product availability and waiting times.

Moreover, we will delve into another often-overlooked topic: Managing discontinued products using the WooCommerce Discontinued Products plugin. We will discuss how this plugin can help you remove products that are no longer available or relevant from your e-commerce platform without losing any valuable data or SEO benefit. 

With our step-by-step guide, you can effortlessly manage your inventory settings and ensure that your customers have a positive shopping experience.

What is stock management?

In a nutshell, WooCommerce stock management covers every aspect of a business’s inventory management system including ordering, storing, tracking, controlling, and stock reports. It applies to every item a business uses to produce its products or services – from raw materials to finished goods.

Stock management is all about managing the products your business plans on selling. It also involves keeping a record of changes to enable stock management (or inventory) over time.

Why is stock management important?

As a store owner, you already know that inventory is a major asset that represents tied-up capital. Managing stock effectively enables businesses to free up that capital.

Efficient stock control requires smart store managers to have a solid understanding of the mix of different kinds of stock and acknowledge the demands on that stock. This helps keep a reasonable stock level thereby balancing the need for surplus supplies with the need to reduce tied-up capital.

Managing stock efficiently also helps you provide the best customer service by ensuring you have the products your customers want. In other words, it allows you to achieve supply and demand balancing. It also helps minimize loss due to excess inventory (high product level) of items that don’t sell well.

Proper WooCommerce stock management also aids in forecasting product needs and ordering accurate quantities of products. On the flip side, poor stock management can affect your business in different ways. For starters, you can easily lose sales if customers can’t buy the items they need because of low stock threshold issues.

As well as managing stock WooCommerce, you need an effective way to communicate stock information to customers. Keep reading to learn the best way to do this in your WooCommerce store.

How to manage stock in WooCommerce

There are plenty of common scenarios where store managers need to show the WooCommerce stock status on the front end:

• Out of stock visibility of products.
• To show the lead time between order and delivery.
• For limited batches of products or products that are time-bound.

The WooCommerce plugin offers some stock management features out of the box. To use these features, you have to enable the WooCommerce Manage stock option. You can do this by heading over to WooCommerce → Settings → Products → Inventory from the admin panel.

From the same screen, you can also enable stock notifications and set low-stock and out of stock thresholds for products. It also gives you the option to select a Stock display format.

Once you've enabled WooCommerce stock management, you can do the following for each product/variation:

• Choose a WooCommerce stock status of either In Stock, Out of Stock products, or On Backorder (with or without an option to notify the customer of the backorder status).
• Set the exact number of products in stock. When customers buy the product, WooCommerce will reduce the number in stock automatically. It will then alert you of low stock levels via email, and change the product to Out of Stock status when it runs out.

This covers the basics of WooCommerce manage stock using the default WooCommerce stock statuses. However, WooCommerce’s stock management features are pretty limited, especially when it comes to communicating stock information to customers. You might also want to create custom WooCommerce stock statuses, such as a status for Discontinued products. Keep reading to learn how to do all this.

How to display WooCommerce stock status and other information

WooCommerce only displays the stock status on the single product page for each item. This isn't ideal because:

The solution is to display WooCommerce stock status and other stock-related information on your main shop pages. You can easily do this with the WooCommerce Lead Time plugin.

WooCommerce Lead Time lets you:

It’s the perfect solution for selling custom, made-to-order, or non-stock products and to give customers the correct information before they make purchase orders.

WooCommerce Lead Time is incredibly lightweight and works with whatever theme you’re already using on your online store. It gives you complete control over the WooCommerce stock status. As a result, you can increase transparency with your customers.

You also get access to highly-rated customer support which can help you every step of the way.

Here’s what you need to do to display the WooCommerce stock status and other information in your store:

Step #1: Get the WooCommerce Lead Time plugin

Get the WooCommerce Lead Time plugin if you haven’t done so already. You’ll receive the plugin files and license key in a confirmation email.

Log into your WordPress website and install and activate the plugin. Go to WooCommerce → Settings → Products → Lead time from the admin panel. Enter your license key and click the Save changes button to continue.

Step #2: Show WooCommerce stock status and lead times in your store

You can use the WooCommerce Lead Time plugin to show stock status information and lead times in prominent places in your e-commerce store. This includes the shop page, category pages, product pages, cart pages, and checkout pages. You can also set it up to show WooCommerce lead times in order detail emails.

By default, it’ll look something like this:

As you can see, WooCommerce Lead Time can display both the product stock status and lead time on the shop page and category pages. This way, customers can see which products are in stock before they click on them.

Doing this helps you enhance the shopping experience on your online store. Customers no longer have to click through to each product to find out if the product is available for purchase. With the WooCommerce Lead Time plugin, they can quickly see the product stock status at a glance when they’re browsing the shop page or category pages.

Alternative method 1: Display WooCommerce stock status in a product table

Another way to show WooCommerce lead times on the shop page or on category pages is by using the WooCommerce Product Table plugin. It lets you list products anywhere on your website. All you have to do is add a stock and lead_time column to the table:

Other columns you can display include SKUs, images, price, and add-to-cart buttons.

Alternative method 2: Display WooCommerce stock status in a quick view lightbox

A third way to display the WooCommerce stock status and lead time is by using the WooCommmerce Quick View Pro plugin. It works by adding quick-view buttons on your shop and category pages. Customers can view product information – including the lead time – in a quick view lightbox:

WooCommerce Lead Time lets you display the lead time on the cart and checkout pages. However, you can also use WooCommerce Fast Cart if you want to shorten the purchase flow. By doing this, you can display the lead time in a pop-up cart.

Step #3: Set the processing time

Using WooCommerce Lead Time, you can set the processing time globally or per category, simple product, or variation (variable products).

You can set the processing time globally by going to WooCommerce → Settings → Products → Lead time and entering the lead time in the Global lead time field.

To set the processing time on a product category basis, go to Products → Categories and choose either Static (enter static lead time text) or Dynamic (calculate the processing time dynamically) using the dropdown from the Lead time field.

WooCommerce Lead Time also lets you set the processing time for individual products (and variations). Open the product you want to set a processing time for in the Edit Product screen. Scroll down to the Product data section and click on the Inventory tab. From here, you can set the lead time for the product. You can also do this for variable products.

Step #4: Customize the lead time wording and text color

One of the best features of the WooCommerce Lead Time plugin is that it lets you customize the lead time wording and text color. This means that you can tweak it to get the exact look and feel you want.

For example, you might consider changing the custom status wording to something like:

• Available on
• Ready to despatch in
• Handling time
• Waiting time
• Made to order

Check out our article on Choosing the right wording for your WooCommerce Product Lead Times for inspiration and ideas on setting a custom stock status.

To change the text color, go to the plugin’s settings page (WooCommerce → Settings → Products → Lead time) and use the Lead time text color option to select a new color.

Managing discontinued products

Before we close, there’s another important area of WooCommerce stock management that store owners should be aware of.

When a product reaches the end of its natural lifecycle and will not be available for purchase again, it’s a discontinued product.

WooCommerce itself doesn’t offer a way to mark discontinued products. However, you can easily do this with Barn2’s WooCommerce Discontinued Products plugin. It adds a Discontinued custom stock status to WooCommerce. This makes it easy to mark products and variations as discontinued, without ruining SEO or marking them incorrectly as in-stock, on backorder, or out-of-stock status.

What is the WooCommerce Discontinued Products plugin?

WooCommerce Discontinued Products is a plugin that allows users to manage and display products that are no longer available for purchase on their online store. This plugin is useful for businesses that have a large inventory of products and regularly retire old items.

By using the WooCommerce Discontinued Products plugin, businesses can remove discontinued items from their active inventory levels but still keep them visible to customers who may be searching for them. This feature can help prevent frustration for customers who may be searching for a specific item and unable to find it on the website.

Furthermore, the plugin allows for customization of the message displayed to customers who may come across discontinued products. This message can provide information about the reason for the product's discontinuation, offer alternative product suggestions, or encourage customers to sign up for email notifications if the product becomes available again in the future.

WooCommerce Discontinued Products is compatible with the other WooCommerce inventory management plugins featured in this article. For example, you can display the discontinued product message in the product table and quick view lightbox.

Check out our tutorial on How to Add a WooCommerce Product Discontinued Status to your Store for instructions on how to display a custom stock status on your WordPress site.

The easy way to provide stock information to customers

Having a WordPress plugin that helps you improve communication around WooCommerce stock status is essential for many reasons:

In this guide, you've learned how to use the standard WooCommerce inventory settings to manage your stock. You're also learned how to improve communication with customers using the WooCommerce Lead Time plugin. This adds all the extras that you need for effective communication about your inventory status. For example, you can show stock statuses and lead times prominently in your store, set processing times, and customize the wording to best fit the types of products you sell.

Get the WooCommerce Lead Time plugin today!

The way you set up your WooCommerce Account page can have a positive impact on the overall experience of your customers, especially after they’ve purchased from you. If you customize this area of your store, you’ll be able to enhance your customer’s journey, and improve loyalty at the same time. But in order to achieve this, you’ll need the help of the plugin WooCommerce Account Pages.

You’re probably aware that your standard WooCommerce installation doesn’t have a user-friendly way to add multiple pages or tabs to your My Account Page.

If you’re a store owner, the last thing on your mind is learning how to code in order to customize this area.

Customizing your WooCommerce My Account page doesn’t have to be an ordeal. With the right setup, the whole process can be a walk in the park. You’ll be able to provide your customers with up-to-date information, answers to their questions, and incentives to make future purchases.

In this article, we’re going to highlight the importance of customizing your My Account page. As well as how to go about accomplishing that with the help of the My Account page plugin, WooCommerce Account Pages.

Why customize the My Account page in WooCommerce?

The truth is that the out-of-the-box WooCommerce My Account page can be uninspiring.

As a business owner, your goal is to provide your customers with outstanding customer service. This means giving them the information you know they’re looking for. Whether that’s answering their questions in an FAQ style, or giving them the option to download instruction guides.

You don’t want your customers to jump through hoops to get their questions answered and frustrate them in the process. This can only be done through customization.

For example, by customizing your WooCommerce My Account page, you’ll be able to add user guides, as well as give them extra information about warranties for example. Essentially, you’re reducing the after-sale friction for them, so they don’t have to reach out to you.

Another reason why you should customize this page is that you can personalize the experience for your customers. With that in mind, your standard My Account Page does not come with the capability of segmentation. What this means is that you’re currently not able to display different content depending on the role of the user.

For example, if you have a membership site, it’s crucial to give your customers the correct view and access to their account depending on what they purchased. On the other hand, you don’t want to give everyone the same access and information if it’s not relevant to them.

So now we know why it’s worth customizing your My Account page in WooCommerce. Next, let’s look at what the overall benefits are.

By customizing the WooCommerce Account Page, you’ll get the following benefits:

Reduced returns

If you create a new page with additional product information/instructions for customers, they’ll know exactly how to use the product, which will reduce the likelihood of a return.

Physical products all come with instruction guides and manuals for further explanation. Add those as downloadables on your My Account page for easy access. Your customers will be less likely to ask for a refund if they feel confident that they have all the information they need for it.

Opportunity for further sales

By upgrading your My Account page in WooCommerce, you’ll be able to use this area to offer your existing customers additional coupons and discounts to keep them coming back.

Since acquiring a new customer is more expensive than retaining an existing one, you can increase your retention rate by offering customer-only coupons.

In fact, you can add coupon shortcodes within the content of the page you’re adding, and voila! Your customers will be eager to check in from time to time and see if there’s a new offer for them.

Increased loyalty

There are several ways customizing your My Account page will lead to increased loyalty.

For one, by giving your customers additional information in an easy-to-find location, you’ll make their lives easier in the after-sale process. It will take away their need to contact you or your customer service. This can be a pain point for customers and will likely cost you money.

Secondly, by giving them a place where they can receive exclusive coupons and discounts for being loyal customers, they’ll feel appreciated and come back for more.

Fewer customer service inquiries/complaints

By giving your customers a more holistic view of their product, they’ll feel less inclined to contact you or your customer service for questions or complaints.

Give them the user guides they need for the product they purchased, as well as answers to their most pressing questions in an FAQ section. Make it easy for them to enjoy their product by removing their need to contact you.

Now that we know the benefits and how they can be applied to your business, let’s add those extra pages to your My Account page with the help of the plugin WooCommerce Account Pages.

Edit the My Account page with WooCommerce Account Pages

We’re about to dive into how you can customize and edit your My Account page with the WooCommerce Account Pages plugin. But before we do that, let’s have a quick overview of what this plugin is about and what it has to offer.

What is WooCommerce Account Pages?

With the WooCommerce Account Pages plugin, you’ll finally be able to add custom pages to your My Account page. In fact, you’ll have the ability to create unlimited custom pages to suit your business needs. This is where you can put on your creative hat and let your imagination run free.

Here are some of the major benefits of WooCommerce Account Pages:

• You don’t have to learn anything new. If you’re already familiar with the WooCommerce look and feel, then you’ll be comfortable from the get-go. There’s no need to learn how to navigate through it since it’s automatically built-in for you.
• Add new pages within WordPress. Each new page/tab added is created within WordPress, similar to any standard page you’ve created in the past. You can add anything you normally would to a blog post or page.
• You don’t have to start from scratch. Go ahead and add your FAQ section, contact forms, coupons, and any existing shortcodes you may have in WordPress directly into the My Account page.
• All pages are linked. Should you want to create a sub-page to the main My Account page, it will be automatically linked to it so you don’t have to go looking for it.

Now that we’ve checked off all the major benefits, let’s go ahead and unpack the WooCommerce Account Pages plugin so you can finally customize your My Account page.

How to customize the My Account page

Here, we’re going to walk through the steps you need to take in order to customize your My Account page.

Before we begin, purchase the WooCommerce Account Pages plugin from the Iconic site.

Step 1: Install WooCommerce Account pages

Once you’ve purchased WooCommerce Account pages from the Iconic store, you need to take the following steps:

1. Go to Plugins → Add New → Upload Plugin.
2. Choose the zip file you downloaded, upload, and then click Activate.
3. Once activated, you’ll need to enter your license key.

With WooCommerce Account pages now installed, we can move on to customizing your My Account page.

Step 2: Add your new account pages

To add a new page to the My Account area in WooCommerce, take the following steps:

1. Go to your WordPress Dashboard and click on Pages → Add New.
2. Name your new account page (Example: User Guides). Remember that the content of this page is just like any other page you create in WordPress, meaning that you’re able to add links, video, images, etc., to it.
3. Within the page itself, look to the right-hand side of the Page Attributes section. Make sure you select your main account page as the parent page. This ensures that the ‘User Guides’ page you’re creating will show up in your My Account page.

   

4. Click Publish once you're done. Your new page ‘User Guides’ will now be visible in your My Account page on the frontend of your website.

That’s it! Your new page is now live in your My Account page.

Copy these steps for each new page you want to create and watch how your customers interact with them.

Remember that you’re able to add and remove these pages just like any other page in WordPress. What’s exciting is that you can tailor the pages to your business as well as your customers’ needs.

You’ll be amazed at how much smoother their buying experience will be because of this.

Bonus: Display previously purchased products

One way to make sure the My Account page is truly beneficial for your customers is to make sure it displays their previously purchased products.

By doing this, you’ll allow them to make repeat purchases without friction and find their previously purchased products without all the extra clicks. This is because they’ll be able to purchase these products on the My Account page.

To do this, you’ll need the help of WooCommerce Product Table. With WooCommerce Product Table you’ll be able to automatically show a list of the current user’s (the person logged in) previously purchased products.

To find out how to add this incredibly useful page to your My Account area, read our previously purchased products guide.

Improve your WooCommerce My Account page today

You just customized your My Account page! By using WooCommerce Account Pages, you’ll notice a significant improvement in your customers’ overall experience as well as yours.
The sky's the limit. You can now create and customize as many pages as you’d like and provide the most up-to-date information on your products. Your customers now have a one-stop place to go for all their needs.

Go ahead, keep customizing with the WooCommerce Account Pages plugin.

By default, WooCommerce stores are built around a relatively slow purchase process. By using a WooCommerce buy now plugin, you can cut minutes off the purchase time for every customer. This will make a huge difference to your conversion rate and bottom line.

When you use WooCommerce as it comes, the customer journey is spread across multiple pages. Customers visit a separate page for each product, choose options, and add the product to their cart. When they’re done, they progress to a cart page to review their order. And, finally, they reach the checkout page to enter their shipping and billing information.

As you can imagine, such a long process will inevitably lose some customers along the way. This hurts your conversion rate, reducing your sales and revenue.

Fortunately, there's a better way. In this article, I’ll show you how to add WooCommerce buy now buttons to your store with a plugin called WooCommerce Fast Cart. 'Buy It Now' speeds up the customer journey, helping to boost your conversion rate. I'll also share some tips on how to speed up shopping even more.

You can also watch this video, which shows you how to add WooCommerce buy now from start to finish:

How does WooCommerce Buy Now work?

The WooCommerce Fast Cart plugin adds a ‘Buy now’ option to WooCommerce. Basically, it opens the checkout in a pop-up on the same page as soon as you add a product to the cart. Customers can either continue shopping or complete their purchase straight away.

Here’s how it works:

1. The customer starts by adding a product to their cart.
2. The checkout automatically opens in a pop-up window. It’ll either be on the right-hand side of the page or in the center.
3. Existing customers who are logged into their accounts will see their address and billing information already filled out in the form. So, they simply need to click the Complete button to complete their order and buy now. If you’re using a payment gateway that allows customers to save their credit card details then customers will be able to Buy Now without re-entering payment information.
4. Guest users can log in to their accounts and have their information populated automatically. Or, they can enter it straight into the pop-up and complete the WooCommerce Buy Now process.

WooCommerce Buy It Now with PayPal Checkout

If you prefer, you can show the cart contents in the pop-up instead of the checkout. All you have to do is install the PayPal Checkout plugin and it will display a PayPal Checkout button in the pop-up.

That way, customers can Buy It Now with PayPal instead of using the WooCommerce checkout.

How can WooCommerce Buy Now improve my sales?

Speeding up the purchase process is incredibly important. In fact, according to the Baymard Institute, 18% of US online shoppers have abandoned an order solely due to a “too long or complicated checkout process”.

With the WooCommerce Fast Cart plugin, you can speed up your store's purchase process and deliver a good user experience to shoppers. This makes them more likely to complete their order, without getting lost, fed up or abandoning their cart.

Tutorial: How to add Buy It Now to your store

Next, I'll explain how you can set up the WooCommerce Fast Cart plugin to let customers Buy Now from your online store.

Start by getting the WooCommerce Fast Cart plugin if you haven’t done so already. You’ll receive a license key in the confirmation email.

Install the plugin on your WordPress website and activate it. Next, head over to WooCommerce → Extensions from the admin panel to activate the license key and start using the plugin.

Once that’s done, here’s what you need to do to add WooCommerce Buy Now buttons to your store:

1. Enable the floating cart icon by ticking the checkbox next to the Floating cart icon option. You can also set the position of the WooCommerce floating cart icon using the Position option.
2. Next, scroll down to the Auto open section to decide when to open the buy now buttons pop-up. You can set it to auto-open whenever products are added.
3. The WooCommerce Fast Cart plugin lets you choose the layout of the checkout pop-up. You can select either Side cart or Centered popup.
4. To let customers check out in the fast cart pop-up, tick the Allow fast checkout checkbox. You can also choose to show or hide the Direct checkout option.
5. The WooCommerce Fast Cart plugin also lets you choose what to show in the checkout pop-up. You can choose to include product images, subtotals, prices, quantity pickers, delete buttons, coupons, 'Keep Shopping' button and cross-sells.
6. Finally, you can design and style the checkout pop-up to match your theme and brand colors. And, once you’re done configuring the plugin settings, click the Save changes button to continue.

Changing the 'Add to Cart' button text

So far, we've added a mechanism to trigger the checkout process upon clicking the Add to Cart button. But the text on the button is still displayed as 'Add to Cart'. Let's see how you can change this to 'Buy Now', 'Book Now', or any other custom CTA text.

For this, you'll need our WooCommerce Custom Add to Cart Button plugin. You can get this plugin from the WordPress repository for free and install and activate it on your website.

Once you have activated the plugin, here's how you can change the Add to Cart button text.

1. In the WP admin dashboard, go to Appearance → Customize. This will load the WordPress live customizer.
2. Go to WooCommerce → Add to Cart buttons and change the Add to Cart button text with your custom text. Here, I'm changing it to Buy Now.
3. You can also enable/disable the shopping cart icon in the buttons to make them look more appealing using the checkbox below.
4. After making the required changes, hit the Publish button.

Let customers find and add products to the cart more quickly

So far, we’ve talked about how to display a WooCommerce buy now option after customers add products to the cart. However, out of the box, WooCommerce still doesn’t make it easy for customers to find and add products in the first place.

You can speed up the early parts of the purchasing process and grow your sales even further. The best way to do this is by allowing customers to find products, select options, and add to the cart without having to visit a separate page for each product.

I recommend the following WooCommerce plugins for this – you can use them alone, or together for best results:

WooCommerce Product Table

The WooCommerce Product Table plugin is perfect for letting customers ‘Buy It Now’ with multiple products at once.

The ‘Buy It Now’ feature makes it quicker for customers to complete their purchases. However, a downside can be that they only buy one product at a time. This is bad for your average order value.

If you sell lots of products, you can easily get around this problem by using the WooCommerce Product Table plugin. The plugin lists products in a one-page order form layout:

I recommend configuring the WooCommerce Product Table plugin to display multi-select checkboxes so that customers can set quantities, choose variations, and tick multiple products before adding them all to the cart at once.

WooCommerce Fast Cart then takes over and allows customers to Buy It Now.

WooCommerce Quick View Pro

The WooCommerce Quick View Pro plugin provides another way of adding products to the cart without having to leave the page. It displays a quick view lightbox for each product. Customers can view more information about each product and add it to their cart instead of having to visit the single product page.

This is a simple and neat way of cutting an extra page out of the buying journey.

You can use whichever plugin you’d like to speed up adding products to the cart. Once the customer adds the products they’d like to purchase to their cart, the WooCommerce Fast Cart plugin takes over and allows customers to Buy It Now.

Where to get the plugins

WooCommerce is fantastic, but doesn't always make things easy for the customer. You can easily fine-tune the customer journey by speeding up each stage of the process:

1. Use Product Table and/or Quick View Pro to make it easier for customers to find products and add them to the cart, all from one page.
2. Use WooCommerce Fast Cart to add WooCommerce buy now buttons to your online store. It lets customers skip the cart page and fill out the checkout form from a pop-up. They remain on the same page throughout the process.
3. Use WooCommerce Custom Add To Cart Button plugin to change the Add to Cart button text with any custom text.

That way, customers can quickly buy multiple products and place their orders in the fewest number of steps.

Ready to add WooCommerce buy now buttons to your store? Get the WooCommerce Fast Cart plugin today.

If you run a WooCommerce-powered online store, the standard purchasing user flow involves taking customers through a multi-page process to purchase products. Now there's a better way.

The usual WooCommerce process goes something like this: customers add products to their cart, click through to the cart page, then click through to the checkout page to add their billing and shipping details and make their payment.

The problem with this multi-page process is that you can lose sales by wasting the customer’s time. One way to improve your sales and conversions is by displaying the cart and checkout in a popup WooCommerce mini cart. That way, customers can complete their purchases and place their orders all on one page.

In this tutorial, I’ll show you how to use the WooCommerce Fast Cart plugin to add a popup floating cart. This keeps the entire buying process on one page.

Why a WooCommerce mini cart can increase your sales

According to the Baymard Institute, 18% of US online shoppers have abandoned an order solely due to a “too long / complicated checkout process”.

Having a WooCommerce mini cart on your online store is a great way to increase sales and boost conversions. Here are some of the main benefits of adding a WooCommerce side cart to your store:

A WooCommerce minicart plugin is a great way to enhance your online store whatever types of products you sell.

Why WooCommerce Fast Cart is the best minicart plugin

If you’re looking for a professional mini cart plugin for your online store then WooCommerce Fast Cart has you covered. WooCommerce Fast Cart has several unique features that other mini cart plugins on the market don’t have.

Most WooCommerce mini cart plugins just add a basic popup side cart without actually removing the original or and checkout pages. This means that you’re essentially only speeding up shopping for customers who choose to click on the WooCommerce floating cart icon.

While you can certainly do this with WooCommerce Fast Cart, it has options to actually replace the default WooCommerce cart and checkout pages so that all customers use the fast cart. This way, you can speed up the purchasing flow for all of your customers.

Additionally, most of the WooCommerce cart plugins out there just display the cart in a popup window with a button that links to the standard checkout page. While this is still possible with the WooCommerce Fast Cart plugin, it also lets you display the full WooCommerce checkout experience directly in the popup.

It’s also worth mentioning that most WooCommerce shopping cart plugins have one layout option which is typically a narrow cart on the right-hand side of the page. WooCommerce Fast Cart, on the other hand, has a central popup for stores that want a larger popup cart as well as a cart tray on the right-hand side of the page.

How to set up a WooCommerce mini cart

Get the WooCommerce Fast Cart plugin to get started. You’ll receive the plugin files and license key in a confirmation email. Install and activate the plugin on your WordPress website.

Next, head over to WooCommerce → Extensions from the WordPress admin panel to activate the plugin’s license key.

From the same screen, you can configure the plugin’s settings.

To enable the floating cart icon, tick the checkbox next to the Floating cart icon option. You can also set the position of the WooCommerce floating cart icon using the Position option.

Scroll down to the Auto open section to decide when to open the WooCommerce mini cart. You can choose to auto-open it whenever products are added, or replace the default Cart page with the mini cart.

The WooCommerce Fast Cart plugin also lets you choose the layout of your mini cart. You can select either Side cart or Centered popup.

If you want customers to check out in the fast cart popup, tick the Allow fast checkout checkbox. You can also choose to show or hide the direct checkout option.

Next, use the Cart contents option to choose what to show in the WooCommerce minicart. You can choose to include product images, subtotals, prices, quantity pickers, delete buttons, coupons, 'Keep Shopping' button and cross-sells.

Finally, you can design and style the WooCommerce mini cart to match your theme and brand colors.

Once you’re done configuring the plugin settings, click the Save changes button to continue.

More ways to speed up shopping

You can really increase your conversion rates by reducing the number of pages that customers have to visit in order to make a purchase.

So far, we’ve looked at how WooCommerce Fast Cart can speed up the cart and checkout part of the process. But what about adding products to the cart in the first place?

Depending on the types of products you sell, these plugins will speed up the earlier parts of the customer’s buying journey.

WooCommerce Quick View Pro - perfect for all types of products

The WooCommerce Quick View Pro plugin is perfect for all types of products. It speeds up shopping by displaying extra product data and purchasing options. This way, customers can view product details, select variations, set quantities, and add the product to their cart – without having to visit the single product page.

Customers can simply open a quick view lightbox, choose quantities and variations, and add to the cart. The lightbox then closes and they can either immediately use WooCommerce Fast Cart to complete their purchase or continue adding more products to their cart. In this way, WooCommerce Quick View Pro with the Fast Cart plugin can help you increase your online store’s average order value.

WooCommerce Product Table - perfect for stores with lots of products

The WooCommerce Product Table plugin lets you list products in a quick, one-page order form layout. This way, customers can quickly tick all the products they want, choose quantities and variations, and add everything to the cart in a single click. Once that’s done, they can use WooCommerce Fast Cart to quickly complete the purchasing process.

The WooCommerce Product Table plugin is perfect for online stores that sell lots of products like wholesale stores or grocery stores.

WooCommerce Bulk Variations - perfect for variable products with many variations

With the WooCommerce Bulk Variations plugin, customers can buy variable products faster. The plugin speeds up the purchasing user flow by letting customers select quantities for all the variations they want to buy from a single page instead of having to add each combination to the cart individually.

So, if you sell t-shirts in a variety of different colors and sizes, customers can place their order from a single screen without having to refresh the page for each variation they’d like to purchase.

Used alone or in combination, the above-mentioned plugins really speed up shopping for customers. They speed up product selection and adding products to the cart. You can pair them up with the WooCommerce Fast Cart plugin to speed up the final stages of the buying process.

Together, this is the perfect way to create a super-streamlined user experience and potentially increase your average order value.

Where to get the WooCommerce mini cart plugin

Now that you know how to speed up the shopping process for customers, it’s time to get the WooCommerce Fast Cart plugin.

Follow the steps in this tutorial to speed up the purchasing process, increase sales and conversions, and boost your store’s average order value.

Ready to start speeding up the shopping user flows on your store? Get the WooCommerce Fast Cart plugin today.

If you struggle with cart abandonment on your WooCommerce store — and which online seller doesn't! — you need WooCommerce Fast Cart, our WooCommerce side cart plugin.

With Barn2's WooCommerce side cart plugin, your customers' carts — along with the typical WooCommerce cart functionalities like adding or removing items, changing quantities, applying coupons, and checking out, among others — move as your customers move across your online store.

With our WooCommerce side cart plugin, as soon as a user adds a product to their cart, a side cart appears, using which users can easily: 

• View the items in their carts
• View the product price(s), shipping costs, subtotal, total, etc.
• Change quantities 
• Delete products
• Apply coupon codes
• Do a one-click checkout
• Check out similar products (if you enable them on the side cart) 
• And continue shopping — you can add a "Continue Shopping" CTA to your side cart; each time a product is added to the cart, the cart gets refreshed automatically.

As the admin, you can have a side cart open automagically as soon as a user clicks the "Add to cart" option anywhere on your shop. Plus, you can set up a floating cart icon that opens the side cart if users close it for any reason. The side cart loads in a flash and remains accessible all the time.

A WooCommerce side cart plugin fixes a key issue with the default WooCommerce cart and checkout workflow

As you would know, WooCommerce provides a Cart and Checkout page. Typically, after adding products to the cart, customers must view the cart page to check their order. Here, they can edit their order, change quantities and remove items. Once happy with the order, they click a button to proceed to the Checkout page. On the checkout they enter their name and email, select a shipping method, enter their address, enter payment information (plus optional billing address) before they click to confirm the order. That's quite a lot of work!

A WooCommerce side cart plugin fixes this. It brings the entire order process onto the Shop page a customer is already viewing. With WooCommerce Fast Cart, your customers never leave your Shop or product pages as their cart is with them right on it.

A WooCommerce side cart plugin also improves your cart value

Another issue with the default WooCommerce cart and checkout process is that it doesn't help you upsell or cross-sell products and increase your cart value. When you add products to the default cart in WooCommerce, you can either direct customers to the cart page to view their items or keep them on the same product page that they're already viewing. Neither of these approaches is ideal:

• Redirecting customers to the cart page makes them less likely to add more products, thus decreasing your average order value.
• Keeping customers on the same product isn't great as they've already added that product! They need to go back to the Shop to add more products, and there's nothing to encourage them to Checkout. The customer loses momentum and is more likely to abandon their purchase.

A WooCommerce side cart plugin fixes this and lets customers keep shopping while having their cart with the checkout options and all right in front of their eyes all the time.

Meet WooCommerce Fast Cart: Our WooCommerce side cart plugin

WooCommerce Fast Cart adds a popup or side cart and/or checkout to your store. WooCommerce Fast Cart makes it easy for customers to review their orders, change quantities, remove items, and redeem discount codes. It works with WooCommerce's powerful product recommendation engine, encouraging customers to spend more by displaying related products based on what is already in the cart.

When the customer is ready, they can proceed to the checkout. This could either be the standard checkout page, or you can actually display the WooCommerce checkout within the popup mini cart.

This fast checkout is quite unique. There are other plugins (although very few that we would recommend) that add a basic side cart to your site, but it's very unusual to display the WooCommerce checkout as a popup. We believe this is an important feature that makes it much quicker and easier to buy products.

You can display the popup cart as either a side cart on the right of the screen or as a larger lightbox at the middle.

Aren't popups in WooCommerce checkout annoying?

I couldn't agree with you more! There's nothing worse than trying to view a web page and being interrupted by a popup that you didn't ask for.

Our WooCommerce side cart plugin is different because it only shows information that the customer is actively interested in. It doesn't nag them to sign up to a newsletter, and it doesn't appear when the customer is trying to leave the page. It simply displays the products that they have chosen to add to the cart, in a convenient side cart that will save them time.

You can customise this WordPress plugin's settings to make the WooCommerce side cart as unobtrusive as you like. You can either have it open automatically when products are added to the cart; or you can display a floating side cart icon so that customers can choose when to open it.

Three WooCommerce side cart use cases

WooCommerce Fast Cart is a very flexible WooCommerce side cart plugin. It has lots of options so that you can configure the side cart to meet your WordPress website's needs.

To show you how diverse the plugin is, here are some examples of different customer journeys that you can create which use WooCommerce side carts. The first example is the most unobtrusive option, and the last one forces customers to complete their purchase as quickly as possible.

Use case 1: Adding an optional WooCommerce side cart as an alternative to the regular WooCommerce cart

This use case provides a user-friendly way for customers to access the carts, while allowing them to access the WooCommerce cart and checkout pages if they choose to do so.

• The customer visits your e-commerce website and adds a product to their cart.
• A subtle yet prominent cart icon appears on the top right or bottom right of their screen, indicating the number of items in the cart. The customer can continue shopping as usual.
• When they are ready, the customer clicks on the cart icon to launch a floating side cart on the right hand side of their screen.
• The customer can use the side mini cart to view and modify their order, and to add recommended products (cross-sells) to the cart. Or if they prefer, they can access the main WooCommerce cart page and review their order there.
• Finally, the customer clicks on the 'Checkout' button in the side cart or on the cart page. This takes them to the standard WooCommerce checkout page to complete their order.

Use case 2: Replacing the default WooCommerce cart and checkout

This use case is slightly more proactive because it opens automatically when the customer adds products to the cart. It also displays a larger 'Added to cart' popup in the center of the page instead of a small side cart, and fully replaces the usual cart and checkout pages.

• The customer visits your e-commerce website and adds a product to their cart.
• An 'Added to cart' popup appears in the center of the page, displaying the cart contents and displaying recommended products that the customer may also be interested in.
• The customer can add the recommended products to the cart, change the quantity, or close the window and continue browsing the shop.
• The 'Added to cart' popup will launch each time they add a product to the cart. When they are ready, they can make any final changes to the cart and click the 'Checkout' button.
• This will open the WooCommerce checkout directly in the popup window. The customer can review their order, enter their details, choose shipping options and make payment directly in the popup.

Use case 3: Selling products individually with one-step direct checkout

This use case is ideal for WooCommerce stores wanting a quick and easy way for customers to buy one product at a time. While it's less good than the other use cases for increasing the average order value, it is excellent for conversions because it's so fast.

• The customer visits your shop and adds a product to their cart.
• Immediately, the WooCommerce checkout opens as a popup - either as a side cart on the right hand side of the page, or as a larger floating cart in the center.
• The customer enters their details, selects shipping options, pays and completes their order - directly in the popup checkout.

Now that we’ve seen how WooCommerce Fast Cart can be used, let’s look at how you can set it up and create your very own WooCommerce side cart!

How to create a WooCommerce side cart using WooCommerce Fast Cart

Installing the plugin: 

• Download your plugin zip file and copy your license key from your order confirmation page  
• Activate the plugin using your license key by navigating to WooCommerce → Settings → Products → Fast cart

Customise your settings:

Once your plugin is activated, you can customise the settings according to your requirements. Customisations include:

• Setting where the floating cart appears - on the right hand side or at the center
• Whether the cart automatically appears upon adding to cart or is displayed an option
• Checkout directly from the cart or checkout directly after adding to cart
• Cart elements and layout like the product image, pricing, quantities, coupon codes, shipping details, order total amount, recommended products, etc.
• Designing - the font, colors, buttons, cart icon display, background and overall layout of your WooCommerce side cart

Offering a better shopping experience with a WooCommerce side cart

As you have seen, WooCommerce Fast Cart speeds up the final stages of the buying process. Specifically, it jumps in after customers start adding products to their order.

To optimize the full customer journey and maximize conversions, you can use this WooCommerce side cart plugin alongside our other plugins to make it easier to find and organise your products.

Here are some WordPress plugins that work great with WooCommerce Fast Cart:

WooCommerce Quick View Pro

You can lose out if customers are forced to visit a separate page for each product. Instead, let them view extra product details and add to the cart from a lightbox.

Our Quick View Pro integrates directly with WooCommerce Fast Cart. When you use the plugins together, the related products in the side cart will include 'Quick View' buttons. This lets customers learn more about the related products and choose options, without closing the WooCommerce side cart.

WooCommerce Product Table

WooCommerce Product Table lists products in a super-quick order form. It comes with variation dropdowns, filters, quantity pickers, images and multi-select checkboxes.

Customers can add multiple products to the cart at once, before completing their purchase with the WooCommerce side cart.

WooCommerce Restaurant Ordering

Food and takeaway stores are great examples of sites that would benefit from quick one-page ordering. Instead of wasting customers' time with separate pages for each item, WooCommerce Restaurant Ordering provides a much faster ordering experience.

Customers select their items, choose options or toppings, and add to the order from one single page. They can complete their purchase using WooCommerce Fast Cart itself.

WooCommerce Bulk Variations

WooCommerce Bulk Variations is ideal for any customers wanting to buy multiple variations of the same product at once. Instead of choosing a variation and adding them one at a time, they enter a quantity for each and add them all in one go!

After adding the variations in bulk, they can view related products and complete their purchase in the WooCommerce side cart.

Where can I get WooCommerce Fast Cart?

WooCommerce Fast Cart, our WooCommerce side cart plugin, is available as a standalone WooCommerce side cart plugin or as part of our WooCommerce Bundle.

Like all our other plugins, even WooCommerce Fast Cart comes with:

• In-depth documentation and tutorials.
• Export support from our friendly team.
• Full 30-day money back guarantee.

Adding a multi-step checkout to your WooCommerce store can have a massive impact on your conversions and sales. The only problem is, you can’t create a multistep checkout with a standard WooCommerce install. So, let’s solve that problem for you.

In this article, you’ll learn why a multistep checkout is beneficial and how to add one to your WooCommerce store. All with the help of the WooCommerce multistep checkout plugin, Flux Checkout for WooCommerce.

If you don’t have a multistep checkout currently, the standard one-page checkout in your WooCommerce might be overwhelming and distracting.

By simplifying and adding a multi-step checkout to your store, you’ll make the experience seamless for your prospective buyers. You’ll also reduce your cart abandonment rate, and improve your conversion rate at the same time.

So, before we jump into the how first let’s address the why.

Why add a multistep checkout to WooCommerce?

As a store owner, you work hard to ensure that every part of your business is running smoothly and efficiently. All so you can focus on what truly matters: adding value and improving your customer’s life through your products.

The last thing you want is for someone to not experience your product because of technical frustrations.

That’s why you want to make sure their checkout experience is frustration-free so that they can get their hands on your products as fast as possible! With a multistep checkout plugin, such as Flux Checkout for WooCommerce, you’ll deliver on that promise.

So let’s break down the main benefits of using a multistep checkout plugin like Flux:

A multistep checkout reduces checkout abandonment

You’ve probably experienced a frustrating checkout process at one point or another in your online buying life. For many customers, a lengthy and complicated checkout page is enough to make them abandon their cart.

In fact, according to Baymard Institute data, 18% of users abandon their carts due to long or complicated checkouts. With Flux, you’ll reduce your checkout abandonment rate because it:

• Removes unnecessary fields for the customers to fill out (while still giving you everything you need).
• Auto completes addresses (one single field needed instead of multiple ones).
• Automatically adjusts sizing and layout to mobile devices (creating an easy and seamless process for the customer).

A multistep checkout removes distractions

Flux Checkout for WooCommerce creates an app-like experience, removing the site navigation so your customers can fully focus on purchasing.

Imagine your store being so easy to buy from and clutter-free that they won’t think twice about completing the checkout. Their single point of focus is on the screen at hand and on completing the guided checkout.

Flux removes your site’s standard navigation, sidebars, banners, and more to show only the simplified steps your customers need to take to make a purchase.

By having the customers go through separate pages, you can cleanly display only the very specific information required. A straightforward checkout process is key in increasing sales, which is exactly what you’ll get with Flux.

A multistep checkout guides the customer to purchase

As a WooCommerce multistep checkout plugin, Flux will guide your customers through the checkout process making it as simple and easy as possible for them.

How simple, you ask? It’s just three steps in logical order: Details, Address, and Payment.

By sectioning each one of these, and prompting the customer at the right time, Flux removes the bulkiness of the standard checkout page.

Since the last stage of the customer’s journey is the most crucial one, each one of these steps is engineered to ensure that you convert them successfully. They’re already interested and excited about your product. So all you have to do is take them to the finish line without any distractions.

A multistep checkout is mobile friendly

Customers want simplicity. The majority of people now shop with their smartphones (85% shop online using their smartphones versus 63% on laptops). As that’s the case in today’s world, you want to make sure you offer a convenient and easy way to checkout as that’s a must.

Overcomplicating the checkout process can result in lost sales and unhappy customers. So by installing a multistep checkout like Flux, you’ll ensure customers get the best experience possible on their mobile device (with Flux’s app-like design).

So now we’ve covered the benefits of adding a multistep checkout to your WooCommerce store, let’s dive more into why you should use the Flux Checkout for WooCommerce plugin to do it.

Add a multistep checkout with Flux Checkout for WooCommerce

Here’s why the plugin Flux Checkout is the best way to add a multistep checkout to WooCommerce.

What is Flux Checkout?

Flux is a WooCommerce multistep checkout plugin that replaces your lengthy and daunting standard checkout page in WooCommerce.

It seamlessly integrates with your current theme to guide your customers through a simple and user-friendly checkout process. One that will make their buying experience much more enjoyable.

When this happens, you’ll notice a lower cart abandonment rate and an increase in sales.

Here are some of the customizations available to you:

• Personalize the checkout header text.
• Change the font, button/primary/accent colors to fit your theme.
• Decide to use on desktop as well as mobile.
• And more.

How to add a multistep checkout to WooCommerce

Below, you’ll find the step-by-step instructions to add a multistep checkout to your WooCommerce store. There are two major steps involved:

1. Installing the multistep WooCommerce checkout plugin (Flux Checkout for WooCommerce).
2. Customizing it to fit your store.

Let’s get it up and customized!

Step 1: Install Flux Checkout for WooCommerce plugin

To purchase the Flux Checkout for WooCommerce plugin, go to the Iconic store here: iconicwp.com/products/flux-checkout-for-woocommerce

Once you’ve purchased Flux you’ll need to take the following steps:

1. Go to Plugins → Add New → Upload Plugin.
2. Choose the zip file you downloaded, upload, and then click Activate.
3. Once activated, you’ll need to enter your license key.

With Flux Checkout now installed, we can move on to customizing your multistep checkout.

Step 2: Customize Flux for your store

Flux checkout is now activated in your store, but you’re going to want to adjust the settings first. Let’s make sure your customers get the most from your new multistep checkout.

To customize the settings according to your theme’s design, do the following:

1. From your WordPress dashboard, go to WooCommerce → Flux Checkout.
2. Then click the General Settings tab at the top of the page.

1. Once here, you’ll be able to enable or disable Flux Checkout on desktop or just have it show on mobile by selecting one of the buttons next to Disable Desktop.

1. Next, you’ll be able to activate the address autocomplete option by clicking the checkbox next to Use Address Autocomplete.

1. Once you’re happy with all the settings on this tab, click the blue Save Changes button at the bottom of the page.
2. Next, click the Header Settings tab at the top - this tab helps you customize how the header of your checkout looks.
3. To change the header type from text to image, click the appropriate radio button next to Header Type (this can be your store’s logo).

1. On this tab you’ll also be able to change the font type, size, and color to match your theme. As well as changing the header background and the ‘Back to Cart’ link color.

1. Again, once you’re happy with these changes, click the blue Save Changes button at the bottom of the page.
2. Lastly, click the Checkout Style tab - this is the style section to help you customize how your multi-step checkout looks.
3. On this tab, you can pick a color theme from the pre-selections offered, or choose your own custom colors (you can input a hex code).

1. Click the blue Save Changes button at the bottom of the page once you’re happy.

That’s it! You’re now ready to see your updated checkout page and have your customers go through a seamless checkout process.

Display the multistep checkout in a quick popup cart

As we have seen, there are lots of excellent reasons to add multistep checkout to WooCommerce. It breaks up the process into logical chunks.

However, there are disadvantages for forcing customers to visit multiple pages in order to check out. This can make your store harder to navigate, making it slower for customers to complete their purchase.

The solution is to display the Flux multi-step checkout in a popup modal window like this:

In this screenshot, you can see the Flux multistep checkout displayed using the WooCommerce Fast Cart plugin. WooCommerce Fast Cart creates true one-page shopping by opening the cart and checkout in a modal window.

Fast Cart is fully compatible with multi-step checkout because the customer is guided through each step, while remaining in the popup cart at all times. That way, customers get the benefits of multi-step checkout while remaining on the same page throughout the process.

Further reading: How to use WooCommerce Fast Cart with multi-step checkout.

Add a multistep checkout for WooCommerce today

With these steps complete, your multistep checkout is up and running.

Your customers can now purchase faster and easier without being distracted away from the task at hand. Plus, you can enjoy more sales with a checkout that’s designed to reduce checkout abandonment and increase conversions.

The faster you implement Flux Checkout for WooCommerce, the faster you’ll see the results.

Adding a product gallery slider to your product page in WooCommerce is a great way to save space and improve useability. Adding a slider to your product gallery lets your customers easily scroll through product images without feeling overwhelmed.

But there’s a catch! The standard WooCommerce setup doesn’t let you create or add slider controls to your product gallery.

In other words, the default WooCommerce setup only stacks thumbnail images and doesn’t allow you to slide through the main product image either.

If you have more than just a few product images this can look messy. It can also take up a lot of space on the product page. Space you could be using to sell your product.

The good news - you can add a product gallery slider to your WooCommerce store with the help of the plugin WooThumbs for WooCommerce. Allowing you to turn these stacked thumbnails into a slider instead.

So in this article, we’ll explain how to add a product gallery slider to your WooCommerce store in just a few steps. Plus, we'll get it done in no time with WooThumbs for WooCommerce.

But before that, let’s find out why adding a product gallery slider to your WooCommerce store will benefit you.

Why add a product gallery slider to WooCommerce?

In this section, we’ll outline some reasons why adding a product gallery slider to your WooCommerce product page is beneficial. Plus we’ll give you some scenarios where it works particularly well.

A product gallery slider saves space

Your WooCommerce store might have a lot of information about your products. But for your site to be user-friendly you don’t want to create a messy product page with too many images.

One of the reasons a product gallery slider will benefit you is because it can accommodate several image thumbnails without using too much space. Meaning - additional image thumbnails will be hidden, unless the customer clicks the slider arrows.

A product gallery slider reduces overwhelm

Visuals are more engaging than text. According to research, 90% of information that sticks to your customers’ brains are visuals. But what if you have too many images or additional variational images to display? Your customers will be overwhelmed by the extra information at first glance.

A WooCommerce product gallery slider helps you tackle this problem. It lets you add as many images as you want, but with a twist. It allows customers to scroll through the product images one by one by using the slider arrows on the main product image in the gallery.

So now we know the main benefits, let’s look at some specific examples of why using a product gallery slider like WooThumbs works so well.

Scenario #1: Enhance user experience for convenience

Sometimes customers who shop online search for minute details of the product. For example, if someone’s interested in buying a sports shoe, they might want to know the sole structure, the knit of the shoelace, heel height, etc. They would want to zoom in into the pictures one at a time for a closer look.

WooThumbs is extremely useful for these situations. It comes with a customizable zoom feature that gives an expanded view of the product image, showcasing complex and tiny details.

Scenario #2: Showcase variable products easily

If you have variable products in your WooCommerce store, you might need to add more than one image per variation. With a standard WooCommerce setup, this isn’t possible.

WooThumbs solves this problem by allowing you to add as many additional variation images as you like. These images will then be displayed in the product gallery slider on your product page. Your customers can then simply slide through the gallery to find the version of the product they like.

Scenario #3: Add videos for better understanding

Imagine a situation where a customer wants to buy your product but has no idea how to use it. They’ll likely be confused about whether to buy the product or not.

Videos are even better than images. They deliver a clear message and are far more engaging. In case you sell unique or difficult-to-use products, you can add a video tutorial in your gallery that can make the understanding process easier for customers.

You can’t add a video to your product gallery with the standard WooCommerce install. But the good news is, with WooThumbs you can add high-quality videos to your product gallery. Either upload your own or embed via YouTube or Vimeo - it’s as simple as that.

So now we know the benefits, let’s find out what WooThumbs is and how we can add it to WooCommerce.

What is WooThumbs for WooCommerce?

WooThumbs improves the product gallery by allowing you to customize almost every aspect of the product gallery. It also allows customers to slide through images for maximum impact and user-friendly engagement.

Here are some of the key features of WooThumbs for WooCommerce:

• Customize the image gallery layout to suit your specific products and themes.
• Enable sliding thumbnails for browsing convenience.
• Multiple zoom options to showcase the details.
• Add unlimited additional images to your product variations.
• Ultra-fast loading times with advanced caching to enhance user experience.
• Display only relevant product images for the selected variation.
• Embed video directly into the product gallery for maximum impact and host them on multiple platforms.

So now we know what WooThumbs for WooCommerce is, let’s get it installed and add the product gallery slider while we’re there.

How to add a product gallery slider to WooCommerce

For this tutorial, we’re presuming you have a WooCommerce site with products already set up. You’ll also need to purchase the WooThumbs for WooCommerce plugin, which you can find here.

Step #1: Install WooThumbs for WooCommerce

Once you’ve purchased WooThumbs for WooCommerce from the Iconic store, take the following steps.

1. Go to Plugins → Add New → Upload Plugin.
2. Choose the zip file you downloaded, upload, and then click Activate.
3. Once activated, you’ll need to enter your license key.

With WooThumbs for WooCommerce installed, we can move on to adding a product image slider to your product gallery.

Step #2: Enable previous and next arrows

To allow the previous and next arrows to appear on the main product image, you need to enable it. For that, you need to do the following.

1. From your WordPress dashboard, go to WooCommerce → WooThumbs and click the Navigation tab at the top.
2. Go to General Navigation Settings and next to Enable Prev/Next Arrows?, change the dropdown to Yes.
3. Then scroll down to the bottom of the page and click the blue Save Changes button.

Once done, the previous and next arrows on the main product image will be enabled.

Step #3: Add your sliding thumbnails

The Thumbnails Type setting in WooThumbs allows you to choose between sliding or stacked thumbnails.

Sliding thumbnails will display all of your thumbnails in a single row/column. If you display 4 thumbnails at a time but the product has 6, you’ll be able to scroll to the other thumbnails using the built-in slider.

Stacked thumbnails will display all thumbnails at once and stack them in rows.

So if you want to save space on your product page, the sliding thumbnails option is best.

To enable sliding thumbnails, take the following steps:

1. From your WordPress dashboard, go to WooCommerce → WooThumbs and click the Navigation tab at the top.

1. Scroll down to the Thumbnails Settings section and next to Enable Thumbnails?, change the dropdown to Yes.
2. Next to Thumbnails Type, change the dropdown to Sliding thumbnails.
3. You’ll then be able to change how many thumbnails appear below your main image by changing the number in the Thumbnail Count section.
4. You can also choose if you want to enable or disable the prev/next controls by changing the
5. Enable Thumbnail Controls? dropdown to Yes or No.
6. Then scroll down to the bottom of the page and click the blue Save Changes button.

Once done, your product gallery slider will be enabled.

Step 4 (optional): Change the gallery slider transition effect

WooThumbs for WooCommerce allows you to change the effect shown to customers when they scroll through your new product image gallery.

With just a few changes to the plugin settings, you can choose between the horizontal slide, vertical slide, and fade.

To change the transition effect, take the following steps:

1. From your WordPress dashboard, go to WooCommerce → WooThumbs → Carousel.

1. In the Carousel Settings section, you’ll see a dropdown next to Mode. Use this to pick your preferred transition.
2. Next, you can set the Transition Speed. This is the speed at which the gallery changes from one image to another.
3. You can set the images to automatically slide/fade after the page loads by enabling the Autoplay option.
4. Finally, you can enable or disable Infinite Loop. This means when you get to the end of your images it will go back to the start when you click the next icon.
5. Once you’re happy with all your settings, scroll to the bottom of the page and click the blue Save Changes button.

Once done, you’ll have successfully customized your product gallery slider in WooCommerce.

Improve your WooCommerce product page with a product gallery slider

That’s it! In this article, we’ve explained how to improve your WooCommerce product page by adding a product gallery slider. By making this change, you’ll be able to save space, reduce overwhelm, and improve your customer’s experience in no time at all.

All of this and more can be done with the easy-to-use plugin, WooThumbs for WooCommerce.

If a product has variations with different prices then WooCommerce always displays the price as a range. This could be losing you sales. That's why you need the WooCommerce Variation Prices plugin.

Imagine that a product has variations that are priced between $10 and $25. WooCommerce will display the price as $10.00 – $25.00 throughout your store. The problem is that this often isn’t the best way to sell your products and can put customers off, resulting in lost sales.

Keep reading to discover the easy way to take control over how variation prices are displayed in your store. You'll learn how to list all variation prices separately, replace the price range with a "From" or "To" price, or even create your custom variation price format.

What's the best way to set different prices for product variations in WooCommerce?

Out of the box, if a product has variations that have different prices then WooCommerce will always display the price as a range. There's absolutely nothing you can do to change this, short of writing custom PHP code. It doesn't matter that displaying a price range might not be the best way to attract customers - that's the only option.

Fortunately, you can easily fix this by installing the WooCommerce Variation Prices plugin. This lets you replace the default variation price range with an alternate price format of your choosing.

You can choose to display the minimum variation price only, maximum variation price only, list all variation prices, or choose a custom format. Here's a list of all the different variation price formats that you can choose from:

• Price range e.g. $50 - $100.
• Starting price (long) e.g. From $50.
• Starting price (short) e.g. $50+.
• Maximum price e.g. Up to $100.
• List all variation prices at once.
• Hide the price at the top of the product page until a variation is selected.
• Create your own custom variation price display format, with whatever wording you choose. As part of this, you can also change the price range separator from a dash to anything else, such as colon or other symbol.

As you can see, this variation price plugin for WooCommerce gives online store owners complete flexibility in how to display variable prices. You can even hide the price for variable products on the front-end. It also has extras such as automatically updating the main product price when the customer selects a variation.

Step-by-step: How to set up variable prices in WooCommerce

In this tutorial, I'm going to show you exactly how to change how your variable product prices are displayed. The new price format will be used wherever WooCommerce normally displays the default price range. This includes on your main Shop page, category pages, related products, and on individual product pages.

1. Set up the WooCommerce Variation Prices plugin

To start using WooCommerce Variation Prices straight away, watch the video at the start of this article. Alternatively, follow the step-by-step instructions below:

1. Get the WooCommerce Variation Prices plugin. You’ll receive the plugin files and license key in a confirmation email. Install the plugin on your WordPress website and activate it.
2. Once that’s done, the plugin setup wizard will open automatically. Activate your license key on the first page.
3. Next, you can start changing the format for your variation prices. You can do this in the setup wizard, or do it later on the settings page at WooCommerce → Settings → Products → Variation prices.

2. Set the price display format

Use the Options dropdown to select a price format. The available options include:

• Price range
• Starting price (short)
• Starting price (long)
• Maximum price
• List all variation prices
• Hide the price until a variation is selected
• Custom

If you choose the Price range option, you'll see the Price range separator field.

Here, you can enter a character to use as the price range separator. By default, this is set to a hyphen/dash character.

And, if you choose the Custom option, you'll see a Custom format field.

You can add any text you'd like to display here. It supports %min% and %max% tags. For example, from %min% to %max% + VAT would display the price as: "from $50 to $100 + VAT".

3. Choose product types

The option lets you choose the products types you want to apply the variation price format to.

You can choose to apply it to variable products, grouped products, or both.

4. Show selected variation price

Normally, the price range at the top of the WooCommerce product page remains visible even after the customer selects a variation. That's pretty limited, so you can use the WooCommerce Variation Prices plugin to change this.

When the Show selected variation price option is enabled, the main price of the product page is updated to show the price of the selected variation. This is much more user-friendly than always showing the low and high prices.

5. Bonus: Change the variation price format in the WordPress admin

So far, we've only looked at how to change the variation price format in the front end of your e-commerce store. You can also choose to show the modified variation price formats in the WordPress admin dashboard. This option is enabled by default, but you can disable it if you prefer.

When is it a good idea to change the variation price format?

To help you decide whether you need the WooCommerce Variation Prices plugin, let’s take a look at some use case scenarios. These are examples of products that can benefit from displaying variation prices in a different type of price format:

Show the lowest variation price instead of the range

Online courses and other subscription products that have plenty of add-on option fields might want to show the lowest price (the base cost) only on the front-end. This is especially useful for anyone that has add-ons that significantly increase the cost of the base product.

For example, if the online course costs $99 and you give customers several add-ons such as:

• A one-on-one session for $39 per month.
• Access to the Discord community for $9.99 per month.

Then you wouldn’t want to display the online course’s price in a range like $99 – $147.99. That’s a huge difference. Potential learners might be put off by the highest price thinking they can’t afford the online course.

Using a WooCommerce variation prices plugin, you can instead use wording like ‘Starting at $99’ or ‘Starts from $99’.

Show the highest variation price instead of the range

Restaurants might want to display the highest price instead of the range for each item. This is particularly useful for pizzerias that sell single slices, half pies, and full pies as options. This way, the customer won’t be led to believe that a full pizza pie costs $5 when that’s the price of a single slice.

In this sort of scenario, you’d be better of displaying the prices using a separator like ‘$5 / $11.99 / $23’ to display the prices of single slices, half pies, and full pies.

Sell variations by weight

Stores that sell products by weight might want to list all variation prices or choose a custom format depending on the product. For example, meat shops that sell meat in pre-packaged variations might want to display the cost of each variation.

You can list prices on the front-end:

• 500 grams - $5.40
• 1 kilogram - $10.20
• 1.5 kilogram - $15.99
• 2.0 kilograms - $20.00

You can list the prices of all variations on the single product page.

This is particularly useful if you want to sell product variations at different prices or offer a discount on specific variations.

Display the maximum price

Some stores might want to display the maximum price because the lowest variation price might be the price of a sample rather than the actual, full-size product. In this scenario, only the highest price matters.

For example, bakeries that sell cookies by the dozen might want to display the price of a full dozen instead of a price range that shows the price of one cookie and a dozen cookies. You could show the price as ‘Up to $25’ indicating that lower price options are also available.

Hide the WooCommerce variation price display

Other store owners want to hide or remove the WooCommerce variation price display from the product page. For example, maybe you want to hide the variation price range when customers first visit the product page. The price of the selected variation then appears when they choose a variation.

WooCommerce variable price FAQs

What's a WooCommerce variable product?

So far in this article, I've assumed you already know what is a product variation. Sorry about that!

In case you don't already know, WooCommerce comes with a choice of product types. One of these is called 'Variable product'. It allows you to create two or more options for customers to choose from.

WooCommerce product variations are useful for any type of product that is sold with a defined list of choices. For example, a t-shirt might be sold in a range of sizes and colors - so you would create a variation for each combination.

Further reading: Complete guide to WooCommerce product variations.

What’s wrong with the way WooCommerce normally displays variation prices?

As I mentioned earlier, WooCommerce displays product variation prices in a range that lists the lowest and the highest price. Here’s what’s wrong with this:

Showing the highest possible price

The problem with showing a range that includes the highest possible price is that it can be bad for buyer psychology. This is because you’re drawing attention to the highest possible price.

As a result, it can lose you sales and reduce your conversion rate – a disaster for any store owner!

Think of it this way: if the top of the range is above budget, the customer is likely to leave your store. Unless they select a variation with a lower price, they’ll never know which options are within their budget.

The solution is to use the WooCommerce Variation Prices plugin to change the variation price format into something more buyer-friendly.

Select a variation to see the actual price

WooCommerce requires customers to select a variation to see the actual price. If you sell products that have lots of variations, customers might be clicking around for a long time to find one with a price they’re happy with.

The solution is to use WooCommerce Variation Prices to list all variation prices at once.

Not suitable for all types of products

The default way WooCommerce displays variable product prices may simply not fit with the nature of the products you sell. For example, the lowest or highest price may be the norm and you only want to display this. Or, you might sell products by weight and need to add a ‘per KG’ price or something similar.

In this case, you’re better off using the WooCommerce Variation Prices plugin to create a custom price format that meets your exact requirements.

How many variations are allowed in WooCommerce?

WooCommerce works with unlimited numbers of variations. Once you get above a certain number of variations, they are loaded using AJAX to ensure fast load times regardless of the number.

However, I find that variations can be a pain to work with if you have a lot per product. That's because to create variations, you need to add your product attributes first (e.g. size and color). Next, you create a separate variation for every possible combination of attributes, and add a price, image, stock level etc. for each one. The number of variations quickly multiplies up exponentially if you have lots of attributes and variations.

In some cases, it's easier to use the WooCommerce Product Options option instead of variations. This provides an alternative way of adding options to products, and is much simpler than working with variations. It's also more flexible because instead of just displaying the options as dropdowns, you can choose from a wide range of styles such as checkboxes, file upload fields and clickable image buttons.

How to set different prices for product variations in WooCommerce?

When you create a variation for a WooCommerce product, it will have its own price field. Use this to add a different price for each product variation.

If you have lots of variations, then consider using the WooCommerce Bulk Variations plugin to bulk-select variations and set the price in bulk. For example, you can select all products with a 'Large' size attribute and set the price for all the large variations at once.

Next steps: Take your WooCommerce variation pricing to the next level

WooCommerce Variation Prices is perfect for store owners that don’t want to display variable product prices in the default range. It lets you choose from different options including displaying the minimum (or maximum) price only, listing all variation prices, and choosing a custom format.

Like all Barn2 plugins, WooCommerce Variation Prices comes with a full 30-day money back guarantee. This lets you try it risk-free on your store and get a refund if you're not happy for any reason.

This super-simple plugin only takes a few minutes to set up. Install it on your WordPress site and follow the simple instructions in the setup wizard to improve the way variable product prices are displayed in your store. It's a simple but important change that will change how customers perceive your pricing, helping to generate more sales for you 🔥