How To Customize Your WooCommerce Product Pages

In terms of positive site navigation and getting the sales you want, there’s no part of web design more important than your product pages. They’re the online equivalent of seeing a shop’s display widow downtown with just the right persuasive palette: lighting, angle, and informative details like pricing and availability. Your product pages describe the tone and commitment of your brand to informative and pleasing shopping experiences.

Which isn’t to say you should install every new plugin or overload your pages with over-the-top graphics. The best online stores, big and small, stick with the fundamentals about what customers want out of their shopping experience and how they want it.

The following tips and examples will help you revise current product pages or create new ones to keep your customers inspired.

Write an effective product description

In general, this is something we all know: how you talk about a product is essential to keeping shoppers interested. But the finer details between a mediocre vs a good description can be the difference between a customer choosing to shop elsewhere and loading up their e-cart on your site. In an empirical study by Neilson Norman Group, an American user experience consulting firm, 20% of failures to complete an online purchase were due to incomplete or unclear information about the product.

  • Speak to your ideal audience

    • Don’t be afraid to narrow down who you’re talking to. Not everyone wants everything, so language and content details that support the knowledge-base of your customers make them feel expected and in the right place.

Patagonia’s descriptions are quite well-known for having two versions: a short byline for quick appraisals and an extended description full of industry jargon they aren’t afraid to use in a conversational way. The first appeals to potentially new customers while the latter shows how deep the company’s expertise goes without losing charisma.

  • They trust their customers’ interests on both fronts!

    • Focus on product benefit keywords that describe how its made, its positive and functional impacts, and general applicability.
    • Use conversational language and tone. This helps keep readers engaged!

Have great product images and image navigation

Let’s say your descriptions and general site copy are fantastic — that doesn’t mean how your products actually look are going to keep users from drifting away. While effective wording is important, we’re visual animals, and images help us remember and define what we’re searching for more than words alone ever could.

Solillas does amazing work with images. Each product offers several viewing angles and depictions that don’t feel like they happen in a photoshop void of unattainable perfection. The image diversity and methods of navigating them, like the zoom and sizing scales, feel like actually trying out their products in person.

  • Tips for great images and engagement

    • Use the WooCommerce Better Thumbnail Navigation
    • Include properly-sized images, about 1,000 pixels in height in width
    • Use several image angles so customers can see all sides of a product
    • Make sure your images don’t look like they were taken in a void — realistic depictions of context better describe actual product size and relative scale.
    • Show customer photos! This helps shoppers believe you’re engaged with your audience and support their interactions with your products.

Prioritizing Design Choices

We know it can feel overwhelming to experiment with new design options for your WooCommerce store. Cross-referencing how your store performs before and after design changes is fundamental, but it’s often hard to know how to look at the data and which changes yielded certain results. There are so many different kinds of products and audiences, it’s often hard to know what’s not only good, but optimal for your particular site. Consider the following data-capture guide and tools when searching for the design that best fits your needs.

  • Use Google Analytics for WooCommerce

    There’s a lot more depth to using Google Analytics than just applying its standard tracking code. With the right setup, even the smallest interactions, like shopping behavior, checkout behavior, and product performance are distinctly categorized and easy to view. Themeisle has a solid guide for getting Google Analytics more integrated into your WooCommerce store.

  • Use heatmaps for tracking interaction

    A heatmap lets your visualize where customers are spending the most time, scrolls, and clicks on your site. These aren’t the same as Google Analytics, instead telling you how users engage with your site’s details specifically and where interactions are hot and cold. WPBeginner as a great list of heatmap apps that can help show where you could improve user experience.

See our featured website design work

Check out some of the beautiful websites we’ve built for over 2,000 clients.

We offer WordPress support & maintenance

Shake the stress of ongoing maintenance with plans supported by our team of WordPress experts.

Related articles