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.
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:
- Permanent Assignment: Badge is permanently assigned to a product
- Temporary Display: Badge is displayed temporarily via shortcode parameter
Managing Badges
Badges are managed via the admin menu ASA2 → Products → Badges.
Creating Badges
- Navigate to ASA2 → Products → Badges
- Click "Create new badge"
- 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
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
- Open a product for editing
- Find the Badge metabox in the right sidebar
- Select a badge from the dropdown list
- 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
- Shortcode Parameter (highest priority)
- Permanent Product Assignment (fallback)
- No Badge (default)
Template Integration
Badge data is available in templates via special placeholders. Detailed information can be found at Placeholders Badges.
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 Placeholders Badges.
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:
- Shortcodes - All available shortcode parameters
- Placeholders Badges - Complete badge placeholder reference
- Managed Templates - Template system overview
- Collections - Badge usage in collections