# Custom Classes

The **Custom Classes** setting in the **CCFBW** plugin allows users to customize the appearance of elements by adding **CSS classes.** This feature provides flexibility for users to style elements according to their website’s design.

<details>

<summary>What Are CSS Classes?</summary>

**CSS (Cascading Style Sheets)** classes are used to apply specific styles to HTML elements. By assigning a CSS class to an element, you can control its appearance, such as its color, size, or position, using the class name in your CSS stylesheet.

</details>

[Each element](/checkout-custom-fields-builder-for-woocommerce/checkout-builder-elements/text-field.md) within the Checkout Builder of **CCFBW**  has a field labeled **Custom Class Name in its settings**. Users can input the names of their custom CSS classes into this field to apply specific styles to those elements:

<figure><img src="/files/K9i877UCkA1sDMu4EBKR" alt=""><figcaption><p>Custom Classes setting</p></figcaption></figure>

{% hint style="info" %}
But these classes should be defined in your WordPress **beforehand**.
{% endhint %}

### How to define Custom (Additional) Classes on WordPress? <a href="#how-to-define-additional-classes-on-wordpress" id="how-to-define-additional-classes-on-wordpress"></a>

1. Follow **WordPress Dashboard > Appearance > Themes** and click on the **Customize** button in your active theme:

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

2. Open **Additional CSS** tab:

<figure><img src="/files/4JyYL6viFV8kms7HBpoW" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The location of the **Additional CSS** tab may vary based on your theme.
{% endhint %}

3. Define your CSS classes to the designated area and **Publish** the theme:

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

Here is an example of the CSS classes that hide buttons and change the color of the title of the number field

```css
.custom-style-for-number .woo-item__title span {
  color: red;
}

.custom-style-for-number .input-number-counter {
  display: none !important;
}
```

## How to Add Custom CSS to Elements?

1. Open the element settings and write down the CSS class names without dots (`.`) at the beginning and separate them with spaces. Here is the example input:

```
custom-style-for-number input-number-counter sample-class
```

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

2. Here is the result of our changes:

{% tabs %}
{% tab title="BEFORE" %}

<figure><img src="/files/b5NnvwVrkYJIPYa0KVVn" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="AFTER" %}

<figure><img src="/files/6M3ZpbRQKJiqqMb22By6" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

You can check the CSS classes via **Developer Tools** on your browser:

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stylemixthemes.com/checkout-custom-fields-builder-for-woocommerce/plugin-features/custom-classes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.