How to customize your WooCommerce product pages

WooCommerce offers tons of advantages to online store owners that operate in internationally-oriented ecommerce markets.

For instance, you can use a WooCommerce-compatible plugin like Weglot to translate your entire online store (including WooCommerce product pages) in order to reach more customers across the world and cater to a global customer base, like Amazon.

In this article, we’ll explain how you can customize your WooCommerce product pages for higher conversion rates using various WooCommerce plugins, add-ons, and techniques, including how to:

• Sort your product pages smartly with a product page template
• Hierarchize your product information with a product template
• Make sure images are audience-adapted
• Facilitate language- and currency-switching for your customer
• Make the add to cart button easy to access in your product layout

Smart product page sorting

If you’ve been using WooCommerce for some time now, you probably already know that your products are sorted in chronological order by default. What this means is that the most recently added WooCommerce products show up at the top of the page and the products that were added to your store first appear at the bottom of the page.

As a WooCommerce store owner looking to enter new markets, you need more fine-grained control over how your products appear on the front-end.

For example, you might want to sort WooCommerce products based on factors like:

• Product price (high to low or low to high)
• Popularity (best-selling products at the top)
• Product rating and review (highest rated products or products with the best reviews at the top)

The good news is that you can use the free WooCommerce Extra Product Sorting Options plugin to define how WooCommerce products should be sorted on your main shop page. To get started, install and activate the WooCommerce Extra Product Sorting Options plugin to your WordPress website.

Once the plugin is activated, head over to Appearance > Customize > WooCommerce > Product Catalog.

Here, you’ll see a few different options to configure product sorting on your main shop page. You can use the Default product sorting dropdown to decide how WooCommerce should be sorted by default:

• Default sorting
• Popularity
• Average rating
• Sort by most recent
• Sort by price (asc)
• Sort by price (desc)

In addition to this, you can also give the new default sorting a label. For example, if you go with Popularity, you might call it Sort by Popularity. This will show up on your site’s front-end. Finally, you can select sorting options to add to your shop and decide how many products to display per row and per page by making a custom template.

Click the Publish button to proceed. That’s all there is to it! Your WooCommerce products will now be sorted based on your custom product page sorting configuration.

Let’s take a look at another method for sorting WooCommerce products. This will let you decide the exact position of each product by making a different custom template.

Navigate to Products > All Products, hover over an item, and click the Edit link. Next, scroll down to the Product data section and click on the Advanced tab. From here, you can use the Menu Order option to set the exact position of this item.

These sorting options are especially useful for online stores that have hundreds of products, with individual product_meta. It makes it easy for online store owners to showcase the products they want at the top (for example, a specific product for promotional reasons). It also enhances the customer’s shopping experience and makes it easier for them to find products they would be most interested in.

Information hierarchy

WooCommerce pages tend to include a lot of information about each product, including custom fields you create.

Ideally, you want to present these product details in an effective way on your site’s front-end for a number of reasons. For example, if you sell to customers across the world, this might simply be to comply with information transparency regulations of each country you’re selling in. These regulations can differ significantly from country to country. It might help to have a child theme, similar to Divi, for vastly different sites.

By customizing your WooCommerce product page layout, you can organize all of this information in a visually-appealing way. This tells the customers that you prioritize getting important product information across, which is great for enhancing your brand image and reputation.

Here are some key points to bear in mind:

