How to customize WooCommerce product page by using Elementor & WooBuilder [Update]

Would you like to deeply customize WooCommerce product page layouts?

The WooCommerce product page is one of the most vital pages in your WooCommerce store, but by default, you have very little control over the design. Hence, almost all these WooCommerce shop page templates tend to look exactly the same. But not all products are the same, some require different product page layouts to really sell them.

By creating better shop page layouts, you can get a breakthrough over your competitors to really show off your products in the best way possible.

Benefits of customizing WooCommerce product pages perfectly

Below are the benefits that you will get if designing beautiful product pages.

• An awesome WooCommerce Product page will attract more visitors to stay longer on your site, and convert more of your potential customers into new ones.
• By creating a good WooCommerce product page, you can dramatically enhance SEO by including more keywords in rich content that your leads will be searching for on Google search engine.

In the past, editing WooCommerce product page templates involved dozens of lines of code. In this article, we will guide you on how to customize WooCommerce product page in 2 ways: via Elementor pro and via Woostify Elementor WooCommerce theme pro, both of which require almost no programming skills.

How to customize WooCommerce product pages with Elementor Pro?

The WooCommerce shop archive page and WooCommerce single product page are the default WooCommerce template. Therefore, it’s very limited to edit the WooCommerce shop page layout. Luckily, thanks to Elementor WooCommerce Builder, we can totally edit WooCommerce product page layouts.

What’s the Elementor Theme Builder?

Theme Builder is an advanced function of Elementor Pro. This feature helps visually customize WooCommerce Elementor product page elements, including headers, footers, archive pages, single post pages, and other shop pages. Basically, you can build these pages by using the pro version of Elementor page builder.

Can we use Elementor with WooCommerce in Woostify?

Woostify was integrated with Elementor and WooCommerce. Therefore, you can use Elementor to build any parts of eCommerce sites when using Woostify free WooCommerce theme. Especially, this is the best way to create incredible WooCommerce Elemetor product pages.

Below is how to edit WooCommerce product pages with Elementor:

Step 1: To build a product single page, you can go to Templates -> Theme builder -> Add new and select Product single template

Step 2: Just drag and drop widget to build this page

Note: Product image widget default doesn’t work. You must choose Woostify – Product images widget that requires Elementor bundle add-on of Woostify Pro

For this tutorial, you can build an Elementor Woocommerce single product page by using the following widgets:

• Product Title widget
• Woo Breadcrumbs widget
• Woostify – Product image widget
• Product rating widget
• Short description widget
• Product price widget
• Add to cart widget
• Product meta widget
• Product data tabs
• Product related 
• Upsells widget

Step 3: Click to Publish button and set the condition where you want to apply this page. You can set it for all product pages or by category and tag.

If you want to build a custom Elementor WooCommerce product archive page, you only need to create a new page and set it for the Product Archive template and follow all the steps above.

With this feature, you can build and customize WooCommerce Elementor product pages visually without any coding knowledge. This feature helps save a ton of time and brings flexibility to build a fully-functional online store.

How to Customize WooCommerce Product page with Woostify Pro?

Why we can use Woostify Pro instead of Elementor pro to build a WooCommerce product page?

Woostify has recently released a unique and useful Elementor WooCommerce addon, WooBuilder that allows store owners to build their desired shop page, single product page, cart page, and checkout page, custom My Account page WooCommerce, and Thank You page Elementor. This feature is built with the aim to increase conversion rates, which has a big contribution to the sale improvement of their eCommerce websites.

With this WooCommerce single product page builder, you don’t need to get Elementor Pro to build your shop pages. The Woostify theme has already been integrated with Elementor Free, so you don’t need to install Elementor anymore. Particularly, Woostify offers separate bundles of useful Elementor WooCommerce widgets for shop owners to have completely full control over the WooCommerce shop pages. They can fully customize any part of their product pages without any code experiences.

Below is how to design and customize WooCommerce single product page with WooBuilder:

