Connect with us

Guides and Tutorials

How to Customize the WooCommerce Product Page

Published

on

How to Customize the WooCommerce Product Page


The default WooCommerce product pages are good looking and functional but nothing special to look at. As one of the most important pages in any WooCommerce store, the product page has an incredibly important role to play. Yet the default page doesn’t really deliver.

That’s why customizing product pages is so important.

Customizing the product page creates a unique shopping experience for your customers and goes a long way to making your store stand out from the thousands of others competing for the same audience.

This is essential if you want your online store to survive and thrive!

This post will show you how to customize the product page using the Elementor WooCommerce Builder plugin. Customizing the page visually is paramount to maintaining the same style throughout your WooCommerce store.

Elementor is easy to use. All you need to do is to visually drag and drop different elements of the product page, customizing the design according to your specifications.

Elementor Pro gives you full control to customize the Astra theme’s single product page, as this theme was designed to integrate seamlessly with Elementor.

What Do You Need to Customize the WooCommerce Product Page?

For this tutorial, you should have a working WordPress installation, and WooCommerce added on top of that. You also need the Elementor page builder plugin.

We will also be using the Astra Pro theme that is super lightweight and has native support for popular WordPress Page builders like Thrive Architect, Elementor, Divi Builder, Brizy, Gutenberg, WPBakery Page Builder, and Beaver Builder.

In this post, you will see how Astra’s single product page layout can be customized with the Elementor page builder.

There is no need to add hooks or write code, as every design customization is done using simple drag and drop tools.

How to Create a New WooCommerce Product Page With Elementor

We recommend adding a few related products to your site so that you can follow along.

It is also worth mentioning that if you don’t have WooCommerce installed and activated, you will not access Elementor’s product templates.

Here are the steps that you need to follow when customizing the single product page in WooCommerce:

1. Choose a Pre-Designed Product Page Template

Under Templates > Theme Builder > Single Product > Add New, from the dropdown, choose Single Product, give it a name, and click Create Template.

Add new elementor template
Create new single page template Elementor

We highly recommend selecting one of the pre-designed product page templates and customizing it to fit your brand. Elementor Pro has several different styles that you can choose from.

You can also create a new template if you have the technical knowledge. Creating your template from scratch will take a lot of time but can be worth it if you have the skills.

Choose a Single Product Block and Insert, as shown below:

elementor premade templates

This will fetch the template so that you can add the new elements you need on the page.

The template you select will be added to the Elementor canvas. This will allow you to customize the template using the widgets on the left.

You can also customize the current widgets or remove the elements you don’t need. Elementor gives you full control on how you can customize the layout and style.

There is an array of elements on the left sidebar such as Product Images, Product Title, Product Price, and every piece of data that WooCommerce displays on the single product page.

Elementor premade WooCommerce Template

Before you can add widgets to customize this page, make sure you are working on a full-width product page.

Elementor allows you to drag the elements and place them at the exact spot where you need them.

2. Adding Colours That Match Your Brand

The single product page that you have selected looks nice, but it probably doesn’t match your brand perfectly.

One quick fix is to adjust the background colour, font colour, and various typography settings.

To adjust any element on the page, click on the pencil icon in the top right corner of the block:

Elementor edit product title

To perform any styling or visual customization, switch to the Style tab, as shown below:

Elementor product title style settings

In the example above, you can change the text colour, typography, and shadows for the Product Title block.

Click on Typography. This will open another box with typography settings where you can change the font and other parameters, as shown below:

Elementor product title typography setting

Proceed through all the sections and edit them until you achieve your desired result.

When it comes to the price block, please pay special attention to how it is displayed. This block needs to be clear so that customers can easily see it without any confusion.

3. Adding Product Widgets That Will Make up Your Page

If you want your customers to have a unique shopping experience on the single product page, make sure it contains some product widgets.

Elementor allows you to have full control of the look and feel of all the elements that make up the product page.

You’ll have many new widgets at your disposal including Product Title, Gallery, Images, Price, Rating, Short Description, Breadcrumbs, Data Tabs, Stock, Related, Upsell, Add to Cart, Meta, Content, and Additional Information.

Another widget is the Menu Cart.

Here are the product widgets you can add to this page:

Menu Cart

The menu cart widget opens up the cart in a new window. You can use it to display the cart on any page:

Elementor menu cart widget

WooCommerce Breadcrumbs

The WooCommerce breadcrumbs widget controls the layout and colour of the WooCommerce breadcrumbs on the page:

Elementor breadcrumbs widget

Product Title

The product title widget controls the style and layout of the product title:

Elementor product title widget

Product Price

The product price widget allows you to set the product price position and style:

Elementor product price style setting

Product Rating

The product rating widget enables you to display the product rating. Displaying product ratings on your single product page encourages potential customers to buy your products. This means that you need first to have some ratings.

Elementor rating widget

Short Description

The short description widget controls the short description layout and style. You can add a short description in one of the fields you fill when creating a new product.

We recommend displaying this widget near the top of the single product page:

Elementor short description widget

Product Stock

The product stock widget displays the remaining product stock. You can add the stock details on the product data section when creating the product:

Elementor product stock widget

Add to Cart

The Add to Cart widget controls the layout and style of the add to cart button. This is one of the most important calls to action on any product page. It allows users to add products into the cart and later on proceed to the checkout page:

Elementor add to cart widget

Meta Data

The meta widget sets the distance between the text. You can display it either stacked or inline.

You can also control the style of your metadata:

Elementor Product meta widget

Product Image

