Boost your WooCommerce user experience with live product previews
Live product previews enable shoppers to personalize products with custom text or images and estimate how the finished product will look right from product detail pages on an ecommerce site. Read on to learn how to add the Woocommerce live preview feature to your online store.
A major drawback of online shopping is that customers can’t see how products look in real life. This is especially true for personalized products, where the finished item must be customized to fit each customer's unique requirements.
That’s where live previews come in.
A live product preview is a powerful feature of ecommerce websites that enables customers to see how products will look directly on product pages. It gives buyers a realistic, interactive estimate of how the final product will look before they place their orders.
In this detailed guide, we'll explore:
- How to enable WooCommerce live previews for your products.
- Top benefits of live product previews.
- A real-world example of the live product preview on an actual ecommerce storefront.
- Lots more.
Extensions used in this guide
- WooCommerce Product Options - The best plugin to offer extra product options and (free or paid) add-ons on product detail pages on a WooCommerce site. It has a wide array of field types, such as file uploads, checkboxes, radio buttons, image swatches, text areas, etc.
- Live Preview - An add-on that works with WooCommerce Product Options to enable store admins to add the preview function to product detail pages on WooCommerce sites.
Below, I'll discuss how to use WooCommerce Product Options and the Live Preview add-on to enable live product previews in your WooCommerce store.
Let's jump right in.
What is a live preview?
A live product preview in online stores allows customers to see a real-time display of how their customizations will look on a product before they make a purchase.
This feature is particularly useful for stores that sell customizable or configurable items, such as mugs, t-shirts, furnishings, selling phone cases, and those that integrate with platforms like Printify and other print on demand sites.
Because customized products are non-returnable, consumers want confidence that the product they are ordering will look the way they want. If you have customizable products and no live preview functionality, you are missing out on sales.
Greg ZakowiczSr. Ecommerce Expert at Omnisend
How can I enable live product previews in WooCommerce?
Live previews are an obvious quality-of-life improvement for customers shopping online for products that have a lot of customizable elements. They enable shoppers to experiment with different configurations and visualize how the product will look and feel after they've personalized it. This dramatically reduces the uncertainty with online shopping and helps customers make more informed purchase decisions.
However, out of the box, WooCommerce doesn't include a live product preview feature. Moreover, there are only a handful of tools on the market that make this possible at all in WooCommerce. Of the tools that do exist, most of them are largely limited to text previews only. They don't offer a way to upload an image or logo, such as for a custom shirt.
Until now.
Here at Barn2, we've taken notice of this gap and solved it for WooCommerce stores. All you need is the new Live Product Review add-on for our popular WooCommerce Product Options plugin.
The Live Product Preview add-on is an extension that can be purchased as a bundle along with the WooCommerce Product Options plugin. It enables customers to upload images or enter text and preview them live on products directly from the product page.
We brought live product previews to our WooCommerce Product Options plugin after literally hundreds of customers told us how much they needed it. They told us that it was a game-changer for selling customized products.
Katie KeithFounder & CEO
I'll share more about the Live Product Preview add-on in a bit. But in case you aren't familiar with WooCommerce Product Options:
WooCommerce Product Options is an award-winning plugin to add extra product options and (free or paid) add-ons on single product pages on a WooCommerce site. It has a wide array of field types, such as file uploads, text areas, checkboxes, radio buttons, image swatches, etc.
Thousands of WooCommerce stores use it to offer customizable or configurable products and enable customers to tailor products while shopping on the product detail page.
An overview of the Live Product Preview add-on
Here's how the Live Product Preview add-on works in a nutshell. We'll use image previews here, but you can also preview text that the customer has entered.
Store admins can specify a defined printable area where the uploaded content will appear on the product. For example if it's a hoodie, then this can be the upper left or across the center. This sets the printable area, aka where the uploaded content will be added to the final product.
Customers can upload an image using the image option type on individual product pages. After the image is uploaded, an edit button will appear on the Image option. It will open a lightbox popup where customers can reposition the image using drag and drop or resize it as needed. The Live Product Preview add-on will then display a live preview of how the finished product will appear.
Customers can add new images or edit the previously uploaded one from within the layout before adding the product to their carts and proceeding to the checkout page.
Store admins will be able to view the final customized product image together with other product and order-related information in the order details section of their WooCommerce dashboard, no additional follow-up with customers needed.
The entire setup is 100% code free — no HTML, PHP or CSS knowledge required. Both extensions are have been tested for compatibility with most popular WordPress themes.
More ways to customize products with WooCommerce Product Options
WooCommerce Product Options is a powerful product options plugin with a ton of customization options. Here are some of its useful features for personalized items and product configurators:
- 16+ field types: Store admins can create all sorts of customizable product options, including text fields, dropdowns, radio buttons, checkboxes, file uploads, color pickers, date selectors, etc.
- 8 price options: You can charge for extra options using a variety of price options, such as a flat rate, a percentage of the base product price, complex pricing formulas, and more.
- Conditional logic: It has built-in "if this, then that" conditional logic which you can customize to control how the extra options and add-ons are presented to buyers on product detail pages.
- Advanced rules: You can set various rules, such as default values for fields, mark certain options as required, allow decimal numbers, and even impose minimum and maximum quantity limits to tailor how the extra options and add-ons work.
- Product targeting: You can make the extra options available storewide (to all products), to specific product categories, or even to individual products with just a few clicks. This helps save so much time for store admins.
How WooCommerce product previews improve the shopping experience
According to this study conducted at Jönköping University, interactive previews are a powerful tool that can improve the online shopping process and lead to more positive customer experiences.
Here are a few ways your WooCommerce store can benefit from adding the product preview feature.
- Reduced returns and refund requests: Allowing customers to preview their customizations before ordering significantly reduces the rate of returns and refund requests. This is because when customers know exactly what they’re getting, they’re less likely to be disappointed when the product arrives.
- Increased conversion rates: As a store owner, you know firsthand how many customers hesitate to buy personalizable products because they can't accurately predict how the final result will look. Live product review smashes those objections, captures customers at this crucial stage in the WooCommerce sales funnel or ecommerce marketing funnel, and helps boost conversion rates.
- Streamlined ordering process: Live preview simplifies the ordering process. Customers can upload images, add text, and fine-tune customizations exactly how they want before proceeding to checkout, without needing to contact store admins. This reduces friction in the purchasing process.
- Streamlined fulfillment process: The live preview feature also streamlines the order fulfillment process for store admins. When customers complete their purchase, WooCommerce saves the uploaded details along with the remaining information and includes it in the order notification. This eliminates back-and-forth that would have otherwise occurred to get the details from customers.
Real life example: Live WooCommerce product previews in action
Let's see what the product preview feature looks like on a working storefront!
We'll look at ThingsRemembered.com, an ecommerce store that specializes in personalized products for milestone occasions like weddings, anniversaries, engagements, birthdays, religious holidays, etc. They also offer seasonal gifts for holidays like Christmas, Valentine's Day, Mother's Day, Father's Day, and so on.
This is the product detail page for a coffee mug which customers can personalize with family photos. Here's a walkthrough of the steps customers must follow to upload photos:
- Customers must select their preferred product variant followed by the "Personalize & Add to bag" button. This will initiate the live product preview feature.
- They can click anywhere in the input field area underneath the "Upload photo" section.
- This page is where they can upload a photo from their computer or drag and drop it onto the website.
- The next step is to crop and reposition the image to make sure it properly fits onto the finished product.
- After customers have uploaded the image, they can preview it, or add some text to appear on the back. (Also, notice how this website offers paid optional add-ons in the "Optional Cheryl's Cookies" section to upsell customers, increase the average order value, and boost sales!).
- Finally, they can confirm their selection to add the personalized product to their carts. They also get another chance to edit or replace the image.
And that's it! The order is placed successfully.
Ready to add the WooCommerce live preview feature to your online store?
One of the shortcomings of ecommerce is that customers can't accurately imagine how finished customized products will look before placing an order.
Giving customers the ability to preview their selections in real-time significantly reduces the guesswork and uncertainty that comes with online shopping.
In this post, we've discussed using the following extensions to set up the product preview feature on your WooCommerce site.
- WooCommerce Product Options - The most powerful WooCommerce plugin to offer extra product options along with free or paid add-ons right from product detail pages on an online store. It provides a wide array of field types, including text areas, file uploads, checkboxes, radio buttons, image swatches, etc.
- Live Product Preview - An add-on that pairs with the WooCommerce Product Options plugin to enable store admins to add the preview function to product detail pages.
Get WooCommerce Product Options and the Live Product Preview add-on and enable live product previews on your site today!