customize woocommerce product page

Plugins, Tips, WooCommerce Tutorials

How to Customize the WooCommerce Product Page

If you’re looking to customize the product page in WooCommerce (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 product page for your WooCommerce store, 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 or changing your existing WordPress theme!

The product page layout in a standard WooCommerce install isn’t ideal for every type of product or store. Essentially, it’s a blank canvas, one 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 customize the WooCommerce product page with the following 3 plugins:

Customize the product image gallery

woocommerce video

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.

Start your 14-day free trial of WooThumbs

Start your free trial now to instantly improve your WooCommerce product gallery.

or learn 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.

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

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.

Add cross-selling features on the product page

Preview of frequently bought together products

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.

Start your 14-day free trial of Iconic Sales Booster

Start your free trial right now and instantly add cross-selling to your WooCommerce store.

or learn more

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.

Add swatches to the product page

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.

Start your 14-day free trial of WooCommerce Attribute Swatches

Start your free trial now and instantly add color and image swatches to your WooCommerce store.

or learn more

Visual learner? Watch our WooCommerce Attribute Swatches tutorial here:

You can edit 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 previews, 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 WooCommerce 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.

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.
Avatar

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

0 Responses

Leave a Reply

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