Kadence Teaching: Kadence Shop Kit Plug-in - Product Badge Functionality

Kadence Shop Kit The plug-in is WooCommerce The store offers powerful extensions, with the product badge feature standing out. With customized badges, merchants canHighlight important information about the product, such as promotions, inventory status, or other featured attributes. These badges can help merchants increase product visibility, capture customers' attention and enhance the shopping experience.

What is the Product Badge feature of the Kadence Shop Kit?

Kadence The Shop Kit plugin's product badging feature allows merchants to display key information about their products through customizable badges. For example, merchants can use badges to mark specials, show stock shortages, or highlight new products.Badge styles,placementrespond in singingelementAll can be flexibly adjusted to be consistent with the overall design of the store.

Add New Badge

With the Kadence Shop Kit's product badge feature enabled, merchants can easily add them. Simply follow the steps below:

• Enter the badge management interface
  Navigate to WordPress Backstage, click "Products" -> "Badges".. On that page, click on the top "Add New Badge" button to start creating a new badge.

• Select badge type
  When creating a new badge, merchants need to select a badge type. The badge type determines the style and appearance of the badge. Refer to the followingKadence Courtesy of Shop KitfourWith the main badge types, merchants can choose the most suitable type according to their needs.

Badge type

The Kadence Shop Kit offers four badge types, each catering to different store needs, which merchants can choose from on a case-by-case basis:

• Image badge type
  This type allows merchants to use pre-made images provided by Kadence as product badges. These images can be easily applied to products to identify promotions, specials, or other special information.

• Customized image badge types
  Merchants can upload their own images as product badges and fully customize the look of the badge. This allows merchants to design unique badge images based on their brand style.

• Customizing text badge types
  Merchants can customize the text badge by entering the desired text and setting the text style. This type also supports dynamic options to display different text based on different attributes of the product (e.g. discount, quantity, etc.).

• Custom HTML badge types
  customizable HTML Badges allow merchants to customize badge content using HTML code or a WYSIWYG (What You See Is What You Get) editor. Merchants can insert text, images or other multimedia content, providing maximum flexibility in designing and displaying badges.

Badge Image Settings

Badge Location
Merchants can use the badge position settings to determine where the badge will be displayed on the product.

maximum width
Merchants can set the maximum width of the badge on a single product page to ensure that the badge is not too large to affect the aesthetics of the product display.

Maximum Width Cycle
For recurring items, such as product listings in an archive page, merchants can set a different maximum width than for individual product pages to accommodate different display needs.

margin
Set the margins around the badge in pixels to ensure that there is enough space between the badge and the surrounding content.

padding
Merchants can also set a padding value inside the badge, in pixels, to add more internal margins to the content of the badge, making it stand out more visually.

Graphic Design Settings

The Kadence Shop Kit plug-in provides a variety of image design setting options that allow merchants to further customize the appearance of their product badges to better match their store's design style and brand image.

color
utilization Kadence When image badges are provided, merchants can adjust the color of the badge as needed.

background color
Merchants can add a background color behind the badge background to enhance the visibility and aesthetics of the badge.

Border radius
Setting the border radius rounds the corners of the product badge, providing a softer visual effect.

Border width
Merchants can set the border width of the product badge in pixels.

Border Color
If the merchant chooses to use a border, the border color can be custom adjusted to ensure that the badge's border coordinates with the overall page design, providing better visual appeal and control.

Badge Image
When selecting a custom image badge, merchants can use this setting to upload or add media files to be used as images for product badges. This allows merchants to use images of their own design to enhance their brand identity.

Badge Location
Merchants can set the position of the badge on the product image, with choices including bottom right, bottom left, center, top right, or top left position options. This allows merchants to optimize the badge's display to their needs and ensure it catches the customer's attention.

maximum width
Merchants can set the maximum width to control the size of the custom image badge, limiting it to no more than a specified pixel value. This setting is mainly applicable to single product pages to prevent the badge from being too large and affecting the display of the product.

Maximum Width Cycle
For archived pages or other WooCommerce Related to the product loop, merchants can set different maximum widths to accommodate different page display needs and make the badge size more compatible with the page layout.

Margins and padding
By adjusting margins and padding (in pixels), merchants can further optimize the placement and presentation of badges. Margins help adjust the distance between the badge and surrounding content, while padding increases the space inside the badge, making it more eye-catching.

