Tutorial

How to Customize Individual Product Pages in WooCommerce

Posted on by Jake Fischground

REVIEWED BY CORY FERRERIA | ESTIMATED READING TIME: 10 MINUTES

02
Mar

Are you wondering how to customize WooCommerce product pages?

If so, this article can help. WooCommerce product pages are some of the most important pages on your eCommerce score. They can be a determining factor in whether a customer chooses to purchase from you or not.

Well-designed WooCommerce product pages can boost conversions, improve the customer experience, and even increase your average order value. Get them right, and you could see your sales rocket. 

By default, WooCommerce doesn’t offer much in the way of product page customization. Therefore, you’ll need to consider extending the default WooCommerce functionality to get the most out of them.

In this post, we look at some of the main ways you can improve your WooCommerce product pages. We also explore the kinds of plugins you can use to enhance their appearance and functionality, and cover some top tips for how you can optimize your product pages to boost conversions. Read on to learn more. 

How can you customize your WooCommerce product pages?

There are many different aspects of your WooCommerce product pages that you can customize and optimize in order to improve customer experience, boost conversions, and increase average order value.

There are two main strategies that you can employ when looking to customize your WooCommerce product pages: 

  1. Use custom CSS code to manually alter your product pages.
  2. Use supplementary plugins to add extra functionality to your product pages.

In this article, we’re going to focus primarily on the second method, as this is more accessible, easier, and less likely to break your site.

With that in mind, let’s dive into some of the main ways you can customize your WooCommerce product pages and how you can go about it with the help of supplementary plugins.

Product add-ons 

Product add-ons are a straightforward way to add value to your WooCommerce product pages. They enable customers to customize their orders directly from the product page in various different ways. Here are just a few of the different types of product add-ons you can offer on your online store:

As you can see, there are almost limitless options and use cases for product add-ons, and they can bring a whole host of benefits to your business. These include:

  • Improved customer experience – If customers can find or create exactly the product they are looking for, they’ll have a better experience. You can give them the option to modify their order or offer complementary products to ensure a better overall experience.
  • More conversions – By offering customization and personalization options, customers are more likely to find what they need and less likely to shop elsewhere.
  • Higher order value – Offering supplementary products or services such as gift wrapping as add-ons on the product page or customization at an added cost encourages customers to spend more. When customers have the option, they often feel the temptation to get what they really want instead of settling, even if the price is higher. 

Including all these options on individual product pages is challenging if you code for them from scratch. This is where Product Manager Add-ons from BizSwoop comes in. Using this plugin, you can easily offer a whole range of different add-on options on your WooCommerce store.

Here are some of the plugin’s key features that make it the ideal choice when it comes to offering add-on options in WooCommerce: 

Intuitive display 

Product Manager Add-ons enables you to display your add-on options in an intuitive, user-friendly way. Add-ons are grouped logically to guide the user through the purchasing process, and you can include thumbnail images and descriptions to add-on options to provide maximum clarity to customers.

On top of this, the plugin is also optimized for display on both desktop and mobile, ensuring that your customers will easily be able to customize their orders regardless of how they prefer to shop.

Flexible add-on options

With a whole range of different input field options available (including checkboxes, radio buttons, text input fields, image upload fields, checkout pages, and dropdown menus), Product Manager Add-ons enables you to build bespoke add-ons that meet your store’s unique needs. You don’t require any additional plugins or software to make your pages function how you would like.

You can easily enable or disable add-ons at will and associate them with particular products and categories to ensure they appear exactly where you want them on your store front-end, giving you ultimate flexibility over how you display your add-ons.

Omnichannel compatibility 

Product Manager Add-ons is also compatible with all the most popular WordPress themes and page builders, including the Gutenberg and Elementor page builders and the Storefront theme, so you can be sure the plugin will be a good fit for your WooCommerce store. It also works seamlessly with WooCommerce POS systems, especially Jovvie, BizSwoop’s dedicated POS plugin, making it a perfect solution for omnichannel store owners.

Including related products on your WooCommerce product pages enables you to advertise products that might be relevant or useful to your customers without the need for them to navigate through multiple pages. This approach saves them time and makes it more likely they will return to your store later on. 

The benefits of adding related products to your product pages include:

  • Improved customer experience – upselling or cross-selling relevant products to your customers could save them time navigating your store to find what they need. They can access purchases in a single click, reducing the risk they will search elsewhere. 
  • Increased average order value – customers are more likely to add related products to their order if you offer them directly from the product page. By contrast, conversions are less likely if they need to search for products manually. 

When it comes to displaying related products on your WooCommerce product pages, you can’t beat Product Tables for WooCommerce from BizSwoop. This powerful plugin offers a host of features designed to provide a great experience for your customers whilst also helping to boost your bottom line:

  • Optimized for conversions – Product Tables for WooCommerce enables you to build conversion-optimized tables of related products that you can display anywhere you want on your WooCommerce product pages using dedicated shortcodes. Customers can add products directly to their cart from the table, individually or in bulk, without the need to navigate to a separate page.
  • Powerful customization – You can also customize any aspect of your product tables, from which products or product categories to include, to the fields you want to display and the table’s appearance. This enables you to optimize each table to provide the most streamlined experience for your customers and help boost conversions.
  • Sort, search, and filter options – If you have a large product catalog, Product Tables for WooCommerce makes it easy for customers to find relevant related products through a host of sorting, searching, and filtering options. This streamlines the customer journey and can help to boost average order value.

As Product Tables for WooCommerce is also part of the BizSwoop suite of plugins, it works perfectly with Product Manager Add-ons. By pairing the two plugins together, you can upsell add-on options on your WooCommerce product pages at the same time as cross-selling related or supplementary products, offering your customers a more streamlined shopping experience whilst also presenting more opportunities to boost your store’s average order value.

Custom fields 

Sometimes, the default WooCommerce product page templates don’t provide you with the options you need to display sufficient information about your products to customers. That’s where custom fields can help. They give you more options, letting you display pertinent data at the correct moment.

There are two main types of custom fields: 

  1. Product information. Product information fields make it easy to provide additional information about your products in a structured format, including elements like images, videos, and other media. Online stores often use these to make pages more engaging or helpful by explaining how customers can use specific products. 
  2. Input fields. Input fields let you add extra product options and customizations for customers to choose from, depending on their needs. These types of custom fields are most frequently used for offering product add-ons, which we covered earlier in the article.

For more information on both types of custom fields, including the benefits of adding them to your WooCommerce store and how you can go about it, you can check out our comprehensive guide. In short, custom product information fields help to streamline the purchasing journey in the following ways:

  • Improved UX – Adding custom fields provides customers with all the information they need in one convenient place. This makes them less likely to leave the product page, and more likely to add the product to their basket. 
  • Increase conversion rate – The easier it is for customers to find all the information they are looking for, the faster they can come to a purchasing decision. Customers are less likely to shop around if your site provides all the information they need in one convenient place. 

There are various plugin options available when it comes to adding custom fields to your WooCommerce product pages. As we’ve seen, Product Manager Add-ons is a great option for adding custom input fields to your product pages.

When it comes to product information fields, one popular free solution is the Advanced Custom Fields plugin from WP Engine. It offers over 30 field types that you can add quickly and easily wherever you want on your WordPress site, including add-to-cart buttons. The “Professional” version has even greater functionality, including ACF blocks, flexible content fields, and fully-customizable image galleries. 

Variation swatches 

Variation swatches provide a straightforward means of displaying product variations on your WooCommerce store. Essentially, they add color swatches or thumbnail images to your product pages for all available variations of the primary product, enabling your customers to compare all of the different product variations in one convenient place.

This avoids customers needing to navigate to different pages for different variations and makes it much easier to compare options, improving customer experience, and streamlining the purchasing journey.

Again, there are a couple of good options for displaying product variations on your WooCommerce store. However, you need to be careful: getting the presentation wrong can confuse customers, making a sale less likely. 

Here are two good strategies for displaying product variations from your WooCommerce product pages: 

  • As product add-on options for a single base product using Product Manager Add-ons, including a thumbnail option for each variation. This enables you to display variations as radio buttons or other input field options instead of a dropdown list.
  • As variations in a list format using Product Tables for WooCommerce. This makes it easy for your customers to add variations of the same product to their cart directly from the product page (individually or in bulk), and also gives you control over where you display your product variations on the page. List formats are more compact and easier to use. Depending on how you format your table, it can also be more comprehensive, as you’ll have options to add more information about new products without customers needing to click on separate pages. 

Page appearance

Customizing the overall appearance of your WooCommerce product pages can be a critical factor in improving customer experience and driving conversions.

There are many free WordPress themes available that you can use to alter the display of your product pages, but for ultimate control over how you organize and display the different elements of your product pages, you have two main options:

  • Custom CSS code – This option gives you total control over how every element of your product pages is displayed but will require coding expertise. Learning basic CSS takes around seven to eight months with good discipline. 
  • Use a visual page builder – This option offers slightly less flexibility than coding your product pages manually but is much more straightforward, quicker, and less likely to break your site. You can customize layouts, change headers and footers, adjust sidebars, and even copy designs of existing websites you like. 

The good news is, there is a wide range of different visual page builders on the market that make it easy to customize your product pages’ appearance. One popular option is Elementor, which is compatible with all the plugins we’ve listed in this article. 