Step 1: Go to Woostify Option in the Dashboard, then enable WooBuilder by clicking into Activate.

Step 2: Now, you can build the page as you desire by clicking in Add New:

Step 3: Choose Product page in the scroll-down options to create and customize Elementor WooCommerce single product page.

Step 4: Now, using WooBuilder integrated with WooCommerce and Elementor page builder, you can add elements you want to show on your page easily within the lively drag and drop editor. Some widgets you may need to build a single product page are:

• Product add to cart
• Product meta
• Product navigation
• Product related
• Product ratings
• Countdown urgency
• Much more

After customizing your single product page, you are allowed to apply the page your have created for other products, other pages and preview it.

In addition to the shop page and single product page, you can easily design and customize Elementor WooCommerce checkout page, cart page, and empty cart page using WooBuilder. To get further detail tutorial, you should take a look at this guide on how to build Elementor WooCommerce shop pages with WooBuilder.

In comparison with Elementor Pro, using Woostify Pro to create and customize WooCommerce product pages will definitely bring you more benefits. It is because Woostify Pro gives you more functionalities to edit product page, single product page, cart page, checkout page, and empty cart page, while Elementor pro does not allow users to make any changes in the checkout page, cart page, and empty cart page.

What you need consider when customizing WooCommerce product pages

Whatever method you go for, you should notice the aspects below while designing WooCommerce product pages to make them outstanding.

Improve Your Product Images

All customers like to see the product images as clear as possible. Besides, the more images there are, the better customers prefer. Your product photos have more influence in customers than text. The more ways customers can view a product, the more likely they make the purchase.

In detail, a product image should be high quality, clear, and showcase different views of the product. Besides, you should try to present the company’s signs, and logo in the pictures if it is possible.

Make sure to capture images with enough resolution to show your product details clearly. However, high-resolution images are large files, which can slow down the page loading speed of your WooCommerce store. You can avoid this by following some useful tips to optimize your product page images.

Improve Your Product Description

Effective product descriptions include a short and long section. The short description is for quick page scans, while the longer section goes more in-depth. 

To keep the customer’s attention on your product, you should not only sell the product but also sell a meaningful story related to it. So in your product descriptions, besides the basic features, you should make up a story about your product to give them positive feelings at the point of sale, pushing them to make purchases. That is a powerful way to boost sales. In this part, Jack Rudy Cocktail, a family-run company selling wine and other drinks, has done a very good job because they tell the customers about meaningful stories about their products.

Test Your Pricing Placement

The first two information that online shopper finding on a product page are the answers to these question: “Is this the product I’m looking for?” and then “Can I afford this?”. So you need to put the product price at an easy to see place.

Many WooCommerce themes have a common design that puts the price next to the product title, near the top of the page, and on the right side. You can use one of these prebuilt layout but don’t forget to follow the criteria below when customizing WooCommerce product pages to make it easier for the customers to quickly know the price:

• The price is displayed in a larger font size.
• Text is bold.
• Font color is highly visible.

Make the Related Product Recommendations appropriate

Showing related products in WooCommerce is a smart strategy to up-sell or cross-sell products on your WooCommerce store. For example, after a customer puts a moisture skin lotion on their shopping cart, you can offer on a cotton pad, makeup removal, and whitening cream for cross-sells to encourage them to make more purchases. This is a little similar to WooCommerce grouped products because they all offer bundle products.

Some product page templates will automatically put products with similar tags or categories into your related products section. Therefore, which WooCommerce categories or tags you add to the products will influence how the related items are presented.

You can make it more useful by manually managing the related items to push sell the specific products as you want.

Conclusion

Customizing WooCommerce Elementor product pages and making it is a good way to improve customer experience and boost your conversion rates. Regarding WooCommerce shop pages customization, Woostify offers users various awesome features to edit shop pages and make them flexible to fit your store and your niches. That definitely enhances shopping experience and drives more sales to your store.