How to Apply Custom CSS to the Product Field

December 7, 2023

When creating forms in a Classic Form Layout, you’ll have the 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.

Note:

The selectors used below are based on the new default theme of the classic form layout. If you’re using a different theme, the selector may be different. If that’s the case or you want customization not mentioned below, reach us by creating a support ticket if you need help.

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;
}
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Anthea - Profile picture
  • Lanaya - Profile picture