Product pages are arguably the most important pages for an ecommerce store. They are where shoppers go to learn about your items and select the ones they wish to purchase — a key reason to optimize your WooCommerce product pages. While a well-made product detail page helps turn visitors into customers, poorly made product pages can result in low conversion rates.
The biggest cause of low-performing product pages is too much friction.
You can easily frustrate shoppers with obtrusive elements like popups or a lack of functionality or information. When people face obstacles and resistance like this in their shopping journey, they are less likely to complete an order.
Get help with anything WooCommerce
Whether you need help with a problem or adding new features, GoDaddy Managed WooCommerce Stores givers you direct access to real WooCommerce experts — right from your WordPress Admin dashboard. From how-tos and demonstrations to managing products and configuring extensions, GoDaddy’s advanced WooCommerce support is ready to help with your most advanced user inquiries.
5 tips to optimize WooCommerce product pages
If you want to provide your customers a seamless shopping experience, you need to know what makes and breaks a good product page. In this post, we will go through five ways you can optimize your WooCommerce product pages for a better customer experience and higher conversions.
1. Use plenty of high-quality images
Strong product pages start with great visuals. Without the ability to touch or see items in person, customers rely on images to inform their buying decisions. Research from eMarketer shows that the average consumer expects to see at least five images per product on ecommerce websites. You can give your customers the clarity they seek by including high-quality images from multiple angles with each of your product pages.
Images are important for all products, but some types of products are more visual than others.
For instance clothing, jewelry, and furniture. With these types of items, customers are more interested in how the product will actually look in real life. As such, many will likely want to take a close look at the fine details of your product images.
You can improve your customers’ ability to visualize your products by enabling image zoom. With image zoom, users can focus on a specific part of an image to get a close-up look at the details. This functionality may come natively with your WordPress theme. If not, there are several plugins you can use to add the functionality to your store. Some solid options include:
Optimizing images for speed
High-quality images are vital, but not at the exchange of website performance. Images tend to make up the bulk of web page sizes as it is. When you add multiple, high-resolution images to a single page, loading times can quickly increase.
By using image compression, you can reduce the file sizes of your images considerably. A general recommendation is to compress your image file sizes below 80 kb. However, if this level of compression noticeably alters the quality of the photo—a larger file size may be preferable.
2. Add customer reviews
Good descriptions and images are not always enough to convince shoppers to buy your products. Oftentimes, people require more assurance that an item will meet their needs. One of the most effective ways to provide such assurance is through social proof.
Social proof uses the insights from past customers to help potential buyers confirm the value of your products and build trust in your brand.
For ecommerce product pages, the most common forms of social proof are product reviews and user-generated content such as a social media post with a customer using the product.
Reviews are such an integral part of the buying process that it can be hard to get sales without them. According to TrustPilot, 89% of consumers check product reviews before purchasing an item. As you would expect, products with more positive feedback receive more purchases.
Now, it isn’t natural for most customers to leave reviews after a purchase.
Even Amazon, which has a highly active customer base, only receives reviews for about 10% of orders. If you want to get a healthy number of reviews for your products, you must actively seek feedback from your customers.
You can do so by creating an automated follow-up email asking your previous customers to leave a review. You can also include product inserts asking for a review in your shipments. If you want to increase engagement, you can consider offering an incentive such as a discount in exchange for feedback.
How you present your reviews is as important as the reviews themselves. The default WooCommerce product reviews functionality is somewhat limited in what information customers can provide and how they can navigate reviews to find ones that are relevant.
Below you can see an example of a default review submission form.
Customers have the ability to give a star rating and text only. There is no option to add images or ask questions to engage with the brand.
You can enhance your WooCommerce product reviews with the WooCommerce Product Reviews Pro extension (included in our Managed WooCommerce Stores). With the plugin, customers can add photos and videos to reviews to provide more insightful feedback to other shoppers. Plus, users can filter reviews based on rating and other criteria to quickly find the feedback that will help them make their decision.
In addition to product reviews, the extension lets you accept other forms of contributions such as customer questions that will appear on the product page. You can answer these questions to provide more detail about your products and actively engage with your audience.
This type of Q&A section is prevalent on Amazon product pages and plays a big part in helping shoppers get a better understanding of different items.
Another useful feature of the extension is the ability to add Review Qualifiers. You can use these to have customers provide specific information about products. For example, if you sell clothing, you can add a qualifier for sizing.
The qualifying question can say “is the product true to size” or “does the product fit as expected”. With a qualifier enabled, customers will need to answer any qualifying questions before submitting a review.
To add a review qualifier go to Products > Review Qualifiers.
You can then create the options that reviewers can choose from. For our sizing example, our options would be:
- Yes, fits as expected
- No, fits smaller than expected
- No, fits larger than expected
Once you’ve added these options, they will appear as a dropdown selection on your product review forms.
3. Make your pages mobile-friendly
Don’t forget about mobile users when optimizing your WooCommerce product pages. More web traffic today comes from mobile devices than desktops. By optimizing your mobile experience, your product pages will appeal to a wider segment of your audience.
That said, creating a great mobile product page can be tricky given the limited screen space. You have to strike a balance of providing enough information while not cluttering the page. Here are some tips you can use to make your product pages mobile-friendly:
Hide header menu
You can save valuable space on your mobile product pages by having the header menu collapse as users scroll down the page. You can also choose to remove the header altogether from product pages. If you do, you’ll want to have breadcrumbs enabled so users can still navigate your site.
Keep text concise
With less screen space, it is important to keep the text concise while still providing all necessary information. Try using bullet points and shorter paragraphs to not overload your pages with text.
Place key elements above the fold
On mobile product pages, you want to present the most essential information above the fold. Doing so saves users from needing to scroll down the pages. Among the important elements to include are the price, title, and add-to-cart buttons.
Speed up the checkout process
Mobile users have less patience for long-winded checkouts. If you ask your customers to complete too many steps, you increase the chance of them abandoning their carts. You can streamline their buying journey by reducing the steps in the checkout process.
4. Showcase variations
Shoppers expect to see images for every option and feature mentioned in the product description. For example, if you sell t-shirts that come in red, blue, and black—your product page should have images for all three colors.
It is important to include these images in a way that does not detract from the user experience.
By default, when a customer selects a product variation on a WooCommerce product page, the feature image changes but the gallery images below remain the same.
This means that if you want to include images for each variation, your image gallery will include thumbnails for every image for each variation. Customers that want to view images for a specific variant are then forced to navigate the entire image gallery to find the right pictures.
You can clean up your variation images to provide a better customer experience by using the Additional Variation Images extension. With the plugin, you can define a set of gallery images for each product variation. When a customer selects a variant, the image tiles below the feature image will change to the corresponding gallery.
This makes it easier for customers to view images for a specific variant while also cleaning up your product pages. Instead of displaying thumbnails for every variant, your pages only show those for the selected variation.
To add extra variation images with the extension go to WooCommerce > Products and select a variable product.
Go to the Variations tab and click Add Additional Images for the appropriate variation.
Disable out of stock variations
A quick way to annoy potential customers is to have them select a variation only to learn that is out of stock. You can prevent this from happening by disabling users from choosing out-of-stock product variants.
To do this in WooCommerce you simply need to add the following snippet to the bottom of your functions.php file:
| add_filter( 'woocommerce_variation_is_active', 'snippetpress_disable_out_of_stock_variations', 10, 2 ); function snippetpress_disable_out_of_stock_variations( $is_active, $variation ) { |
5. Include product recommendations and related products
Product detail pages are a great place to showcase additional items in your store. Customers that are close to making a purchase are more likely to consider adding extra products to their cart. You can use this opportunity to increase your average order value by upselling more expensive products or cross-selling related items.
Depending on your theme, you may have the option to enable a related products carousel that appears beneath the product description. If enabled, the carousel will automatically populate products with the same tag or from the same category, based on the settings you define.
You can manually define what items to present as cross-sells using the Linked Products section in the Product data tab. This allows you to pair specific items together for promotional and bundling purposes.
With the WooCommerce Products Compare extension, you can improve the effectiveness of your upsells by giving customers the ability to review side-by-side comparisons of different items in your store.
Once the plugin is active, a field to compare products will appear beneath your product listings. Shoppers can check the box to add products to a compare list. They can view the compare list by clicking on the blue icon.
By default, the compare list displays the product’s feature image, price average rating, description, and available stock.
If you want to change the default template you can do so by copying the template file from wp-content/plugins/woocommerce-products-compare/templates/ and pasting it into the root folder of your theme directory. If you want to avoid changes being overwritten with theme updates, create a child theme.
WooCommerce plugins to help create optimized product pages
Product Enquiry Form
Your product page should try to answer as many pre-sales questions as possible—that can help drive sales and reduce your support load. However, try as you will, it’s more or less impossible to predict all of the questions a potential customer might have. Some customers may want to chat or call, but if you don’t offer those options or if the customer has a more complex question, a product enquiry form is a good solution.
The Product Enquiry Form extension ($49/year at WooCommerce.com) allows you to add an extra tab to your product pages—and that tab contains a form potential visitors can use to contact you and submit any question about the product. Some of the best features of the extension are:
- You can protect the form using CAPTCHA to reduce or prevent spam.
- You can receive email notifications when the form is submitted and reply directly to the customer.
- The form is enabled for every product by default, but you can disable it on a product-by-product basis as needed.
This extension can also help you refine the content on your product pages or in your FAQs. If you’re seeing repeat questions come in through Product Enquiry Form, that’s a sign you should address those questions somewhere on your site—preferably even right there on the product page.
Woocommerce 360° Image
One of the challenges of online shopping is customers cannot directly interact with the product. That’s why product images are so important—they help close that tactile gap. They work even better if you show a 360-degree view of the product in question. This allows customers to easily see products from all angles and get a better idea of what they really look like.
WooCommerce 360° Image ($49/year at WooCommerce.com) provides a simple solution for adding a rotating image to product pages. The 360-degree image is responsive and touch-enabled, and you can enable or disable the built-in navigation controls and full screen view options.
You’ll need approximately 12 to 36 pictures of a product from different angles in order to showcase it in the 360-degree view. Here’s a useful guide for 360-degree photography that covers the steps necessary to take pictures of products of different shapes and sizes.
WooCommerce Product Reviews Pro
Product reviews are crucial for an eCommerce store. 92 percent of customers will hesitate to buy from a store with no reviews, and 79 percent trust online reviews as much as personal recommendations.
WooCommerce has a native review system built into its core, but to get even more advanced reviews with features like you see at the world’s biggest eCommerce retailers, you can use an extension like WooCommerce Product Reviews Pro ($79/year at WooCommerce.com).
This extension’s top features include:
- Customers can sort and filter reviews based on criteria like most helpful, most recent, five-star, one-star, and more.
- The review form can include “review qualifier” questions you’ve set up to get more granular information about the product. (For example, “Does it fit true to size?”)
- Customers can upload photos and videos along their review.
- Customers can upvote and downvote reviews.
- Customers can “watch” a thread in the reviews and receive notifications when there are updates.
- Easier management of reviews on the merchant side; WooCommerce’s native reviews are mixed in with all WordPress comments, while Product Reviews Pro reviews can be managed separately.
Product Reviews Pro also integrates with WooCommerce Social Login ($79/year at WooCommerce.com), allowing customers to create an account or login with just one click using nine popular platforms including Facebook, Google, and Amazon.
WooCommerce Additional Variation Images
If you sell products with multiple variations, by default, WooCommerce will only swap the main image when a customer selects a different variation. For example, if you sell a t-shirt in blue and green, only the main image will change when the customer switches from the default (blue) to the variant (green). The side and back images of the shirt will still remain blue.
With the WooCommerce Additional Variation Images extension ($49/year at WooCommerce.com), you can showcase multiple images for every variation. The galleries are easy to set up and manage on the standard product editing screen.
Anything you can do to remove some of the guesswork for a customer is good; Additional Variation Images is a small feature but one that eliminates some of that guesswork. And that could make a big difference to your customers.
WooCommerce Products Compare
If you sell a lot of similar products, your visitors will want to compare their different features as well as the difference in price. More than three-quarters of customers like to run price comparisons when they’re shopping—and if you can facilitate that on your site, you can avoid having a customer potentially leave to compare your products and prices with competitors’ products and prices.
With the WooCommerce Products Compare extension ($49/year at WooCommerce.com), customers can choose products on your site to compare side-by-side. Customers can check a box on a product either on a category page or a product page to add the product to a comparison list. You can display that list using a widget, so as a customer browses from product page to product page, they can keep adding products to compare and bring up the comparison chart at any time.
WooCommerce Tab Manager
Your product pages should provide your customers with plenty of details and information about each product. But that information needs to be organized in a logical and attractive manner. This will make it easier for your customers to digest the information and keep your product pages looking clean and professional.
With WooCommerce Tab Manager ($99/year at WooCommerce.com), you can add this functionality to your store. Some of the key features are:
- You can create new tabs to encompass any information or features you want to cover.
- There’s an option to create global tabs that can be shared between multiple products, and/or to create product-level tabs just for one specific product.
- The extension will automatically detect tabs from most third-party extensions (e.g., WooCommerce Product Enquiry Form).
- The tab content will be included in your on-site search results.
As we said earlier, product pages are often where a customer makes the decision to buy a product. You don’t want the customer leaving a product page to try to hunt down a FAQ or support page when you could present the info they’d find on those pages in a tab.
Product Add-Ons
One excellent way to increase your average order value with your product pages is through upsells—that is, getting a customer to spend more on the item they’re planning to purchase.
Approximately four percent of customers who see an upsell option will take it; if one out of 25 customers are increasing their order value thanks to an upsell, that can really add up.
Product Add-Ons ($49/year at WooCommerce.com) lets you add enticing upsells to a product page. You could offer customers things like engraving, personalization, better fabrics for apparel, better components for electronics, or anything else that might boost the value of the sale.
When you’re presenting high-quality upsells in a customer-friendly way, the upsell will feel like a service to a customer—you’re giving the customer the chance to customize or purchase the ideal version of the product for them, and that’s a win-win.
Adjusting price display to maximize conversions
change the pricing display so it’s easier for customers to compare unit price across products.
If several products will have different unit prices, you’d need a more advanced way to do this, but here are a couple methods to get you started with adjusting the WooCommerce price display.
For either method, there are a couple important filters we’ll need to use:
woocommerce_get_price_html: changes the way price is shown on the product and shop pageswoocommerce_cart_item_price: changes the way product prices are shown in the cart table (not at checkout since only quantity / total price are shown here, not the unit price).
Filter WooCommerce price display for all products
Let’s say you want to add a label to the end of all of your product prices, such as “per package” (helpful if your products are bundles of something or come in pre-packaged sets). You can change the pricing display to append this label to the price with the product and cart price filters:
<?php
// only copy opening php tag if needed
// Adds "per package" after each product price throughout the shop
function sv_change_product_price_display( $price ) {
$price .= ' per package';
return $price;
}
add_filter( 'woocommerce_get_price_html', 'sv_change_product_price_display' );
add_filter( 'woocommerce_cart_item_price', 'sv_change_product_price_display' );
The woocommerce_get_price_html filter will change this on your shop pages:
and on your single product pages:
The woocommerce_cart_item_price filter will adjust this display within the cart as well:
Filter WooCommerce price display for a single product
What if you want to specifically change the price display for a particular product? This can be done with the same filters, as they’ll also pass additional arguments for you to conditionally change the price. For example, let’s return to our skewer example from the question. While skewers are sold individually at $2 per skewer, we want to show “$15 per kg” as the price instead so customers can compare different products.
This time we’ll separate out these filters and use two functions to modify the product and cart prices. We’ll first check for the product ID, then change the pricing display for that product alone.
function sv_change_product_html( $price_html, $product ) {
if ( 337 === $product->id ) {
$price_html = '<span class="amount">$15.00 per kg</span>';
}
return $price_html;
}
add_filter( 'woocommerce_get_price_html', 'sv_change_product_html', 10, 2 );
function sv_change_product_price_cart( $price, $cart_item, $cart_item_key ) {
if ( 337 === $cart_item['product_id'] ) {
$price = '$15.00 per kg<br>(7-8 skewers per kg)';
}
return $price;
}
add_filter( 'woocommerce_cart_item_price', 'sv_change_product_price_cart', 10, 3 );The first function will change my product page:
Conclusion
When shoppers view your product pages, they are only a few steps away from a potential sale. If you can give them the information they want, in a pain-free manner, you increase the chances of converting them into a customer.
Start with the basics by ensuring your product descriptions tell your customers everything they need to know about your products. From there, ample images, product reviews, and a seamless shopping experience will add the finishing touches to win over potential buyers.
