How To Use The Product Price Widget By Atomic Addons

The Product Price widget by Atomic Addons shows the product's price in a product page design, formatted the way WooCommerce formats it. A product on sale shows its old price struck through beside the new one, and a variable product shows its price range. You style the regular and sale price separately. This guide covers adding the widget, what it shows and its style settings.

Enable the Product Price Widget

Product Price is a Pro widget and needs Atomic Addons Pro and WooCommerce. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Product Price. You can also open the WooCommerce category.

4. 4

   Turn the Product Price widget on.

5. 5

   Click Save Settings.

Add the Product Price Widget

The widget belongs in a Theme Builder template for products, under the Product Title widget:

1. 1

   Go to WordPress Dashboard → Atomic Addons → Theme Builder.

2. 2

   Click Add New and choose the Single Product card.

3. 3

   Give the template a name and open it in Elementor. Its display condition is already set to WooCommerce → Product, so it applies as soon as you publish it.

4. 4

   In the widget panel, search for Product Price and drag it into the template. The widget sits in the Atomic Addons Pro (Single) category.

5. 5

   Design it with the controls below, then click Publish.

In the editor the template previews a sample product: the one picked under Builder Settings → Builder Post in the template's page settings (click Apply & Preview), or your newest product if none is picked. On your store, each product page shows its own price; anywhere else the widget falls back to your newest product. The widget appears in the panel only while you edit a Theme Builder template, a saved Elementor template or a product.

What the Widget Shows

• Regular price — the product's price.
• On sale — the regular price struck through, then the sale price.
• Variable product — the lowest and highest variation prices, such as “$119.00 – $160.00”. The price of the option a shopper picks appears in the Add To Cart widget's form.
• Grouped product — the range of the prices of the products in the group.
• No price — nothing.

Because the widget prints WooCommerce's own price, anything that changes that price shows here too, such as the role prices of the Role Based Pricing extension. A role whose price is hidden with Hide Add to Cart and Price sees no price.

Style the Product Price

(Open the full-size image in a new tab)

Select the widget: its controls are on the Style tab, which opens first, in the Product Price section:

1. 1

   Alignment: Left (the default, or right on right-to-left sites), center or right.

2. 2

   Margin: Space around the price, per screen size.

3. 3

   Regular Price / Sale Price: Two tabs with the same two settings. Regular Price styles the price and, for a product on sale, the struck-through old price. Sale Price styles the current price of a product on sale.

4. 4

   Color: The text color for the tab's price.

5. 5

   Typography: Font, size, weight and Elementor's other text settings for the tab's price.