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;
}
Send Comment:
2 Comments:
105 days ago
how can i change the size of the input field box with CSS code?
More than a year ago
I put in this CSS code and all the price tags are now gone on all the items not just the chosen ones for titles.
What did I do wrong?