How To Edit WooCommerce Product Page Using Elementor

How To Edit WooCommerce Product Page Using Elementor

Making a custom single product page is one of the best ways for your eCommerce store to stand out, giving your customers more freedom while shopping.

And thanks to WordPress, creating a customized product page is easy. You can efficiently create a custom product page for your eCommerce store using the popular page builder Elementor’s drag and drop WooCommerce widgets.

In this guide, you are going to learn how to edit the WooCommerce product page as well as design a custom single product page from scratch. Before diving into the tutorial we are going to take a look at why you should customize the WooCommerce product page.

Let’s get started:

Why You Need To Customize Your WooCommerce Product Page

How To Edit WooCommerce Product Page Using Elementor

WooCommerce offers a single product page that is minimal and simple by default. Using this product page, customers can easily view a product and able to purchase it. But, if you want to add more functionality such as product add-ons, size chart, 360º image, product video, and more to your single product page then you need a custom single product page or edit the current one.

A custom product page helps in many ways. Here are some important facts about having a custom product page for your eCommerce store.

  • Ensure better user experience
  • Increase product sales
  • Improve product page design
  • Help customers to purchase product
  • Grab customers attention
  • Ensure better product view

How To Edit WooCommerce Product Page ( Step by Step Guide )

In the following part of our blog, we’ll show you how to edit the WooCommerce product page in two easy ways.

  1. First Method: Create the Single Product Page Template
  2. Second Method: Create A New Single Product Page From Scratch

You need to Install & Activate the following plugins to create a single product page:

Pre-requisites:

If you are new to Elementor read this Step By Step Guide For Beginners.

First Method: Create the Single Product Page Template

In this method, we are going to show you how to create and edit a single product page template using the Elementor premade templates.

Step 1: Go To Template Theme Builder

To create a single product page template, you need to geo to the Dashboard–>Template–>Theme Builder.

Go To Template Theme Builder

Step 2: Click on the Single Product Tab

You’ll get the Single Product page creation option on the next page. Click the Single Product tab first. Then you need to click the Add New Single Product button.

Click Single Product Tab

Step 3: Create Template

After that, you’ll get the option to create your first page template. You also write the name of your template here in this area. Then click the Create Template button.

Create Template

Step 4: Choose a Suitable Pre-Designed Product Page Template

If you want to use the default Elementor template, you can choose ten right here in the Elememtor Library. You can select and Install a suitable template based on your need.

Install Premade Template

If you do have not enough time to design & customize your WooCommerce single product page, you can use the Elementor premade templates and block. But in this guide, you’ll show you how to how to create a WooCommerce Product Page from scratch using Elementor.

Second Method: Create A New Single Product Page From Scratch

Now, it’s time to design a new product page from scratch. If you follow the below guide, you’ll be able to design your very first product page within a very short time.

Let’s get started:

Step 1: Open The Page To Elementor Editor Panel

After creating the single product page template, you need to open the page into the Elementor editor panel. Here, you see all the WooCommerce widgets are available in the left size widgets gallery. To use them, you need to make a solid structure of your product page. Click the red plus (+) icon to add columns.

Open The Page To Elementor Editor Panel

Step 2 : Add Two Columns

You can see from the below screenshot that we’ve added two columns to design our single product page.

Add Two Columns

Step 3: Add Necessary WooCommerce Widgets To Design Your Product Page

Now, it’s time to add essential WooCommerce widgets for designing the product page. Here we’ve added these widgets to design our custom product page.

  • Product Image widget : You can set the image or gallery you wish to display
  • Product Title Widget : This widget will help you customize the style and layout of your product title.
  • WooCommerce Breadcrumbs widget : Customize the colors and the layout for WooCommerce Breadcrumbs.
  • Short Description Widget : Choose how you want to display the short discription of your product.
  • Product Price Widget : Control the layout and design of your product price.
  • Product Rating Widget : Customize the ratings of your product. Make it more visible and make sure customers can easily know how users view your product.
  • Product Meta Widget : Set the distance between the text, display it stacked or inline, and control the style of your Metadata
  • Additional Information Widget : You can add additional information of your product with this widget.
  • Add To Cart Widget : Customize the style and layout ofthe Add to Cart button.
  • Product Data Tabs Widget : Control the layout of the product data tab.
  • Upsells Widget : You can create your own style for the upsell products.
  • Product Related Widget : If you have similar products on your site you must have a related product section. You can stylize your related product section with this widget.

Step 4: Add Product Images Widgets

First, we add the Product Image widget to the right-side column. You can type ‘product image’ into the search field then drag & drop it into the column.

Add Product Images Widgets

Step 5: Customize the Product Image Style

You can customize the product image style in your own way using the Style options of this widget. Here, you turn on & off the Sale Flash. You can add the Product Image and Thumbnails’ Border Type, Border Radius, also manage the Spacing between Product Image & Thumbnails.

Add Product Images Widgets

Step 6: Add WooCommerce Breadcrumbs Widget