Elementor is popular because of its:

  • Easy-to-use drag-and-drop interface – Elementor makes customizing your product pages straightforward through the use of a drag-and-drop interface. You can even construct your entire online store using the powerful page builder.
  • Wide range of customization options in one convenient place – You can construct your pages exactly as you want using Elementor’s range of different widgets – versatile building blocks that enable you to add all kinds of functionality to your site.
  • Built-in templates to help you get started – Elementor doesn’t expect you to know anything about compelling page layouts before you start. You can choose from over 30 templates designed for specific types of sites. 

Websites built with Elementor are also highly responsive across all devices. You can adjust practically any feature or widget, including the margin, padding, and typography, and be confident that your website will look great on both desktop and mobile.

Tips for how to optimize product pages to improve conversion rate 

We’ve now covered some of the main ways in which you can customize your WooCommerce product pages, but in order to get the most out of these pages, it’s important that you take the time to optimize them as well.

Done properly, optimizing your WooCommerce product pages can increase conversions and improve the user experience of your store as a whole. Let’s take a look at some of the most important considerations you’ll want to keep in mind.

Consider the hierarchy of information you include

One of the best ways to optimize your WooCommerce product pages for conversions is to ensure you present information in a logical hierarchy. As you might expect, the most important information about the product should be more prominent on the page. Therefore, things like the product name, images, and price should all be clearly visible, as should a short description.

Adding extra visual elements like a star rating and the number of positive reviews for the product can entice customers to make a purchase, but don’t go overboard with irrelevant details! Keep the interface simple so that customers can decide whether to purchase the product more easily. 

Here, Nalgene provides an excellent information hierarchy on a single product page, providing customers with all the essential information they need: 

Only use high-quality images

Even with the best-written descriptions, your product images are the only real indication your customers will get of how your products look and what they can expect. Just as poor-quality images indicate a poor-quality product, high-quality images will demonstrate that your products are of the best quality.

Therefore, if your budget allows, we suggest hiring a professional photographer to take pictures of your products and ensure you capture them from multiple angles to give your customers the best possible impression of what they are buying.

You should also ensure you display high-resolution images on your site. Be wary that this can slow your site down; however – be sure to optimize your images using dedicated optimization software like ImageOptim in order to avoid this problem.

Here is a good example of effective use of product images from Daelmans Stroopwafels: 

Offer clear pricing

Always remember your customers will want to know the price before they make a purchase, so it must be clear and easy to find. If the price of your products isn’t immediately obvious, the most likely outcome is that customers will click away from your site and go to a competitor offering transparent pricing information. 

It is also important to experiment with different pricing placements, colors, and fonts to make your prices clear but not intrusive. See what your customers respond best to and make adjustments. Try A/B testing different formats to see what works best for your audience. 

If your store offers discounts, make sure these are clearly displayed. Customers should be able to see how much they will save easily. Including a before and after price helps with this significantly. 

Visual indicators of sale timers can also help to instill a sense of urgency and encourage customers to make purchases. Site visitors are more likely to buy a product if they think you are running low on stock. 

The following image from Certified Comic Shop shows how to make product pricing clear, including discounts:

Write great product descriptions

Lastly, you’ll want to write great product descriptions to entice your customers while also ensuring they have all the information they need about your products. Just as the product image is the only visual indicator customers will get of your products before making a purchase, the description is the main source of written information available to them.

Your descriptions should therefore enable customers to pick out key details about the product quickly without needing to read swathes of text. Include both short and long descriptions to make it easier for customers to pick up on key information at a glance. They can then read the long description for more detail if they are interested in the product.

April Soderstrom does this well. The brand provides critical information in the product title and short description and then offers extra information in the “note” for customers who want to go deeper:

Boost conversions and customer experience by customizing your WooCommerce product pages

Customizing your WooCommerce product pages offers a host of benefits. It improves the customer experience, helps boost conversions, and can increase average order value, among other things.

As we have seen, there are multiple ways to optimize your individual product pages:

  • Product add-ons make it easy for customers to customize their orders from the product page.
  • Related products let you advertise products that might be useful or relevant to your customers without the need for them to navigate to a new page.
  • Custom fields help you display more product information and add rich media.
  • Variation swatches offer a more user-friendly, intuitive way to display product variations.
  • Finally, customizing the overall appearance of your product pages with CSS code or visual page builders enables you to optimize your online store and boost conversions.

Two of the best plugins for customizing your WooCommerce product pages are Product Manager Add-ons and Product Tables for WooCommerce from BizSwoop. Both plugins offer powerful customization options to help you to improve the customer experience of your eCommerce store whilst also boosting your conversion rate and average order value.

Better yet, both plugins come with a 14-day money-back guarantee, giving you plenty of time to test if they are a good fit for your WooCommerce store. So, why not try out Product Manager Add-ons (from $49/year) and Product Tables for WooCommerce (from $69/year) today and experience the benefits for yourself?

Jake Fischground

Jake is the marketing guru and co-founder of BizSwoop. When he's not helping small and medium businesses learn about e-commerce you might find him taking a walk by the water or playing a game of pinball.