Badge Visibility Settings
Merchants can determine the scope of badge display through badge visibility settings. For example, merchants can choose to have badges displayed only on specific products, promotional products, or low-stock products, thus increasing the relevance and effectiveness of badges.

background color
Background colors can be added to the badges to make them more visible on product images.

Border radius
Setting the border radius rounds the corners of the badge and enhances the visual softness of the badge.

Border width
Border width of the badge can be set as desired (in pixels)

Border Color
When border width is enabled, you can customize the color of the border.

Badge text
When using text badges, you can enter the content to be displayed in the badge text settings. This text will be displayed directly on the product badge for communicating promotional messages or product status.

Badge Location
Merchants can place text badges in a variety of locations on product images, including:

• lower right
• lower left
• interlocutory
• upper left
• upper right
  The choice of different positions helps in flexible layout according to the page design.

maximum width
Set the maximum width of the badge in pixels on a single product page to prevent the badge from detracting from the overall aesthetics due to more text.

Maximum Width Cycle
For product listing pages (e.g., store home page, category pages, etc.), different maximum widths can be set to ensure that the badge is displayed consistently across various pages.

Margins and padding
Merchants can further control the placement and internal white space of badges by setting Margin and Padding. Proper spacing helps to enhance the visual effect, making the badge more readable and recognizable on the page.

Badge Visibility Settings
Supports specifying the display range of badges. For example, display only under promotional products, out-of-stock products, or certain categories to facilitate accurate message delivery.

color
Set the primary color of the text to control the display color of the text on the badge.

background color
Add a background color to the badge to make the text clearer on the product image.

font size
Specifies the font size (in pixels) of the text.

Font Styles
You can select the style of the text, such as bold (Bold).

text alignment
Sets the alignment of the text inside the badge.

Border radius
Set the border rounding value to soften the corners of the badge.

Border width
Controls the thickness of the badge border in pixels.

Border Color
When border width is enabled, you can set the border color.

Badges HTML Content Editing

• Add text, HTML or media files directly to the editing area to display more complex content structures.
• Click the "Add Media" button to insert pictures or other media files into the badge.
• Use the Visual tab to edit HTML content in WYSIWYG mode for a more intuitive view.
• Switch to the "Text" tab to enter plain HTML code and freely control the badge structure and style.

Badge Location

Support for positioning HTML badges in the following product image areas:

• lower right
• lower left
• interlocutory
• upper left
• upper right

maximum width

Set the maximum width of the badge on a single product page in pixels to prevent the size of the badge from being too large and affecting the page layout.

Maximum Width Cycle

Different maximum widths can be set for product circulation pages (e.g. store listings, category pages) to ensure good visual effects in various display scenarios.

Margins and padding

Adjustable margin values control the spacing between the badge and product content.

Setting the fill value increases the space for text or elements inside the badge and improves visual clarity.

Badge Visibility Settings

Supports control over which products the badge is displayed on, such as specific categories, promotional items, or items with matching inventory status, for more precise display control.

background color
Background colors can be added to the badge to enhance its contrast on the product image, making the content more eye-catching and improving readability and visual appeal.

Border radius
Setting the border radius gives the badge a rounded edge.

Border width
This option is used to set the thickness (in pixels) of the badge border.

Border Color
With borders enabled, you can customize the color of the borders to coordinate with the badge content and website color scheme, further enhancing overall visual consistency.

general visibility

Determines the overall display position of the badge on the page and contains the following options:

• Product cycle only: Badges are only displayed on product listing pages (e.g. store home page, category page).
• Product cycles and single products: Badges are displayed on both product listing pages and individual product detail pages.
• Single product only: Badges are only displayed on individual product detail pages.

Product Visibility:Use this setting to determine on which products the product badge is visible.

Article Status

Status:This indicates the status of the product badge. Product badges can be saved as published, draft, or pending review posts.

Visibility

Visibility:Specify the visibility of the product badge, which can be set to Public, Password Protected, or Private. Note that password-protected and private badges are not displayed on the front end.

Badge Priority Setting (Order)

In "Article Properties(Post Attributes)", you can set the priority of the badge:

• The higher the number, the higher the priority.
• When multiple badges act on the same product, the higher priority badge will override the lower priority badge.
• Enables multiple badges to co-exist while avoiding conflicts.