How to Apply Custom CSS to the Product Field

When creating forms in a Classic Form Layout, you’ll have an option to design your forms with Custom CSS codes. It’s one of the cool features in the Form Builder that allows you to customize the overall look of your form, including the Product Field.

Hide the Free Text

The Free text appears when you add a product with no price. You can hide it with the below custom CSS codes:

.freeCurr + span {
    display: none !important;
}

Display Sub Products by Default

The form hides the Sub Products by default when you opt to create it in the product item. Your users will need to select the product item before they’re displayed. To display the Sub Products by default, inject the custom CSS codes below:

.sub_product .form-product-child-table {
    display: block !important;
}

Change the Color and Size of the Item Price

You can change the color and size of the product item’s price with the below custom CSS codes:

.form-product-details {
    color: #ff6a00 !important;
    font-size: 20px !important;
}

Change “ff6a00” with hex codes of the color you want, and do the same for the size from 20px to your preferred size. For Hex and RGB codes, we recommend Google Color Picker.

Change the Color and Size of the Sub Total, Tax, Shipping, and Total

The total area includes the Sub Total, Tax, Shipping, and Total. You can customize these items at once or individually. To change the appearance at once, inject the below custom CSS codes:

.payment_footer .total_area * {
    font-size: 19px !important;
    color: #ff6a00 !important;
}

To individually customize the items, use the following custom CSS codes:

/* Void the current font size of the total area */
.payment_footer .total_area * {
    font-size: unset;
}

/* Sub Total and Amount */
#subtotal-text {
    font-size: 20px;
color: ff6a00;
}
#subtotal-text + .form-payment-price {
    font-size: 20px;
    color: ff6a00;
}

/* Tax and Amount */
#tax-text {
    font-size: 20px;
color: ff6a00;
}
#tax-text + .form-payment-price {
    font-size: 20px;
    color: ff6a00;
}

/* Shipping and Amount */
#shipping-text {
    font-size: 20px;
color: ff6a00;
}
#shipping-text + .form-payment-price {
    font-size: 20px;
    color: ff6a00;
}

/* Total and Amount */
#total-text {
    font-size: 20px;
color: ff6a00;
}
#total-text + .form-payment-price {
    font-size: 20px;
    color: ff6a00;
}

Remove the Border of the Product Items

When enabling the product column layout, the products have borders around there. You can remove the border with the following custom CSS codes:

.form-product-item {
    border: none !important;
}

Change the Background Color of the Selected Product Items

When you select a product item, the background color of its container will change. Inject the below custom CSS codes if you want that change:

/* When you hover the product item */
.form-product-item.new_ui.hover-product-item:hover {
    background: rgba(85, 115, 215, 0.06);
    background-color: rgba(85, 115, 215, 0.06);
}
/* When the item is selected */
.form-product-item.p_selected {
    background: rgba(85, 115, 215, 0.06);
    background-color: rgba(85, 115, 215, 0.06);
}

Change the Color and Size of the Product Description

Use the following custom CSS codes to change the color and size of the product description:

.form-product-item .form-product-container .form-product-description {
    color: ##43464e;
    font-size: 14px;
    opacity: .6;
}

The text has an opacity, so you may also consider adjusting that. You can put “1” if you want to remove the opacity.

Adjust the Color and Size of the Category Title

Inject the following custom CSS codes to change the color and size of the category title:

.form-product-category-item {
    font-size: 18px;
    color: #18bd5b;
}