How To Use The Product Title Widget By Atomic Addons

The Product Title widget by Atomic Addons shows the product's name in a product page design. You place it once in a Single Product template and every product page fills it with its own name. The widget has no content settings, only styles. This guide covers adding the widget and styling the name.

Enable the Product Title Widget

Product Title 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 Title. You can also open the WooCommerce category.

4. 4

   Turn the Product Title widget on.

5. 5

   Click Save Settings.

Add the Product Title Widget

The widget belongs in a Theme Builder template for products, usually at the top of the product summary:

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 Title 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 name; 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.

Style the Product Title

(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 Title section:

1. 1

   Alignment: Left (the default), center, right or justified. Use the device icon to set it per screen size.

2. 2

   Color: The color of the name.

3. 3

   Typography: Font family, size, weight, line height and Elementor's other text settings.

4. 4

   Margin: Space around the name, per screen size.

The name is printed the way WooCommerce prints it on its own product pages: as a level-one heading (h1). The widget has no setting to change the tag.