• Breadcrumbs. Breadcrumbs show customers the “trail” to the product they’re viewing. This gives them quick access to the product category and related products they might want to purchase. Additionally, it makes it easy for them to check out other parts of your website and learn about your brand.
• Basic product information. It’s important to clearly display basic product information like product title and product price on WooCommerce product pages. As a bonus, it will also help with your SEO efforts and help you rank higher in Google search results.
• Product description and stock information. Add a product description to let customers know a bit more about the product with a snippet. Consider including stock information which tells them if the product is available in stock, out of stock, or on backorder – without having to reach out to the customer support department.
• Order CTA. This information typically includes product quantity, size, and color choices (if available) as well as add to cart buttons in a small snippet. This information should be easily accessible to customers from your WooCommerce product page. For example, customers shouldn’t have to scroll to add products to their cart.
• Product metadata. The product SKU is metadata which provides information about the product. Different companies create different product SKUs for their WooCommerce products. In other words, the product SKU of the same product at two different stores will probably be slightly different depending on the store’s naming scheme. For example, a shop that sells t-shirts creates internal SKUs that show product information like size, color, price, and manufacturer information. So, the SKU for a black Levi’s shirt, size XL, might be “LEV-BLK-XL”.
• Social credit information. This information includes product ratings and reviews which help customers make an informed buying decision. Customers can sort products by product ratings or read reviews left by other customers.
• Tech specs and additional information. Provide additional short descriptions, tech specifications, and other related information in your product template. This is especially useful for stores that sell tech products like smartphones, laptops, televisions, and cameras. This helps build trust and gives your WooCommerce product pages a professional look and feel.
• Upsells. You can show more information about the products you sell such as related products (or similar products). For example, you could add a “You may also like” post type section on your WooCommerce product pages. Plus, you can also display products that are typically purchased together to leverage upselling opportunities. For example, if you sell digital cameras, suggesting a flash memory card and a camera bag might encourage customers to buy more from you.

Make sure your images are audience-adapted

Did you know that, around the world, different cultures are used to different product image styles? That’s right!

For example, Chinese customers expect content-rich websites and prefer their product images to be decorated with explanatory text and icons. Although this kind of post type imagery may appear cluttered to Western shoppers, it will likely help you sell more quickly and effectively throughout the WordPress community in China.

A good first step to adapting your WooCommerce product pages to local audiences is by using a WordPress translation plugin like Weglot.

It lets you “translate” media – including images – which means that you can display different product images for different languages on your WooCommerce store. This way, you don’t have to mess around with your WooCommerce page’s PHP file, content-single-product.php file, or WordPress site’s HTML and CSS.

Facilitate language- and currency-switching

You need to translate your entire WordPress website (including checkout forms and WooCommerce product pages) into multiple languages to sell to a global market.

Weglot, a powerful translation plugin for WordPress, can help you easily translate your website’s content into multiple destination languages with little to no manual effort. The plugin is compatible with all WooCommerce templates and WordPress themes including Storefront and Divi.

Most translation tools will give you a blank page where you have to fill in your translations or use a shortcode. However, Weglot generates an auto-translated version of your entire website, instantly. You can manually edit these translations either by using its list editor or visual editor and you can stay out of the content-single-product.php file.

Additionally, Weglot makes it easy to send your translations to a third-party professional editing service or have a professional translator refine translations – made available through your Weglot dashboard.

When it comes to online payments, you can use a free plugin such as WOOCS – Currency Switcher for WooCommerce to facilitate currency-switching on your online store. It allows customers to switch product prices into different currencies depending on the product tabs and the set currency rates in real-time.

This way, they can make payments in their preferred currency. You also have the option to add just about any currency to your WooCommerce store. This is especially useful if you sell to international customers.

Make your cart and checkout button as accessible as possible

Make sure the add to cart button and links to the checkout page on your WooCommerce single product pages are easy to access.

If you’re displaying lots of product information on your WooCommerce single product pages, consider adding the add to cart button and checkout link to the navigation menu and making the menu sticky. This way, customers will always be able to access the shopping cart and proceed to checkout – regardless of how far down the page they’ve scrolled.

Improving the accessibility of your shopping cart and checkout page will help you optimize the purchasing user flow. In addition to this, it also makes it easy for customers to add products to their cart and can potentially help you reduce cart abandonment rates.

Conclusion

We explained how you can enhance the shopping user flow of your online store and enable customers to make informed buying decisions simply by customizing your WooCommerce product pages.

Translating your ecommerce site into multiple destination languages using a plugin like Weglot is a great place to start. You can also explore product sorting options, hierarchize your product information, and facilitate currency-switching to boost conversions and, ultimately, increase sales.