---
title: "How to Edit WooCommerce Product Page in Elementor?"
url: https://theplusaddons.com/docs/edit-woocommerce-product-page-in-elementor/
date: 2023-12-07
modified: 2026-04-10
author: "Aditya Sharma"
description: "Do you want to edit the WooCommerce product page as per your requirement? WooCommerce offers a variety of customization options, but it can be challenging to make significant changes to..."
image: https://theplusaddons.com/wp-content/uploads/2023/12/How-to-Edit-WooCommerce-Product-Page-in-Elementor_-1024x536.jpg
word_count: 2028
---

# How to Edit WooCommerce Product Page in Elementor?

## Key Takeaways

- The Plus Addons for Elementor offers over 120 widgets specifically for customizing WooCommerce product pages.
- Woo Single Basic widget displays product title, short description, badge, rating, and next/previous buttons on single product pages.
- Woo Product Image widget allows selection between Image Gallery and Single Image layouts for displaying product images.
- Woo Single Price widget shows add to cart button, product price, stock status, items sold, and attributes on single product pages.
- Woo Single Tabs widget provides options for displaying product description, additional information, or reviews in a tabbed format.

Do you want to edit the WooCommerce product page as per your requirement? WooCommerce offers a variety of customization options, but it can be challenging to make significant changes to the product pages without extensive coding knowledge.

But The Plus Addons for Elementor offers a range of widgets to customize the WooCommerce product page in Elementor easily.

*To check the complete feature overview documentation of The Plus Addons for Elementor Woo Builder, [click here](/docs/woo-builder-settings-overview/).*

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Woo Single Basic, Woo Product Images, Woo Single Pricing and Woo Single Tabs widgets are activated, to verify this visit The Plus Addons → Widgets → and Search for Woo and activate them.

https://www.youtube.com/watch?v=y2KrybXgwV8

## How to Activate the Woo Single Product Widgets?

Go to 

- **The Plus Addons **→** Widgets **

- **Search “**woo”** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2023/12/woo-single-activation-1.png)

> *Note:**** ****Make sure you’ve added some products to your WooCommerce store.*

You have to use these widgets on a single product template. 

You can use the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or you can use Elementor Pro if you are already using it to create the single product template.

## Add Woo Single Basic

To show product details such as product title, short description, badge, rating and product next previous button on a single product page, add the Woo Single Basic widget to the appropriate location on the single product template.

In the **Woo Single Basic** section, you’ll see five items, open one item.

From the **Select** dropdown, you have to select the data you want to show. Here, you’ll find five options -

**Title** - To show the product title.

**Short Description** - To show a short description of the product.

**Badge** - To show a discount or stock related badge on the product.

**Rating** - To show product rating.

**Next/Previous Product** - To show a next previous button for easy navigation.

Based on your selection, you’ll see relevant options.

Similarly, you can edit the other items, and you can also drag and drop to rearrange the items or you can delete an item as well.

You can click on the **+ Add Item** to add more items.

From the **Alignment** section, you can align the content.

### Show Product Title

To show the product title on a single product page, open an item from the **Woo Single Basic** section.

From the **Select **dropdown, select **Title**.