To ensure a better user experience you need to provide proper navigation on your page. That is why we need to add the WooCommerce Breadcrumbs widget to add the navigation of our product page.

Add WooCommerce Breadcrumbs Widget

Step 7: Customize WooCommerce Breadcrumbs

You again customize Breadcrumbs’ design using the style options. Here, you can set the Text Color, Link Color, Topography, and Alignment of the Breadcrumbs.

Style WooCommerce Breadcrumbs

Step 8: Add Product Title Widget

You need to add a suitable product title so that users easily understand what your product is all about. So, let’s add the Product Title into the left-side column.

Add Product Title Widget

Step 9: Style Product Title Widget

In the Style section, you can change the Product Title designs and manage Text Color, Topography, Text Shadow, and choose a Blend Mode.

Style Product Title Widget

Step 10: Add the Short Description Widget

If you need, you can add the Short Description widget to show a brief product description. Like the other widget, you can find it from the left-side widgets area. Just drag the widget and drop it into a suitable place for your product page.

Add Short Description Widget

Step 11: Style Short Description

The Style area also allows you to change the default design of the widget. You notice that we’ve changed the Typography Size and set it as 15px.

Style Short Description

Step 12: Remove Short Description Space

You see here we remove the extra space of the Short Description widget. Go to the Advanced area. Then Unlink the Margin and add the required margin. Here, we’ve added -25px Margin to remove the additional space.

Remove Short Description Space

Step 13: Add & Style the Product Price Widget

Let’s add the Product Price widget to display the product price. You can add your custom style in the Style section. Here, you see we’ve changed the Color of the product price.

Add & Style Product Price Widget

Step 14: Add & Style Product Rating Widget

If you want to display the customer rating of your product, you need to add the Product Rating widget. You can also style your customer product rating in your own way using the styling options.

Add & Style Product Rating Widget

Step 15: Add & Style Product Meta Widget

You can show the product meta information such as product category, etc. To do this, you need to add the Product Mata widget. You are able to customize the widget using its styling option based on your need.

Add & Style Product Meta Widget

Step 16: Add & Style Additional Information Widget

If you need to display your product additional information like product color and size, you should add the Additional Information widget. You are able to edit the style of the widget. To do so, click the Style section. Here, you’ll get the essential options to change the current style in your way.

Add & Style Additional Info Widget

Step 17: Add & Style Add To Cart Button

It’s important to add the cart button so that your customer can buy the product. You can easily add a cart button to your single product page by adding the Add To Cart widget. You can also customize the cart button according to your choice using the style options.

Add & Style Add To Cart Button

Step 18: Add & Style Product Data Tabs

If you want to show the product data tab, you can do it by adding the Product Data Tabs widget and using its style options for further customization.

Add & Style Product Data Tabs

Step 19: Add Upsells Widget

You can add your upsell products by adding the Upsells widget to your single product page.

Add Upsells Widget

Step 20: Style Upsells Widget

You can change the design if you want. In the Style area, you’ll get the necessary settings to customize the upsells products. The options are.

  • Product
  • Heading
  • Box
  • Sale Flash
Style Upsells Widget

Step 21: Add & Style Related Products Widget

Like the Upsells products, you can also add your related products to your product page. You need to add the Product Related widget to your product page suitable area.

Add & Style Related Products Widget

Final Preview of Our Custom WooCommerce Single Product Page

After finishing the single product page design you see the final look of our WooCommerce product page below.

Final Preview of Our Custom WooCommerce Single Product Page

Designing ECommerce Website Using HappyAddons WooCommerce Widgets

Introducing Happy Addons’ WooCommerce Single Product Widget

Introducing Happy Addons' WooCommerce Single Product Widget

Although you can easily create your unique product page with Elementor, however, many Elementor addons like Happy Addons give you more flexibility in designing and customizing a WooCommerce product page.

We will talk about Happy Addons’ new exclusive WooCoommerce Single Product widget which is advanced, easy to use and comes with modern premed product demo page layouts.

With this awesome widget, you can decorate your product page in a couple of minutes. Moreover, you’ll get some new settings that allow you to control the design efficiently. Moreover, you also get three beautiful design skins such as Classic, Standard, and Landscape to show your product.

Single Product Demo

Check out the documentation to know how to work with this widget.

You can also watch this demo video of the Single Product widget.

Get Ready To Create Your Single Product Page

It’s necessary to have a well-design single product page to ensure a better user experience while online shopping.

In this blog, we’ve discussed how to edit the WooCommerce product page using premade Elementor templates. Additionally, we’ve shown how can create your own custom single product page using Elementor.

If you still have any queries regarding this blog, feel free to comment us in the below comment section. If you like this guide then share it on your social channel.

Don’t forget to subscribe to our newsletter for getting more interesting articles regarding WordPress, Elementor, WooCommerce, and more.

Subscribe to our newsletter

Get latest news & updates on Elementor

Share this post

Share on facebook
Share on twitter
Share on linkedin

Related Post

Leave a Reply

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

0 Shares
Share via
Copy link
Powered by Social Snap