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.

What Are CSS Classes?

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.

Each element 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:

Custom Classes setting

But these classes should be defined in your WordPress beforehand.

How to define Custom (Additional) Classes on WordPress?

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

1. Open Additional CSS tab:

The location of the Additional CSS tab may vary based on your theme.

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

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

.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

1. Here is the result of our changes:

BEFORE

AFTER

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