customize woocommerce product page

Plugins, Tips

How to Customize the WooCommerce Product Page

The default WooCommerce single product page layout isn’t ideal for every type of product. One way to improve your ecommerce store’s design and deliver a better user experience is to customize the WooCommerce product page. This allows you to simplify the customer’s shopping experience and can help you improve sales.

Just some of the ways you can customize the WooCommerce product page include:

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

In this article, we’ll show you how to customize the WooCommerce product page using three plugins by Iconic – WooThumbs, Iconic Sales Booster, and WooCommerce Attribute Swatches.

These plugins are incredibly easy to use (which means there’s absolutely no coding required), built for speed, and come with reliable support.

How to customize the product image gallery using WooThumbs

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, and add multiple images per variation.

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.

Transition effect settings in WooThumbs

From the same screen, you can also change the transition speed, choose to autoplay the slider, set the slide duration, and enable 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.

Thumbnail settings in WooThumbs

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

Embed video content into your product gallery

Head over 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.

Embed video content in single product page

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

Video content embedded

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.

Multiple images per product variation in WooCommerce

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.

How to add cross-selling features on the product page using Sales Booster

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

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.

Both of these cross-sells can be added on a per-product basis 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.

Frequently bought together products

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

Preview of frequently bought together products

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.

Customers also bought in WooCommerce

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

Customers also bought preview

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.

How to add swatches to the product page using WooCommerce Attribute Swatches

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.

You can configure the WooCommerce Attribute Swatches plugin’s settings by heading over 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 all of 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.

Attribute swatches (color) settings

Set the Swatch Type to Colour Swatch and select a Swatch Shape and Swatch Size. You can also choose to 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.

customize woocommerce product page

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.

Attribute swatches (images) in WooCommerce

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

Preview of attribute swatches (images) in WooCommerce

How to add text and radio buttons

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

Attribute swatches (text) in WooCommerce

Similarly, setting the Swatch Type to Radio Buttons simply 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.

Attribute swatches (radio buttons) in WooCommerce

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

Customize your WooCommerce product page today!

When done right, customizing the WooCommerce product page can help you deliver a better shopping experience to your customers, increase your average order value, and boost sales. The best part is that you don’t have to mess around with WooCommerce templates, files, or code.

To recap, the plugins mentioned in this guide are:

  • 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.
  • WooCommerce Attribute Swatches lets you add different sorts of attribute swatches for product colors and images.

Instant Access to All of our WooCommerce Plugins

Save $1000s on our full collection of WooCommerce plugins. Everything you need for your WooCommerce store.

or learn more

Maria creates content for the Iconic blog, helping you solve WooCommerce problems.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *