Easy customization tips for WooCommerce product pages

Want to customize the WooCommerce product page? You've come to the right place!

When you set up a WooCommerce store, it comes with a default product page. Most store owners add their products and use this default page without thinking about it. However, this could mean that you're leaving money on the table 🙀

The WooCommerce product page has huge potential for customization that most store owners don't take advantage of. As a result, their product pages aren't tailored to showcase their products in the best possible way. This leads to lost sales and a generic, unimpressive user experience.

In this article, I'll tell you about the best WooCommerce product page customization plugins. We'll look at several ways to optimize the WooCommerce product page:

• Creating a custom WooCommerce product page layout.
• Adding extra tabs to the product page.
• Presenting product options and variations more effectively.
• Displaying video on the product page.
• Letting customers calculate shipping costs on the product page.

Let's get started!

Why customize WooCommerce product pages?

Product pages are the individual pages that WooCommerce creates for each product - also known as the "single product page".

Many shop page owners think it’s enough to upload a photo of their product, a short description, and pricing information. Although this is technically sufficient, customizing the WooCommerce product page further can make a big difference for your business. It's all about tailoring the product page and its features to best suit the type of products you sell.

The essentials of an effective WooCommerce product page

A well-designed WooCommerce product page should have several elements:

• Images and other multimedia contentFor most (but not all) products, customers largely decide to buy them based on what they look like. As a result, it's essential to add high quality imagery, with the ability for customers to zoom and view multiple angles. Some types of product page will also benefit from video, which can be an excellent way to bring the product to life.
• Product dataThe product should contain all the factual information that the customer needs in order to make a decision on whether to purchase it. This can be the standard product data which WooCommerce stores, plus additional custom fields or taxonomies.
• Purchase informationA product page must contain everything that the customer needs to physically purchase it. This includes the price, ability to select the quantity and any additional options, plus an Add to Cart button.
• Social proofCustomers are much more likely to buy products that other people are recommending. WooCommerce itself adds a 'Reviews' tab so that customers can read reviews and add their own. You can also add hand-picked customer testimonials (either written or video) to extra tabs on the product page.

It's such a shame that most WooCommerce online store owners use the default product page that comes with their theme. This is a huge missed opportunity, as customizing the product page based on the exact products you sell can make a big difference to conversion rates.

Andy KeithTechnical Director, Barn2 Plugins

How to make basic customizations to product pages with default WooCommerce

Gutenberg is WordPress’s built-in block editor, which can be used for both posts and pages. It does not, by default, work for product pages (yet). However, you can use the Pootlepress WooBuilder plugin to build your WooCommerce product pages using blocks.

Gutenberg comes with all sorts of blocks - text, media, column layouts, buttons, and so on. You can mix and match WooCommerce blocks to create a custom product page layout, without having to code a new template from scratch. You can also add other ecommerce elements such as product gallery sections with thumbnail images and product video. Maybe you want to add related products and cross-sells. And of course, you can make design changes like setting the background color and creating fancy layouts with widgets.

How to customize your product pages with custom code

Alternatively, if you have the programming skills (or can hire someone who does) then you can customize your product page by creating a custom template. If you're using an off-the-shelf theme then the best way to do this is to create a child theme and add the custom template to that.

Child themes are sub-themes that inherit all the style and functions of the main, or parent, theme. They allow you to modify pages and create custom templates without altering the parent theme directly. When you add a custom single-product.php file to your child theme, this overrides the default product page template.

Diving into the code isn’t possible for every business, but it comes with some major advantages if you have the programming power on staff:

• It can have less of an impact on site performance compared to page-builder plugins. After all, you're only adding the code you need with no bloat.
• Edits made directly into the child theme will stay forever, so you don’t have to worry about your site falling apart if your page builder license expires. (However, if the parent theme makes major changes to their own product page then you may need to redo your plugin customizations to make them compatible.)

That said, this is advanced and should only be attempted by programming professionals. The wrong move here can break other elements of your site design and cause issues across the site.

If you know what you're doing, then using a child theme to override the single-product.php file gives you complete control. It's best to do this alongside a designer to create a winning single product page design that will attract customers. Alternatively, you can get almost as much control by using a plugin like Elementor to customize the product page layout.

Andy KeithTechnical Director, Barn2 Plugins

5 ways to customize WooCommerce product pages using plugins

As we have seen, thoughtful product page creation allows you to maximize the potential of your products. With the right tools, you can make your product pages more functional and improve your user experience.

Fortunately, there are lots of excellent WordPress plugins available to customize the product page in WooCommerce. I'll tell you about the best ones next. Each plugin provides a completely different way of customizing the product page. For best results, mix and match the ones that will enhance the specific type of products you sell.

1. Add flexible and fun options to product pages

A huge number of products come with two or more options. The WooCommerce Product Options plugin provides a visually appealing way to add almost any type of extra option to your products. Use it to:

• Add a wide range of extra options to your products. Choose from checkboxes and radio buttons, to more visual options such as clickable images, color swatches and text clouds.
• Structure the options into groups, with headings and other helpful text between them.
• Easily allow customers to choose between different colors, patterns, or styles of a WooCommerce single product.
• Collect product details for customization or personalization such as text, images, or file uploads.
• Build bundles to promote upsells and cross-sales to other products on your site, displaying other products as options above the add to cart button.
• Use conditional logic to set product add-ons to hide or appear based on which other options the customer selects.
• Allow customers to view a live preview of how their uploaded images will look on the finished product.

How to add visual product options to the product page

1. Install and active WooCommerce Product Options.
2. Go to Products → Product Options in the WordPress Dashboard.
3. Click to edit the default product option group.
4. Select which product pages the options will appear on.
5. Use 'Add Option' to add as many options as you like. The user-friendly interface will walk you through the options, step-by-step.

2. Add extra tabs to customize product pages

Some products naturally have a lot of information associated with them that customers are certain to need. For example, someone purchasing an item of clothing is likely to want to know about the fit, materials, and care instructions in addition to the description of the product itself.

Adding custom tabs to the WooCommerce product page helps organize this information so it’s aesthetically pleasing and easy to navigate between.

The WooCommerce Product Tabs plugin is a fantastic tool that allows you to build out and customize these tabs. Use it to add as many extra tabs as you like to the WooCommerce product page. You can also:

• Add an eye-catching icon to each product page tab.
• Customize the default tabs that come with WooCommerce itself.
• Include any kind of content you’d like, including text, videos, maps, enquiry forms, and more.
• Create horizontal or vertical tabs.

This is an excellent way to add new information to WooCommerce product pages without changing the overall format of the page. It keeps everything clutter-free, while giving customers everything they need.

How to add extra tabs to WooCommerce product pages

1. Install and active WooCommerce Product Tabs.
2. Go to Products → Tabs in the WordPress Dashboard.
3. Use the friendly on-screen instructions to add as many custom tabs as you like.

3. Swap the variation dropdown for a bulk buying grid

By default, WooCommerce uses a dropdown menu to allow customers to select product variations. Although this is sufficient for a product with only a few variations, it gets more cluttered and difficult to use for products with more variations.

The problem with variation dropdowns is that customers have to select each combination individually to see the price and stock level, and add it to the cart. They then have to repeat the process for every combination they wish to buy.

For certain types of variable product, it's far better to replace the variation dropdowns with a bulk variations table or grid. You can easily do this with the WooCommerce Bulk Variations plugin.

Not only does this make it easier for customers to parse the options on your site, but it also allows them to easily add multiple variations of a product into their cart at once.

How to add bulk variation order forms to product pages

1. Install and active WooCommerce Bulk Variations.
2. Use the plugin setup wizard to choose how you want the bulk variations grid to behave. For example, you can choose whether to include the variation description and images on product pages.
3. If you didn't enable the variations grid globally in the setup wizard, then you can edit individual product pages and enable it under Product Data → Bulk Variations.

4. Add images to the product page image gallery

