Product Price

The Product Price Widget allows you to add, style, and manage product pricing information anywhere on your Elementor-powered page. It’s perfect for displaying WooCommerce product prices, including regular and sale prices, with customizable styling options and responsive settings.

Whether you’re designing a product page, shop catalog, or promotional section, the Product Price Widget makes it easy to present pricing details with precision and style.

Key Features:

• Display WooCommerce product prices (regular and sale)
• Manually set custom prices if needed
• Link prices to product pages
• Customize typography, alignment, and colors
• Fully responsive and optimized

🚀 How to Enable the Product Price Widget

To start using the Product Price Widget, follow these steps:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Product Price widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

🧩 How to Use the Product Price Widget in Elementor

Step 1: Add the Widget to Your Page

• Open your desired page using Elementor Editor.
• Search for “Product Price” in the Elementor widget panel.
• Drag and drop the Product Price TP widget onto your page canvas.
• 🔄 Tip: It includes the TP badge, which means it’s from the Topper Pack.

Step 2: Configure Price Settings

• Under the Content → Settings section:
  • Toggle Select Specific Product to “Yes” to manually choose a product, or leave it as “No” to automatically fetch the current product (e.g., on a product page).
  • Toggle Link to Product Page to “Yes” to make the price clickable, directing users to the product page.
  • Set Custom Price (e.g., “Enter custom price”) to manually override the product price if needed.

Step 3: Style the Price Display

• Under the Style → Price section:
  • Adjust Alignment to position the price (e.g., left, center, right).
  • Customize Typography to set font size, weight, and style for the price.
  • Set Color for the price text, and optionally set a Hover Color for interactive effects.
  • Adjust Margin and Padding to control spacing around the price (e.g., top, right, bottom, left).

Step 4: Style the Previous Price (Sale Price)

• Under the Style → Previous Price section:
  • Customize Typography, Color, Margin, and Padding for the previous price (e.g., the original price before a discount).

✅ Final Preview and Save

Once your product price settings and style options are applied:

• Click Preview Changes to see how it looks.
• Hit Publish or Update to save your page.