The product image widget is used to set the image or gallery you want to display:

elementor product image widget

Product Tabs (Additional Information, Reviews)

The product tabs widget houses the main information of the product.

We highly recommend that you make sure the product tabs are in a visible spot so that users can learn about the product:

Elementor tabs widget

Upsell

The upsell widget allows you to set your style to the upsell products. You can name it ‘Products you may like’ or something similar.

You can use this section to add products that are typically purchased together:

Elementor upsells widget

Related Products

The related products widget allows you to set your style to the related products.

This widget uses the WooCommerce related products function to link products with the same category and tag.

Elementor product related widget

4. Tweaking the Mobile and Tablet Views

Many people access the web from their smartphones than from laptops and desktop computers. This means that your store must be optimized for mobile viewing, or else your sales could be negatively affected.

WooCommerce is mobile-optimized out of the box. Since we are creating a custom product template, we need to ensure that the new product page template looks the best it can be.

To see how the page looks on mobile devices, you can click the button labeled Responsive Mode in the bottom left corner of the Elementor interface

Elementor mobile view

Clicking this button will allow you to switch between the Desktop, Tablet, and Mobile views. You can tweak the design of each view as desired.

You can also change your blocks’ display settings so that they can be displayed well on mobile or tablet views.

For example, if you want to increase the price block’s font size on mobile view, click on the pencil icon in the price element. Click to edit the typography and switch to Mobile. Set the desired font size.

Elementor adjust font size on mobile view

If you change the font size here, only the mobile view will be affected.

We recommend going through all the elements until the whole page is configured for mobile and tablet viewers.

5. Preview the New Product Page

To make sure the template has the desired style, we recommend that you preview it with other products.

To preview the new product page, click the eye icon on the bottom left panel, then settings.

Elementor preview page

Choose the product you want to display under the preview settings.

Apply and review to see how the product will be displayed.

6. Publish the Custom WooCommerce Product Page

If you are satisfied with how all the elements are displayed, click on the Publish button in the bottom left corner of the Elementor interface.

Elementor publish page

After that, a new window will appear, asking you to add a condition when this template should be used.

7. Set the Conditions

By default, the template we have created will affect all the product pages on your WooCommerce store. When setting the conditions, you can select a specific product category.

Elementor template publish settings

Click on Save & Close, and all the conditions you add will be set.

This action will save and replace the default product page. You can visit any product page to see how it is displayed on the front end.

Custom elementor product page

Features to Add in WooCommerce Product Page to Optimize Your Conversion Rate

In this section, we’ll discuss features that you can add to your WooCommerce single product page to boost conversion rates

1. Smart Product Page Filtering

Including a product-filtering feature in your WooCommerce store helps you to optimize the page experience. It also makes it easier for customers to get their desired product.

WooCommerce products, by default, are sorted in reverse chronological order. This means that the first product you add will be added at the bottom. The recently added products will be displayed at the top.

When a customer visits an online store, they often filter products based on:

  • Product pricing
  • Best-selling product
  • Recently added product
  • Product rating and reviews

If you want to optimize your store, you can use a product filter or shorting plugins. These plugins allow you to add different shorting options depending on what you need.

Your customers can sort products by using:

  • Pricing (ascending order)
  • Pricing (descending order)
  • Rating
  • Popularity

You can add more depending on your requirements.

2. Information Hierarchy

Arranging various product information in a hierarchical order makes it easy for your customers to know more about your product, as well as the services offered.

Adding the product details helps customers to know more about the product. It also encourages them to take action on your product page.

For example, if your store is operating in different countries, you need to have a selling policy that all customers must comply with depending on their country’s regulations.

Adding this information on the single product page will help to build customer trust.

3. Improve Your Product Images

Your product may be good, but your sales are likely to flatline if the product images don’t showcase the product at their best. It is important to have clear product images, which will be able to sell your product.

Anyone visiting your store wants to see product-focused, high quality images with a clear background. You can also add contextual images that show the products in their environment.

For example, for kitchen appliances you can take pictures of them in the kitchen.

This will require a professional photographer who will take pictures of the product from different angles. The more a customer can see the product in those images, the more confident they’ll feel about making the purchase.

You can use a swap plugin to display secondary product images when a user hovers on the product.

We recommend using high-resolution images to show product details. High-resolution images slow down your site, but you can optimize them using image optimization plugins.

4. Improve Product Description

Your product page needs to have a long and short product description.

The short description provides customers with helpful, relevant information.

The long description follows up by providing relevant facts about the production of the product.

Here you can expand on the short description and tell an enticing story about your product that goes beyond the basic features. This can help make customers more comfortable when making a purchase.

5. Pricing Placement

Customers always want to know the price before making a purchase. You need to test your pricing placement. If you want customers to quickly understand the price, customize the product page to display the price in a large font.

The price should be one of the largest elements on the product page.

Ensure that the text is in bold. You can use a contrasting colour ro make the price ‘pop-out’.

Highlight any discounts and show the original price next to the new price.

If your price isn’t instantly clear as soon as customers land on the product page, you need to rethink your design.

You can start off by applying the tips above then test it again.

Conclusion

At this point, you should be able to customize the WooCommerce product page comfortably.

You’ve seen how Elementor’s WooCommerce Builder gives you the design flexibility to customize your product page visually and how easy it is to customize pages to make them unique.

Elementor has different templates that you can choose from, which saves you a lot of time but also gives you the freedom to experiment.

Follow this tutorial, and you will be able to create a stunning product page in no time at all!





Source link

Continue Reading
Click to comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.