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.

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:

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:

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: