7 product page design elements you need for WooCommerce
There are 7 key elements to WooCommerce product page design that will have a huge impact on your conversion rate. And you could implement them on your own site just in a single afternoon.
Have you ever wondered why Amazon’s product pages look the way that they do? They seem messy and over the top, so why do they use this product page design?
Well, with their decades worth of data, they happen to know a thing or two about ecommerce and what leads to better conversions. And the same is true for the likes of E-bay, Walmart and Etsy.
So to make sure your WooCommerce product pages have a chance of converting as well as they do, we need to learn from them, and replicate what’s working.
After analyzing top performing ecommerce sites and scouring the web for expert sources, we’ve narrowed it down to just 7 key elements. Which you could easily implement on your own WooCommerce product pages in a single afternoon.
1. Use high quality product images
Universally agreed upon by every source we could find is the need for high-quality product images and (ideally) videos too.
Now that may sound obvious, so let’s clarify things with a few more details.
- Images should be big and clear, and you need to include multiple supporting angles, close up shots, shots of the product in a real life setting and the ability to zoom in on a product image.
- 360 images and video are optional, but are also highly recommended.
- It’s even better if you can link images to your product variations, just note that you may require a plugin to do this, such as WooCommerce Product Options for example.
While you should use high quality shots, the file size and format should still be optimized to improve loading times. You can use webp instead of png for example.
2. Include detailed descriptions
Product descriptions are another essential product page element that you can’t go without. On the desktop version, include a short description above the fold, near the other product information. If you have a longer description, it can live further down the page or on a dedicated product tab.
The precise wording will depend on the nature of your SEO strategy, so we can’t give specific advice here. We only recommend that you keep it "crisp and informative," it can be detailed, provided that it’s also well written. The main focus is to always provide complete product information.
Pro Tip: To provide additional information such as videos or product guides, you can create new tabs using our WooCommerce Product Tabs plugin.
3. Have a clear call-to-action (CTA)
Critical to any site’s conversion rate is a clear call to action button, and for ecommerce sites, this is normally your “Add to Cart" button. Utilize design techniques on your product page such as color and spacing to make the button stand out from the other information.
It should be clear and obvious, so there’s no mistaking how to purchase your products (think about accessibility here). It should also be visible above the fold on the desktop version of your site. On mobile this is optional, as phone users are used to scrolling, so it’s simply a matter of preference. (Pro tip: Try A/B testing this to see what works best for you!).
4. Display customer reviews and social proof
Social proof is another must-have item for any WooCommerce product page, which is usually in the form of star ratings and customer reviews.
Add star ratings to the listing in the same area as the other key product information.
If you have reviews, we recommend using a product tab (this is already a default feature in WooCommerce) and link to them from the above star ratings if possible.
If you don’t yet have any reviews, that’s okay, but try to find another way to build trust, maybe write something else about the product, like its popularity or how many you have sold in a given time period.
Other great examples of social proof include trust badges, testimonials, and user-generated content.
5. Add related products
Another tip that has universal agreement from all sources is to add related products which you can cross sell. WooCommerce even has a built in feature for this, which you can use to increase your average order values.
To enable upsells or cross-sells just go to the product data section in the product editor and click on the “Linked Products” tab. From there you can add any related products and WooCommerce will automatically add them to the product page (though you don’t have a lot of control of where they appear without custom coding).
If you want to take it a step further our product options plugin allows you to list products as options on product pages. We recommend using this for things that are often sold together, like a phone and a case.
Just be careful not to distract too much from the main product you’re selling on this page, in most cases, it’s better to have these recommendations further down or just above the fold.
6. Provide delivery and shipping information
Do you know the main reason why customers abandon their carts?
According to statista.com 41% of customers reported that delivery fees were too high, and 30% mentioned unexpected fees at checkout (which are typically shipping fees).
It’s actually perfectly fine to charge for shipping, this is well understood by customers. But don’t trick them into thinking they are paying one price, when the total after shipping is actually much higher.
The best solution here is to show the shipping estimation at the earliest possible step. This can even be added to the product page with the right plugin, such as Shipping Calculator for WooCommerce by Kestrel.
So to be more specific, include shipping policies, estimated delivery costs, dates, and return policies (such as 30 day money back guarantees for example) all on the product page or on the cart page (at the latest).
7. Create urgency
The final tip we have for you is to create a sense of urgency. This could include discount deadlines, stock meters, and limited-time offers.
Be careful though! Please don’t over-do this as it can ruin your trustworthiness if you are clearly playing tricks on people. Instead, provide them with a subtle nudge or reason to purchase right away. This will help to drive conversions by utilizing well known psychological triggers.
Bonus tips
If you have already implemented those 7 elements then you’re well on your way to success. And for those of you who are still reading, we have some bonus tips for you.
- Ease navigation between pages Use breadcrumbs or a horizontal category menu to keep customers oriented as they navigate your website.
- Add more engaging product options WooCommerce variations are displayed as dropdown lists, which is anything but ideal when you want to display colors, or create unique customer input fields, like a price calculator or a file upload option. Our Product Options plugin provides 16 different option types which can be used to create pages like these, where customers can select exactly what they need, and buy upgrades all within a single product page.