How To Use The Product Meta Widget By Atomic Addons

The Product Meta widget by Atomic Addons shows the product's SKU, categories and tags in a product page design, the details WooCommerce lists under the add to cart button. Categories and tags link to their product archives. You show the details in a row or as a list and style the labels, the SKU and the links. This guide covers adding the widget, what it shows and its style settings.

Enable the Product Meta Widget

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

4. 4

   Turn the Product Meta widget on.

5. 5

   Click Save Settings.

Add the Product Meta Widget

The widget belongs in a Theme Builder template for products, usually under the add to cart button:

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 Meta 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 details; 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

It prints WooCommerce's product meta block, which lists:

• SKU — when the product has one. A variable product without its own SKU shows “SKU: N/A”.
• Category or Categories — the product's categories, comma-separated.
• Tag or Tags — only when the product has tags.

Plugins that add to WooCommerce's meta block show here too, such as the Brand line of WooCommerce Brands.

Style the Product Meta

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

1. 1

   View: Inline, the default, puts the details side by side and wraps them onto the next line when they run out of room. List stacks them. Set it per screen size.

2. 2

   Gap: The space between the details, 8px by default.

3. 3

   Text / Link: Two tabs: Text styles the labels and the SKU, Link styles the category and tag links.

4. 4

   Color: The labels, such as “SKU:” and “Category:”.

5. 5

   SKU Color: The SKU itself, gray by default.

6. 6

   Typography: The text of the whole block.

The Link tab has Color (gray by default), Hover Color and Typography for the links. Its Typography also applies to the SKU.