How To Use The Barcode Widget By Atomic Addons

The Barcode widget by Atomic Addons turns a number or a piece of text into a barcode that a scanner can read, such as a product code, a ticket number or a coupon. You pick the barcode format, type the value and choose whether the value appears as a label under the bars. The barcode is drawn in the browser as a sharp vector image that scales down on small screens. This guide covers adding the widget, setting the value and styling the bars and the label.

Enable the Barcode Widget

Barcode is a Free widget and works with the free Atomic Addons plugin. 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 Barcode. You can also open the Content category.

4. 4

   Turn the Barcode widget on.

5. 5

   Click Save Settings.

Add the Barcode Widget

Barcode works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Barcode. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Barcode

Open the widget and go to Content → Barcode:

1. 1

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

2. 2

   Format: The barcode standard. AUTO, the default, is CODE128, which takes any letters, digits and symbols. The others are EAN-13, EAN-8, EAN-5, EAN-2, UPC, PHARMACODE, CODABAR, MSI and ITF14.

3. 3

   Content: The value the barcode holds, “1234” by default. It accepts dynamic tags, so it can come from a custom field.

4. 4

   Show Label: Prints the value as text with the bars. On by default.

5. 5

   Override Label: With the label on: shows different text in place of the value.

6. 6

   Label Text: With Override Label on: the text to show. The bars still hold the Content value.

Each format accepts only certain values, as the warning under Content says. EAN-13, for example, needs 12 or 13 digits, EAN-8 needs 7 or 8, UPC 11 or 12, ITF-14 13 or 14, EAN-5 exactly 5 and EAN-2 exactly 2, while MSI takes only digits. Leave Format on AUTO unless a scanner or a retailer asks for a specific standard.

Style the Barcode

The Style tab has two sections:

• Barcode — Line Color for the bars, Background behind them (transparent by default), Width of a single bar (2px by default), Height of the bars (40px by default) and Padding around the barcode.
• Label — shown while Show Label is on: the label's Color, Position (top, or bottom by default), Alignment under the bars (center by default), Font Width (Normal, Bold, Italic or Bold & Italic) and Space Between the label and the bars.

A light Background with some Padding helps a scanner read the bars when the page itself is dark.