# 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="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FnKjDHamTFwdkf9ZBWs6F%2Fwoocommerce-general-settings-badges-1.jpg?alt=media&#x26;token=a1c5b040-0bb4-437b-9ba0-c780d1590b7d" 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%2F1w9Hx22p1aDzdGjc3Gyh%2Fwoocommerce-general-settings-badges-layout.jpg?alt=media&#x26;token=3a02cf1d-f31b-42f8-9120-a33d545e770b" 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%2FgDNJXBIf6YK5UwFmXc8r%2Fwoocommerce-general-settings-badge-default.jpg?alt=media&#x26;token=d208b3b0-a6f6-476c-82ce-cac4f95c7441" 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%2FO6LADWkKlL2Yjhora9to%2Fwoocommerce-general-settings-badge-default-outline.jpg?alt=media&#x26;token=cdef9245-4a7d-43cb-8075-cea99235b215" 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="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FRBztnnAsTufJJQ5noteI%2Fwoocommerce-general-settings-badges-percentage.jpg?alt=media&#x26;token=007e954b-4554-48f3-9e71-4c70ff355fa0" 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%2FzFH2ZgVk85jFLFVHIQzA%2Fsale-badge-percentage.jpg?alt=media&#x26;token=dc0bec44-cfdd-41f8-8289-0ee8f67284b8" 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%2FwSP1yHvTjPuKi1Q2K8vC%2Fsale-badge.jpg?alt=media&#x26;token=dc1852a5-ea92-414d-8839-5393032cc1ba" 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%2FSSv2WzFTltdSJE7iwabZ%2Fwoocommerce-general-settings-badges-enabled.jpg?alt=media&#x26;token=c1c614cd-4507-45cf-9fd8-5d196b3f5f5d" 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%2F8yrIgOo9G7FRGGO6OinS%2Fwoocommerce-general-settings-badge-style.jpg?alt=media&#x26;token=b0b1c957-0b6f-4331-a69f-7a096f88f4e6" 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.