WooCommerce Single: Product Price

The Product Price widget in JupiterX is an essential tool for any eCommerce site. It displays the cost of your items, helping customers make purchasing decisions. In a store, each product typically has a regular price displayed prominently. When items are on sale, the sale price is also shown, often with the regular price crossed out to highlight the discount being offered. This visual helps customers see the value they're getting. The JupiterX Product Price widget allows you to control how these prices appear on your site.

When you use JupiterX to build your single product pages, this widget gives you the flexibility to showcase your product prices in a way that aligns with your brand's style and enhances customer experience.

Customizing the Product Price

Step 1: Accessing the Product Price Widget

• Begin by opening your single product template in the Elementor editor.
• From the Elementor panel, search for the "Product Price" widget. Once you find it, drag and drop it into your layout.

Step 2: Styling the Price

Personalize the look of your product price with these settings:

• Alignment: Set the text alignment to left, center, or right to match the layout of your product page.
• Color: Customize the color of the regular price using the color picker tool.
• Typography: Fine-tune the appearance of the price text with options like font family, size, weight, text-transform, style, text-decoration, line-height, and letter spacing.

Step 3: Customizing the Sale Price

Make your sale prices stand out with their own custom settings:

• Color: Choose a distinct color for sale prices to differentiate them from regular prices.
• Typography: Adjust the font settings to ensure the sale price grabs attention.
• Stacked: Decide if you want to show the sale and regular prices stacked (one on top of the other) or inline.
• Spacing: If you choose to stack prices, set the spacing between them for a tidy look.

Each of these customization options gives you the power to create a pricing display that feels intuitive and engaging for your customers. Whether you prefer a minimalistic design or something bold and vibrant, the Product Price widget in JupiterX has you covered.

In summary, the JupiterX Product Price widget not only serves a practical purpose by communicating the cost of goods to your customers, but also provides you with the creative freedom to ensure every element of your product page looks just right. By following the steps outlined above, you can create a pricing display that perfectly fits your brand and enhances the shopping experience for your users.