How to Display WooCommerce Product Pricing in Elementor
The Product Price widget allows you to display WooCommerce product prices inside Elementor product templates. This widget is used when building custom WooCommerce product pages with Elementor.
The widget automatically pulls the product price from WooCommerce and displays it inside the layout. You can customize price styling, sale price styling, spacing, and alignment using Elementor settings.
This widget is commonly used when designing custom WooCommerce product pages with Elementor Theme Builder.
Part of WooCommerce Elementor Widgets #
The Product Price widget is part of the WooCommerce widget collection available in Spexo Addons. These widgets help you build custom WooCommerce product layouts, shopping experiences, and product templates in Elementor.
You can explore the complete list on the WooCommerce Elementor Widgets page.
When to Use the Product Price Widget #
The Product Price widget is used when creating custom WooCommerce product templates in Elementor. It displays the product price dynamically from WooCommerce.
This widget is usually placed below the product title in a product page layout. It works well with widgets like Product Title, Product Media, Product Rating, and Product Add to Cart.
Requirements #
Before using the Product Price widget, make sure the required plugins and product settings are ready. This widget only works inside WooCommerce single product templates.
- WooCommerce plugin installed and activated
- Products created in your WooCommerce store
- Product pricing added in WooCommerce
- Elementor product template created
- Spexo Addons plugin installed and active
This widget works inside Elementor product templates created with the Theme Builder.
How to Add the Product Price Widget #
Follow these steps to add the Product Price widget inside an Elementor product template.
- Open the WooCommerce product template in Elementor.
- Search for the Product Price widget in the Elementor widget panel.
- Drag the widget into your product page layout.
- The widget will automatically display the WooCommerce product price.
After you complete this step, the Product Price widget will appear inside your Elementor product template layout.
Style Settings #
To customize the Product Price widget design, click the Style tab in the Elementor panel. You will find styling options for price, sale price, and content spacing.
Price #
From this section, you can change the regular price color and typography. These settings help you match the price design with your WooCommerce product page layout.
Sale Price #
From this section, you can change the sale price color, typography, and spacing. You can also enable or disable stacked price display based on your design needs.
Content #
From here, you can change alignment and bottom spacing for supported devices. This helps you control how the price block fits inside the product template layout.
Common Issues and Fixes #
If the product price does not appear in the editor, make sure you are editing a WooCommerce single product template. This widget will not display dynamic product data on a normal page.
If the price is missing, check that the product has a regular price or sale price added in WooCommerce.
If the widget does not appear in the Elementor panel, review the Configuring Widgets documentation and confirm that the widget is enabled.
Related WooCommerce Widgets #
The Product Price widget is often used with other WooCommerce widgets to build a complete product page layout in Elementor. These widgets help you create fully customized WooCommerce product templates.
Related Documentation #
You can review these guides to build better WooCommerce and Elementor layouts with Spexo Addons.
Frequently Asked Questions #
Why is the product price not visible in Elementor? #
The Product Price widget only works inside WooCommerce single product templates. It will not show dynamic product data on regular pages.
Can I show regular price and sale price? #
Yes. The widget supports both regular price and sale price styling when the product has pricing configured in WooCommerce.
Can I style the product price? #
Yes. You can change typography, color, spacing, and alignment from the Style tab in Elementor.
Getting stuck? Feel free to Contact Our Support for further assistance.
Navigation:
