Product Badges

Product Badges allow you to mark products with visual indicators to highlight or categorize them. They can be permanently assigned to products or temporarily displayed via shortcode parameters.

Example of a Product Badge in a template

Overview

Product Badges consist of:

  • Display Name: The visible text of the badge

  • Internal Name: Unique identifier for shortcode usage

  • Icon: Selectable icon from the predefined collection

  • Background Color: Badge background coloring

  • Text Color: Badge text color

Badges can be used in two ways:

  1. Permanent Assignment: Badge is permanently assigned to a product

  2. Temporary Display: Badge is displayed temporarily via shortcode parameter

Managing Badges

Badges are managed via the admin menu ASA2 → Products → Badges.

Creating Badges

Form for creating a new Product Badge

  1. Navigate to ASA2 → Products → Badges

  2. Click “Create new badge”

  3. Fill out the required fields:

Required Fields:

  • Display Name: The name displayed in the badge

  • Internal Name: Unique identifier for shortcode usage (auto-generated)

Optional Fields:

  • Icon: Choose an icon from the predefined collection

  • Background Color: Badge background color (default: #ff6a00)

  • Text Color: Text color (default: #ffffff)

Selecting Icons

Icon selection menu for Product Badges

The icon selection menu offers a curated collection of icons in various categories:

  • Awards & Achievements: Trophies, stars, medals

  • Quality & Rating: Thumbs up, ratings

  • Commerce & Shopping: Shopping cart, dollar sign, gift

  • Miscellaneous: Various other icons

You can:

  • Filter icons by categories

  • Use the search function to find specific icons

  • Choose “No Icon” to create a badge without an icon

  • Remove already selected icons with “Remove Icon”

Badge Properties

The badge editing form shows a live preview of the badge as well as available template placeholders and usage examples.

Live Preview

The preview on the right side shows:

  • The badge with current settings

  • Available template placeholders

  • Shortcode and template usage examples

Internal Name

The internal name is automatically generated from the display name but can be manually adjusted. It must be unique and may only contain lowercase letters, numbers, underscores, and hyphens.

Color Selection

Both background and text colors can be selected via WordPress color pickers. Colors are stored as hex codes.

Assigning Badges

There are two ways to assign badges to products:

Permanent Assignment

Badge assignment in the product editing page

  1. Open a product for editing

  2. Find the Badge metabox in the right sidebar

  3. Select a badge from the dropdown list

  4. Save the product

The badge will now be automatically displayed every time this product is shown, unless overridden by a shortcode parameter.

Temporary Display via Shortcode

You can also display badges temporarily via the badge parameter in the shortcode:

[asa2 id="B08N5WRWNW" badge="best_choice"]

The shortcode parameter takes precedence over permanent assignment.

Use Cases:

  • Time-limited promotions

  • Contextual highlights

  • A/B testing different badges

Shortcode Integration

The badge parameter can be used in all ASA2 shortcodes:

Single Products

[asa2 id="B08N5WRWNW" badge="bestseller"]

Collections

[asa2_collection collection_id="123" badge="featured"]

The badge will be applied to all products in the collection.

Badge Priority

  1. Shortcode Parameter (highest priority)

  2. Permanent Product Assignment (fallback)

  3. No Badge (default)

Template Integration

Badge data is available in templates via special placeholders. Detailed information can be found at Badge Placeholders.

Basic Badge Display

{% if hasBadge %}
<div class="product-badge" style="background: {{ BadgeColor }}; color: {{ BadgeTextColor }};">
    {% if BadgeIcon is not empty %}
        <i class="{{ BadgeIcon }}"></i>
    {% endif %}
    {{ BadgeTitle }}
</div>
{% endif %}

Advanced Badge Styling

{% if hasBadge %}
<div class="badge-container">
    <span class="product-badge {{ BadgeIcon ? 'has-icon' : '' }}"
          style="background-color: {{ BadgeBackgroundColor|default('#ff6a00') }};
                 color: {{ BadgeTextColor|default('#ffffff') }};">
        {% if BadgeIcon %}
            <i class="{{ BadgeIcon }}" aria-hidden="true"></i>
        {% endif %}
        <span class="badge-text">{{ BadgeTitle }}</span>
    </span>
</div>
{% endif %}

Available Placeholders

For a complete list of all badge placeholders see Badge Placeholders.

Main Placeholders:

  • {{ hasBadge }} - Checks if a badge is available

  • {{ BadgeTitle }} - Display name of the badge

  • {{ BadgeIcon }} - Icon CSS class

  • {{ BadgeColor }} - Background color (hex code)

  • {{ BadgeTextColor }} - Text color (hex code)

CSS Styling

Example CSS for badge styling:

.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.product-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.product-badge i {
    font-size: 14px;
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .product-badge {
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 15px;
    }

    .product-badge i {
        font-size: 12px !important;
        width: 14px !important;
        height: 14px !important;
    }
}

Practical Usage Examples

Seasonal Promotions

[asa2 id="B08N5WRWNW" badge="black_friday"]
[asa2 id="B07XJ8C8F5" badge="christmas_special"]
[asa2 id="B09G9FPHQT" badge="summer_sale"]

Product Categories

[asa2 id="B08N5WRWNW" badge="bestseller"]
[asa2 id="B07XJ8C8F5" badge="new_arrival"]
[asa2 id="B09G9FPHQT" badge="recommended"]

Quality Labels

[asa2 id="B08N5WRWNW" badge="premium_quality"]
[asa2 id="B07XJ8C8F5" badge="editors_choice"]

Related Topics: