3 simple ways to customise the WooCommerce product page

Do you want to customise your product pages in WooCommerce? Today, we’re going to show you 3 simple and effective customisations you can make using just one plugin.

While you can use WooCommerce to create a perfectly functional online store, you may find yourself limited by the default options you get for setting up your product pages. This is why many WooCommerce users turn to third-party plugins that help improve the aesthetics and features of default WooCommerce product pages.

The only problem with this is that buying lots of plugins can be expensive. So today, we’re going to talk about just one plugin, WooCommerce Product Add-Ons Ultimate Pro, and show you how to use it in three ways that will make a big difference on your WooCommerce product pages.

Why should you customise the product pages in your WooCommerce store?

As an eCommerce store owner, you obviously want to convert your site visitors into customers. The probability of that happening is depending on the quality of your products as much as it is dependent on their experience in your store. If your WooCommerce shop page and product pages don’t stand out, or if they offer a lacklustre experience, then your customers will likely look for another website where they can buy similar products. After all, no matter what you sell, you’re bound to have competitors with eCommerce websites.

In 2022, WooCommerce was reported as the biggest eCommerce platform in the world, with a market share of 36.68%. Though this speaks volumes about the reputability and usability of the WooCommerce platform, it also means that there are bound to be thousands of WooCommerce stores that look similar or offer the exact same user experience for shoppers. This also means if you are not actively trying to improve the customer experience on your WooCommerce site, then you’re putting yourself at a disadvantage and potentially losing sales for your business.

How to customize WooCommerce product pages visually

Luckily, from a visual perspective, it’s quite easy to change and customise your online store’s design. Firstly, the theme you use will make a big difference. Any good WordPress theme will have default templates that are automatically implemented when you first activate a theme on your online store, including product page templates that are designed for your WooCommerce store. WordPress has a huge directory of over 5,000 free themes and almost 2000 of these are eCommerce themes. This means you can easily find a theme you like that is well-designed and hasn’t been used excessively.

You’ll be able to personalise your theme by setting your site colours and fonts, and adjusting your page layouts as necessary. However, if you’re looking to further tweak your WooCommerce product page design, you can also use a page builder like Elementor. In contrast to the Gutenberg block editor, a page builder will make it easy for you to adjust things like headers, footers, and margins for your shop pages. Keep in mind that if this is something you’re interested in, you’ll need a theme that’s compatible with your page builder of choice.

Why visual customisations aren’t enough

However, it’s really important to stress that making visual changes to your WooCommerce product pages isn’t enough to significantly optimise conversions. It’s fair to say that WooCommerce is an excellent eCommerce platform but it offers limited functionality in many ways out of the box. That’s why there are lots of extensions and plugins that let you do virtually anything or add any functionality to your WooCommerce site.

Ultimately, if you create beautiful product pages for your online store but ignore vital ways that you can improve the functionality of your product pages, then you’re potentially missing out on sales anyway. This is why we’re going to show you three essential customisations you can implement on your WooCommerce product pages using WooCommerce Product Add-Ons Ultimate Pro.

What is WooCommerce Product Add-Ons Ultimate Pro?

WooCommerce Product Add-Ons Ultimate Pro is a WooCommerce plugin that’s designed to let you add extra options to your WooCommerce products. You have so many ways to customise products using this plugin. Whether you simply want to offer variable products on your product pages, or if you want to let customers totally personalise their items before hitting the add to cart button, it’s all possible.

As you can imagine, WooCommerce Product Add-Ons Ultimate Pro is packed with features. You can add up to 16 different add-on fields to your WooCommerce products including select fields, textbox fields, checkboxes, image upload fields, radio buttons, as well as informational fields.

What eCommerce stores would benefit from WooCommerce Product Add-Ons Ultimate Pro?

Because it’s so versatile, WooCommerce Product Add-Ons Ultimate Pro is a great fit for all kinds of businesses that want to offer a better experience to customers. Perhaps you own a print on demand store and want an easy way for customers to configure their products by uploading images and adding custom text. Or, perhaps you sell subscription boxes and want customers to create their own product bundles on a single product page. You don’t just need to sell customisable products though – let’s say you sell toys and want to add basic extra options such as gift wrapping, or choosing the date when their product should ship out.

These are all excellent types of stores that would benefit from WooCommerce Product Add-Ons Ultimate Pro, and we could mention many more specific use cases. However, today we’re going to talk about features that can be widely applied to any online store, no matter what kind of products you sell.

If you want to get more ideas on how to use the plugin to customise your product pages, check out our demo site which has many different examples included. Alternatively, watch our product video below:

How much does the plugin cost?

WooCommerce Product Add-Ons Ultimate Pro comes in a Basic and a Pro plan.

The Basic plugin is very powerful as is but some of the features included in the Pro plugin can make a big difference to your business. This is why today we’re including some Pro features in our discussion.

3 ways to customise product pages with WooCommerce Product Add-Ons Ultimate Pro

Here, we’ll show you three different ways to customise your WooCommerce site’s product pages using the WooCommerce Product Add-Ons Ultimate Pro plugin.

#1. Create product grouping and bundles

