How to Customize the WooCommerce Product Page

If you’re looking to customize the WooCommerce product page (no matter what theme you’re using), you’ve come to the right place.

In this article, we’ll be sharing 3 ways you can customize and optimize the default WooCommerce product page, including:

• Improving the product image gallery.
• Setting up cross-selling opportunities on the single product page.
• Adding attribute swatches for product colors and images.

All without a drag-and-drop page builder (like Elementor) or changing your existing WordPress theme!

Plus, we’ll walk you through some default WooCommerce settings and tricks you can use to give your WooCommerce store a boost.

The product page layout in a standard WooCommerce install isn’t ideal for every type of product or WooCommerce store. Essentially, it’s a blank canvas that can be enhanced with the right tools.

These tools will help you improve your store’s design, deliver a better user experience for your customers and increase your sales at the same time.

3 ways to customize product page in WooCommerce

So let’s get right to it and learn how to customize WooCommerce product pages with the following 3 plugins:

• WooThumbs – Improve your WooCommerce product gallery.
• Sales Booster – Add cross-selling to the product page.
• Attribute Swatches – Improve customer experience with color and image swatches.

Customize the product image gallery

WooThumbs allows you to customize the WooCommerce product page by overhauling the product image gallery. You can choose transition effects, customize the thumbnail image, embed video content, add multiple images per variation, and more.

All of the customization options are available in WooThumbs settings. Navigate to WooCommerce > WooThumbs from the WordPress admin screen to get started. Here are just some of the things you can change:

Choose a transition effect for the product gallery

Click on the Carousel tab. Use the Mode option to select a transition effect – horizontal, vertical, or fade effect.

From the same screen, you can also change the transition speed, choose to autoplay the slider, set the slide duration, and enable an infinite loop.

Customize your thumbnail images

Click on the Display tab to access the Image Sizes settings. Using WooThumbs, you can set the single image width, thumbnail image width, and crop ratios as well as select the large image size.

In addition, you can customize the thumbnail navigation settings by clicking on the Navigation tab.

Add a product video to your product gallery

Head to the WooCommerce product you’d like to add video content to. Select the product image (or an image to add to the product gallery). Use the WooThumbs Media Details options to enter the video URL and set the aspect ratio. You can enter a video URL from any video hosting service and even use self-hosted MP4 videos.

The video will play directly inside the image gallery on the WooCommerce single product page. You can even set it to autoplay when using self-hosted MP4 videos.

Add multiple images per variation

Open up a variable product and scroll down to the Product data section. Next, click on the Variations tab and expand the variation you’d like to add multiple images to. Click the Add Additional Images button and select one (or more) additional images.

The additional images will appear in the product gallery when a customer selects that variation from the single product page.

Showing refined product variation images based on the user’s selection can help them make a purchase decision faster. For example, if you sell black hoodies, seeing product images of the black hoodie would make it easier for them to understand what they’ll get if they purchase it.

Add cross-selling and upselling features on the product page

Iconic Sales Booster for WooCommerce is designed to help online store owners maximize their average order value and conversions by setting up cross-selling on the single product and checkout page.

This is an upgraded version of displaying related products on the product page and is a much more effective way of increasing revenue.

For example, you can use the ‘frequently bought together’ feature or the ‘customers also bought’ feature to encourage customers to add more products to their cart. The Sales Booster plugin lets you use social proof of other customers to increase your average order value.

These cross-sells can be added per product by heading over to the Sales Booster tab from the Product data section.

Add Frequently bought together

In the Frequently Bought Together field, type in the name, SKU, or ID of the products you want to cross-sell to customers.

Click on the product to add it as a cross-sell. It should look something like this on the front end:

Add Customers also bought

In the After Add to Cart field, type in the name, SKU, or ID of the products you want to cross-sell to customers.

Click on the product to add it as a cross-sell. It should look something like this on the front end:

When customers click the add to cart button to purchase the product, they’ll see the customers also bought products directly under their shopping cart.

In addition to this, you can also use Sales Booster to display one-time offers on your checkout form, using the ‘order bump at checkout’ feature or the ‘one-click cross-sell after checkout’ feature.

Add swatches to the product page

WooCommerce Attribute Swatches lets shop owners customize the WooCommerce product page by adding color and image swatches to their products. This is an easy way to enhance the customer’s shopping experience and simplify the purchasing user flow.

Visual learner? Watch our WooCommerce Attribute Swatches tutorial here:

You can edit the WooCommerce Attribute Swatches plugin’s settings by heading to the Product data section and clicking on the Swatches tab.

How to add color swatches

Color swatches make it easy for shoppers to quickly see the product’s available color options in one place. This way, they don’t have to click on the variations dropdown to view the available colors.

Set the Swatch Type to Colour Swatch and select a Swatch Shape and Swatch Size. You can also enable tooltips and show swatches in the product catalog. Finally, select the correct color swatch for each product variation.

The screenshot above shows the product-specific settings. With WooCommerce Attribute Swatches, you can also configure these settings globally.

How to add image swatches

Image swatches show a preview of what each product variation looks like. This makes it easier for customers to make an informed buying decision.

Set the Swatch Type to Image Swatch and select a Swatch Shape and Swatch Size. You can also enable tooltips and show large previews and swatches in the product catalog. Once that’s done, select an image swatch for each product variation.

How to add text and radio buttons

Setting the Swatch Type to Text Swatch adds text swatches to the single product page. Customers can click on the variation they’d like to purchase.

Similarly, setting the Swatch Type to Radio Buttons adds radio buttons to the single product page. Customers can click on the radio button corresponding to the variation they’d like to purchase to make their selection.

In addition to this, you can also use this WooCommerce plugin to visually enhance the product filters on your main WooCommerce shop page.

Customize the WooCommerce product page with default WooCommerce settings

The plugins/add-ons we’ve listed above work hard to increase your store’s sales and improve customer experience. But, there are some basic settings you can change within WooCommerce that allow you to customize the WooCommerce product page.

We’ll go through each of these page customization settings below.

Enable product ratings and product reviews

If you want to allow customers to leave reviews or rate your products, you can do so with WooCommerce.

WooCommerce has a setting you can change to allow these to appear. To turn these on, from your WordPress dashboard, go to WooCommerce > Settings > Products. Then scroll down the page and click the checkboxes next to Enable reviews and Product ratings.

Add a product description and short description

This may sound simple enough, but the product description and short description on your product pages matter.

You can find the product description underneath the product title on the new product back in the backend of WordPress. On the product page, this appears as a product tab usually found underneath the add to cart button. This area is important because it allows you to post detailed information about your product.

The short description appears just below the product title on the single product page. This generally should be a brief yet convincing description due to the restricted space on this page. You can add this in the Product Short Description section on the add new/edit product page.

Customize your WooCommerce product page today

When done right, customizing the WooCommerce product page can help you deliver a better shopping experience for your customers. As a result, you’ll also increase your average order value, and boost sales for your ecommerce store.

The best part is that you don’t have to mess around with WooCommerce templates, files, or code when you customize WooCommerce.

You can instead get it done quickly and easily with the following plugins:

• WooThumbs lets you improve the product image gallery, and thumbnails on the single product page.
• Sales Booster is great for setting up different sorts of cross-selling opportunities such as frequently bought together and customers also bought.
• Attribute Swatches lets you add different sorts of attribute swatches for product colors and images.