> For the complete documentation index, see [llms.txt](https://docs.kaliumtheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kaliumtheme.com/post-types/woocommerce/general-settings/product-badges.md).

# Product Badges

Customize these badges to fit your store's design and effectively draw attention to important product details. You can find these settings under **Appearance -> Customize -> WooCommerce -> General Settings -> Product Badge**, the options are explained below.

<figure><img src="/files/dUsoISvUbCmS3EtJYcSY" alt=""><figcaption></figcaption></figure>

## Badge Style

Customize the appearance of your product badges by selecting from the following styles:

<figure><img src="/files/3HLJOl2TXNLbPx2tKDrc" alt="" width="340"><figcaption></figcaption></figure>

#### Normal

A standard badge shape.

* **Upper Case**: Toggle this option to automatically convert badge text to uppercase.
* **Outline**: Toggle to switch between an outlined version or a filled badge.

<div><figure><img src="/files/kneg6NNGxo8onkGxsoxZ" alt="" width="334"><figcaption><p>Default Badge</p></figcaption></figure> <figure><img src="/files/eNoohcYNo7IFC9OLI4gJ" alt="" width="336"><figcaption><p>Outlined Badge</p></figcaption></figure></div>

#### Circle

A circular badge style.

* **Upper Case**: Toggle this option to automatically convert badge text to uppercase.
* **Size**: Adjust the size range of the badge.
* **Radius**: Set the border radius for a more rounded badge.
* **Fixed Size**: Toggle to maintain a fixed size, preventing the badge from resizing with text. This is particularly useful for badges with longer texts, such as "Out of stock."

#### Triangle&#x20;

A triangular badge that can be used on the edges of the image.

* **Upper Case**: Toggle this option to automatically convert badge text to uppercase.
* **Size**: Adjust the size range for the badge.

### Sale Badge

Options related only to the sale badge

<figure><img src="/files/q759G9ck4IXgAxv7UA7e" alt="" width="338"><figcaption></figcaption></figure>

**Show as Percentage**: Toggle this option to display the sale discount as a percentage instead of the default "SALE!" text. This provides a clear view of the discount offered.

Here is an example of how they look:

<div><figure><img src="/files/LbHOrWiO5XJngIi6FHNY" alt="" width="72"><figcaption><p>Sale Badge With<br>Percentage  </p></figcaption></figure> <figure><img src="/files/Gy1PE1tLpVTJbyunGmqY" alt="" width="74"><figcaption><p>Default WooCommerce <br>Sale Badge</p></figcaption></figure></div>

## Enabled Badges

Select which badges you want to display on your products:

<figure><img src="/files/F7JA3iXhAfqeYNPOumri" alt="" width="334"><figcaption></figcaption></figure>

* **Sale**
* **Featured**
* **Out of Stock**
* **Backorder**

## Style

Customize the colors for each badge type:

<figure><img src="/files/8H9P4FXdPpT0GcCtMBwn" alt="" width="349"><figcaption></figcaption></figure>

* **Sale**: Choose the text color and background color for sale badges.
* **Featured**: Select the text color and background color for featured product badges.
* **Out of Stock**: Adjust the text color and background color for out-of-stock badges.