One of the highlight features of the WooCommerce Product Add-Ons Ultimate Pro plugin is that it lets you create product groups or bundles. For instance, you can create a “doughnut box” product that lets shoppers add multiple “smaller” products into a product bundle and purchase them together.

Similarly, this is also great for offering customisable products on your WooCommerce site. For example, if you sell apparel products, you can let shoppers select the design they want using image swatches or let them upload their logo and print custom images on t-shirts before proceeding to the checkout page.

Creating product grouping and bundles on your WooCommerce site is a great way to offer different product options and let customers add multiple products to their shopping carts at once. As a result, your product pages not only look unique but offer a streamlined shopping experience.

Once you install the WooCommerce Product Add-Ons Ultimate Pro plugin on your WooCommerce site, create a new product in WooCommerce or navigate to a product’s edit page. You will see a Product Add-Ons tab under the Product data meta box.

You can click on the Add Group button to start creating a “Group” of product options or extra fields and then the Add Field button to start adding extra fields to your product. Let’s say you’re creating a PC product, you can let shoppers select whether they want to add storage disks. For this, you will need to add the Checkbox Group field.

You can set the Field Label to anything like “Select your storage disks” and then click on the Add Option button to add checkboxes. The Option field can be used to specify the storage disk product option and use the Price field to charge an extra fee for the product option.

Similarly, you can add multiple fields to your products and showcase as many extra options as you’d like. The WooCommerce Product Add-Ons Ultimate Pro plugin also lets you showcase child products or link specific products as extra options so customers can add them directly to the cart from the same product page. Create a new field group similar to how we did it earlier and create a new Products field.

You will need to click on the Update button to save changes for the Child Products field to work properly. Once the page is saved and refreshed, you can add multiple child products as extra options on your WooCommerce product page.

Let’s say you also want to offer an option for customers to purchase an extended warranty for their PC. For this, you can use the Radio Group field type and specify the warranty options and prices using the Add Option button.

You can also let customers select their desired PC case color using the Select Box field. This way, you can showcase the color options accurately using images and charge extra for premium color options. Make sure to click on the Update button to continue.

This way, you create a much more streamlined shopping experience on your WooCommerce product pages. Your shoppers can customise their product as desired and add extra products to their cart without having to leave the product page.

#2. Add information fields to products

While WooCommerce by default lets you add a product description and short description, information fields make it easier to include extra information about any extra options included on a product page. You can use the WooCommerce Product Add-Ons Ultimate Pro plugin to add informational fields to your product as well as include images for every data point to make the information visually appealing, as well.

For instance, if you sell food products on your WooCommerce site, you can display the nutritional information for every item customers can include in their orders.

Using informational fields, you can show this information every time a user clicks on an item.

Similarly, if you sell PCs or PC parts on your WooCommerce site, you can let users compare different technical specs of processors when purchasing the computer.

Once they select the processor they want, additional information about their processor of choice will be displayed below. For a better understanding of how this works, you can take a look at our Build Your Own Computer demo product.

It’s really easy to add informational fields to your products in the back-end.

Click on the Add Field button and select Information using the Field type dropdown menu. You can then click on the Add Row button to start adding data to your informational field. For instance, if you’re providing information for the PC, you can create one row for providing the data for the processor, one for the graphics card, and so on. It’s also great to include images as a way to make the information visually pleasing and easier to understand for your customers. Once you’re done, make sure to save your changes by clicking on the Update button.

Doing this will display an “Information” or “Technical data” section on the product page which makes it easier for your customers to make informed purchase decisions.

#3. Apply conditional logic

While it can be great to have the option to add endless product customisation features to your product pages, it can also be overwhelming from a customer’s perspective. A great way to solve this issue is by using conditional logic. This way, you can reveal relevant fields or extra options for a product based on what the customer selects or is interested in.

Let’s say you sell personalised t-shirts on your WooCommerce site that let shoppers fully customise the product before purchasing. However, you don’t want to clutter the main product page with extra options unless your customer wants to see them. You can simply add a “Customise t-shirt” checkbox and display other personalisation fields only when customers select the checkbox.

Now select your extra option fields and click on the Add Condition button to set conditions. We’ve set the following conditions:

• Show this field if All rules match
• [Customise My T-shirt] [#533] Is Checked.

This will only showcase the extra options when customers select the “Customise My T-shirt” checkbox. Similarly, you can do this for all other extra product options and click on the Update button to continue.

The extra product options will not be displayed by default when customers first land on the product page.

As soon as the user selects the checkbox, extra product personalisation options will be displayed on the front-end.

Customise your product pages and improve your customer experience!

Customising your WooCommerce product pages can help your online store look unique and stand out from the rest. While the visuals of your WooCommerce product page are important, it’s also crucial to add essential functionality that optimises the customer experience on your product pages.

This is why we recommend using the WooCommerce Product Add-Ons Ultimate Pro plugin, as it’s the ultimate solution for customising the look and feel of your product pages. The plugin comes pre-built with a wide range of add-on fields that you can use to improve your WooCommerce product pages. While we’ve shown only three main ways to use the plugin for customising WooCommerce product pages, there are lots more ways you can use the plugin so make sure to check it out and get creative.

Ready to customize WooCommerce product pages and improve the customer experience on your online store? Get WooCommerce Product Add-Ons Ultimate Pro today!