> 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

The Sale, Featured, Out of Stock and Backorder labels on your products.

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="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-147999626db2db5e2fb45583ab280cd2b765437a%2Fwoocommerce-general-settings-badges-1.jpg?alt=media" alt=""><figcaption></figcaption></figure>

## Badge Style

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

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-dfa1226b931ad0c5e0546354f2f3011ce5f13968%2Fwoocommerce-general-settings-badges-layout.jpg?alt=media" 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="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-12f94bf0013a9a15fee8df5541f3e80ed56e446e%2Fwoocommerce-general-settings-badge-default.jpg?alt=media" alt="" width="334"><figcaption><p>Default Badge</p></figcaption></figure> <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-1b4e5ee16f1160790c3181ce4ae2dba998680a14%2Fwoocommerce-general-settings-badge-default-outline.jpg?alt=media" 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.
* **Square Size**: Toggle to keep the badge square, so it does not stretch with longer text such as "Out of stock."

#### Triangle

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="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-01dd053782c7ca1b352f07eb1308a8becf428b07%2Fwoocommerce-general-settings-badges-percentage.jpg?alt=media" 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="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-e723a7115fbab262b19e338339216ced639a58b2%2Fsale-badge-percentage.jpg?alt=media" alt="" width="72"><figcaption><p>Sale Badge With<br>Percentage</p></figcaption></figure> <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-9e28ae419b5b3923ce8915966a9a6e3ac376bead%2Fsale-badge.jpg?alt=media" 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="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-cf48f243ad11620fbcfe2c97b6563760811b8931%2Fwoocommerce-general-settings-badges-enabled.jpg?alt=media" alt="" width="334"><figcaption></figcaption></figure>

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

## Style

Customize the colors for each badge type:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-4b8a2d2fe8de040d5224582c132fbc03eaf71007%2Fwoocommerce-general-settings-badge-style.jpg?alt=media" 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.
* **Backorder**: Set the text color and background color for products on backorder.