The WooThumbs plugin by Iconic lets you customize the WooCommerce product page by displaying videos as part of the product image gallery. This is an excellent way to showcase products more effectively in a WooCommerce image gallery.

How to add video to product pages

1. Install WooThumbs on your WordPress site.
2. Edit the product that you want to add video to.
3. Click the 'Add product gallery images' link in the Product gallery section on the right of the screen.
4. Upload a static image of the video, and then click to edit the video. Fill in the information in the ''WOOTHUMBS MEDIA DETAILS' section, including the URL of the video.
5. You can also edit your global video settings via WooCommerce → WooThumbs.

5. Add a product page shipping calculator

Since shipping costs can vary wildly based on what’s being shipped and where, customers need to know what to expect before they commit to a purchase. However, the standard WooCommerce product page contains absolutely no information about shipping 🙃. That's right - customers have to add a product to their cart and then check the shipping rates on the checkout page!

A more user-friendly solution is to add a shipping calculator directly onto the WooCommerce product page. You can easily do this with the WooCommerce Shipping Calculator plugin by Kestrel. Simply installing this plugin will practically eliminate abandoned carts due to shipping fees.

Including clear shipping information on your product page boosts transparency. This makes your online store more trustworthy. It also encourages customers to return in the future.

How to add a shipping calculator to the product page

1. Install and active WooCommerce Shipping Calculator.
2. Go to WooCommerce → Settings → Products → Shipping Calculator and choose where on the product page to display the shipping calculator.
3. And that's it! A shipping calculator will now appear in your customized WooCommerce product page.

Customize your WooCommerce product pages to perfection

Customizing the WooCommerce product page is a fantastic opportunity to tailor your store to customers’ needs and drive them to completing their purchase. However, if you don’t take full advantage of your product pages, then you’re missing opportunities to boost your bottom line.

In this article, we have explored lots of ways to supercharge your product pages:

• Add eye-catching customization options to the product page with WooCommerce Product Options.
• Create tabs of additional information with WooCommerce Product Tabs.
• Replace the variation dropdowns with a bulk variations grid with WooCommerce Bulk Variations.
• Add video to the product page image gallery with WooThumbs.
• Add a shipping calculator to the product page with Product Page Shipping Calculator.

Each of these plugins is fully compatible with one another, so you can mix and match them as needed. Every store is different and there's no one-size-fits-all approach. Read about each product page customization plugin and think about which ones will help to sell more of the products on your site 🚀

FAQ

1. How is a product page different to a shop page?

The word "product page" sounds very general, but WooCommerce power users always use it to refer to the single product page. This is the individual page that WooCommerce creates for each product.

In contrast, the WooCommerce shop page is your main storefront, which lists all the products in your store. This contains links to the individual product pages.

2. What are the best practices for product page customization?

It's essential to customize the WooCommerce product page in a way that improves the user experience for your customers. If you’re not sure what your customers need, then you should take the time to investigate. Connect with your customers to learn what they’re looking for and how they make purchase decisions. This should drive your ecommerce product page design, and also all aspects of your sales approach.

Here are some ways to learn what your customers need from your product pages:

• SurveysIf you have a mailing list, create a short survey asking users to evaluate your current website and product pages. Craft questions that are designed to pick up problem areas on your site. For example, you might ask users if there was anything unclear or confusing on the product pages they interacted with. Consider including an incentive, such as a small gift card or discount, to encourage users to complete and return the survey.
• Look at competitorsIdentify your biggest market competitors and spend some time evaluating their product pages. What kind of product information do they include? How do they build urgency or exclusivity on their site? How do they connect with customers?
• Encourage feedbackAllowing users to leave reviews and other forms of feedback can give you valuable insight. For example, a poor review for a product might reveal that the product page didn’t adequately describe the product in question. Provide opportunities for customers to leave their thoughts in the form of reviews, as well as an easy-to-find contact page so customers can connect with your store directly. Review feedback regularly to spot common themes or major problems.

Armed with this information, you can take an informed approach to how to improve your product pages in a way that will actively increase sales 😀