![woo single basic title](https://theplusaddons.com/wp-content/uploads/2023/12/woo-single-basic-title.png)

You can change the HTML tag of the title from the **Title Tag** dropdown.

Now you’ll see the product title.

### Show Product Short Description

To show the product short description on a single product page, open an item from the **Woo Single Basic** section.

From the **Select **dropdown, select **Short Description**.

![woo single basic short description](https://theplusaddons.com/wp-content/uploads/2023/12/woo-single-basic-short-description.png)

Now, you’ll see the product description added in the short description section of the product edit page.

### Show Product Badge

To show a badge on a single product page, open an item from the **Woo Single Basic** section.

From the **Select **dropdown, select **Badge**.

![woo single basic badge](https://theplusaddons.com/wp-content/uploads/2023/12/woo-single-basic-badge.png)

Now, if a product is out of stock or selling at a discounted price, you’ll see the relevant badge. 

For the out of stock status, you can change the text from the **Out of Stock Text** field.

### Show Product Rating

To show a rating on a single product page, open an item from the **Woo Single Basic** section.

From the **Select **dropdown, select **Rating**.

![woo single basic rating](https://theplusaddons.com/wp-content/uploads/2023/12/woo-single-basic-rating.png)

Now, if a product has received reviews, you’ll see the rating on that product page.

### Show Next Previous Product Button

To show a next previous product button on a single product page, open an item from the **Woo Single Basic** section.

From the **Select **dropdown, select **Next/Previous Product**.

![woo single basic next previous](https://theplusaddons.com/wp-content/uploads/2023/12/woo-single-basic-next-previous.png)

You can edit the next previous text and add icons to them as well.

By turning on the **Current Category** toggle, you can make the next previous button specific to the current category of the product. This will only show the next previous products from the same category as the current product.

Now you’ll see the next previous button on the product page to easily navigate to other products.

Based on your selection, you’ll see relevant product details on the product page

From the **Style** tab, you can customize the style further.

## Add Woo Product Image

To show the product image on a single product page, add the Woo Product Image widget to the appropriate location on the single product template.

From the **Layout** dropdown, you have to select the image layout type. Here, you’ll find two options - 

**Image Gallery** - To show multiple product images.

**Single Image** - To show a single product image.

Based on your selection, you’ll see relevant options.

### Show Image Gallery

To show multiple product images on a single product page, select **Image Gallery** from the **Layout** dropdown.

> *Note: To show the image gallery, make sure images are added to the product gallery section of the product edit page.*

Then, from the **Style** section, you can select from two predefined styles.

If you select **Style 1**, you can hide small image thumbnails by enabling the **Hide Thumbnail** toggle.

You can also set the image position from the **Thumbnail Position** dropdown. 

![](https://theplusaddons.com/wp-content/uploads/2023/12/woo-product-images-image-gallery-new.gif)

But if you select **Style 2**, you’ll get to select different layouts from the **Layout** section. Here, you’ll find four options - 

**Grid** - To show the product images in a grid layout.

**Masonry** - To show the product images in a masonry grid layout.

**Metro** - To show the product images in a metro layout.

**Carousel** - To show the product images in a carousel. You can set the image size for the carousel from the **Image Type** dropdown. 

For the carousel layout, you can connect and control the carousel with the Carousel Remote widget using the **Unique Carousel ID** from the **Carousel** tab under the **Style** tab. 

From the **Columns Manage** tab, you can manage the image column for different devices for the grid, masonry and metro layouts.

From the **Extra Options** tab, you can show a video in the image gallery by turning on the **Video** toggle.

Then, from the **Video Location** dropdown, you can place the video at the beginning or at the end of the gallery.

> *Note: Make sure to enable the ****WooCommerce Product Video URL**** toggle from ****The Plus Addons ****>**** Extra Options*** > **Settings***. Only then you’ll get an option to add a video on the product edit page. *

![woocommerce product video url enable](https://theplusaddons.com/wp-content/uploads/2023/12/woocommerce-product-video-url-enable.png)

### Show Single Image

To show a single product image on a single product page, select **Single Image **from the **Layout** dropdown.

![woo product images single image](https://theplusaddons.com/wp-content/uploads/2023/12/woo-product-images-single-image.png)

From the **Image Size** dropdown, you can select the image size.

Then you can turn on the **On Hover Image Change** toggle to show a different image on hover. For this make sure you’ve added images in the product gallery section of the product edit page.

You can make the image linkable by enabling the **Link** toggle.

From the **Style** tab, you can customize the style further.

## Add Woo Single Price

To show product pricing related details such as add to cart button, product price, stock, items sold, and other attributes on a single product page, add the Woo Single Price widget to the appropriate location on the single product template.

In the **Woo Single Pricing** section, you’ll see five items, open one item.

From the **Select** dropdown, you have to select the data you want to show. Here, you’ll find five options -

**Add to Cart** - To show the add to cart button.

**Price** - To show the product price.

**Stock** -  To show the stock status of the product.

**Sold** - To show how many products have been sold.

**Attributes** - To show different product attributes like category, tag and SKU.

Based on your selection, you’ll see relevant options.

Similarly, you can edit the other items, and you can also drag and drop to rearrange the items or you can delete an item as well.

You can click on the **+ Add Item** to add more items.

From the **Extra Options **tab, you can show the in stock status by enabling the **Add to Cart : Instock Status** toggle.

### Show Add to Cart Button

To show the add to cart button on a single product page, open an item from the **Woo Single Price** section.

From the **Select **dropdown, select **Add to Cart**.

![woo single pricing add to cart](https://theplusaddons.com/wp-content/uploads/2023/12/woo-single-pricing-add-to-cart.png)

Then, from the **Quantity Layout** dropdown, you can select a layout style.

Now you’ll see the add to cart button with a quantity input field.

### Show Product Price

To show the product price on a single product page, open an item from the **Woo Single Price** section.

From the **Select **dropdown, select **Price**.

![woo single pricing price](https://theplusaddons.com/wp-content/uploads/2023/12/woo-single-pricing-price.png)

You can add a prefix and postfix text as well.

Now you’ll see the product price.

### Show the Product Stock Status

To show the product stock status on a single product page, open an item from the **Woo Single Price** section.

From the **Select **dropdown, select **Stock**.

![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-single-pricing-stock.gif)

You can add a prefix and postfix text to the stock.

In the **Out of Stock Notice** field, you can add the text for out of stock status. 

If you have enabled backorders for your products, you can manage the text from the **Backorders Allowed Notice** field.

By enabling the **Progress Bar** toggle, you can add a progress bar showing the product stock.

From the **Layout** dropdown, you can choose different styles for the progress bar.

Then in the **Separator Text** field, you can add a text between total and available stock.

You can add a text after the stock in the **Postfix Text** field.

To show the progress bar on a product page make sure the specific product is sold at least once and **Stock management** is checked under the **Inventory** tab on the product edit page.

![](https://theplusaddons.com/wp-content/uploads/2024/07/Woo-single-pricing-Stock-Management.png)

Now, you’ll see the product stock status.

### Show Number of Items Sold

To show the number of times the product is sold on a single product page, open an item from the **Woo Single Price** section.

From the **Select **dropdown, select **Sold**.

![woo single pricing sold](https://theplusaddons.com/wp-content/uploads/2023/12/woo-single-pricing-sold.png)

You can add a prefix and postfix text as well.

Now you’ll see how many times the product is sold.

### Show Product Attributes

To show some product attributes on a single product page, open an item from the **Woo Single Price** section.

From the **Select **dropdown, select **Attributes**.

![woo single pricing attributes](https://theplusaddons.com/wp-content/uploads/2023/12/woo-single-pricing-attributes.png)

This will show the product category, tag and SKU.

From the **Display** dropdown, you can select the layout.

You can add a prefix text to all the attributes from their respective fields.

From the **Style** tab, you can customize the style further. From here, you can also style the product variation swatches.

> *Note: To show variation swatch options, make sure you’ve *[*enabled WooCommerce Swatches*](https://theplusaddons.com/docs/create-woocommerce-color-swatches-filter-in-elementor/#Enable-WooCommerce-Swatches)* and then *[*created attributes*](https://theplusaddons.com/docs/create-woocommerce-color-swatches-filter-in-elementor/#Create-a-Color-Attribute)* and *[*added them to the product*](https://theplusaddons.com/docs/create-woocommerce-color-swatches-filter-in-elementor/#Assign-Color-Attribute)*.*

If you’ve [created a custom product loop with the Product Listing widget](https://theplusaddons.com/docs//create-woocommerce-custom-product-loop-in-elementor/) and have used the Woo Single Pricing widget on the custom loop skin. In that case, you can show variation swatches on product loop items by enabling the **Custom Loop Skin** toggle from the **Add to Cart : Swatches Product** tab under the **Style** tab.

![woo single pricing custom loop skin](https://theplusaddons.com/wp-content/uploads/2023/12/woo-single-pricing-custom-loop-skin.png)

Suggested reading, [5 best WooCommerce product search plugins](https://theplusaddons.com/blog/best-woocommerce-product-search-plugins/).

## Add Woo Single Tabs

To add a tabbed section for showing product description, additional information or reviews on a single product page, add the Woo Single Tabs widget to the appropriate location on the single product template.

From the Layout dropdown, you can select the layout. Here, you’ll find two options - 

**Tabs** - To show the description, additional information and reviews tabs.

**Individual** - To show any one tab.

![](https://theplusaddons.com/wp-content/uploads/2023/12/woo-single-tabs-new.gif)

Learn, [how to edit WooCommerce thank you page in Elementor](https://theplusaddons.com/docs//edit-woocommerce-thank-you-page-in-elementor/).

For the **Tabs** option, you can select a predefined style from the **Style** section.

But when you select the **Individual** option, you can show any one specific tab from the **Individual** dropdown.

From the **Style** tab, you can customize the style further.

After using the above widgets you should have a beautiful single product page. You can use the Product Listing widget to [show related products on the product page](https://theplusaddons.com/docs/show-related-products-on-a-product-page/).

![woo single product demo](https://theplusaddons.com/wp-content/uploads/2023/12/woo-single-product-demo-952x1024.png)

Also, read [how to edit WooCommerce my account p](https://theplusaddons.com/docs/edit-woocommerce-my-account-page-in-elementor/)[a](https://theplusaddons.com/docs/edit-woocommerce-my-account-page-in-elementor/)[ge in Elementor](https://theplusaddons.com/docs/edit-woocommerce-my-account-page-in-elementor/).

## Frequently Asked Questions

**Q: What should I do if the Woo Single Product widgets are not showing up?**
A: If the Woo Single Product widgets are not appearing, ensure that both The Plus Addons for Elementor and the Elementor FREE Plugin are installed and activated. Additionally, check that the Woo Single Basic, Woo Product Images, Woo Single Pricing, and Woo Single Tabs widgets are activated by navigating to The Plus Addons u2192 Widgets and searching for 'woo'. Without these widgets activated, you won't be able to edit the WooCommerce product page effectively.

**Q: What is the best way to show multiple product images on the product page?**
A: To display multiple product images, use the Woo Product Image widget and select 'Image Gallery' from the Layout dropdown. This allows you to show a gallery of images for the product. Ensure that images are added to the product gallery section in the product edit page. You can also choose between different styles such as Grid or Carousel to enhance the visual presentation.

**Q: How do I add a next/previous product button to the product page?**
A: To add a next/previous product button, include the Woo Single Basic widget in your single product template. From there, select 'Next/Previous Product' from the dropdown options. You can customize the button text and even add icons. Enabling the Current Category toggle will restrict navigation to products within the same category, improving user experience.