Browse Article by TopicsPurchase Order Sub Category Sub Label Order Form Payment Form CSS
- Order Form Basics
- Order Form Types
- PayPal Forms
- Customize Your Form Using Custom CSS Codes
- How to Stylize Feedback/Lightbox Title?
- Adding Order Form to Facebook
- How to Inject Custom CSS Codes
- Submit Button CSS & CSS3
- How to find field IDs and names
- How to Update the Multiple Payment Form
Related Forum Questions
- I can't upgrade and pay with Paypal because it requires a linked credit card
- Dwolla sign-in form not displaying completely after redirecting on my web page
- How to a set a limit on the number of available products?
- Change Payment Form From Paypal to Pro?
- Can I create an order form with images and with selectable quantities in image picker?
- How do I add payment options to my form?
- Changing the PayPal payment type sub label
- My audio upload on order form isn't uploading/downloading correctly.
- How to access Integration wizard for Dwolla payment field?
- I'm trying to get a recurring payment form made using dwolla.
How to Have Sub-Category or Sub-Labels on an Order FormLast Update: January 28, 2016
Having a long line-up of items or products in your payment and purchase order form?
Wouldn't it be much better if they are organized by having Category grouping or having sub-labels to easily spot them among the long list of items or products?
This guide will show how to add sub-labels in the items/products on a Purchase Order form.
Please follow the steps below:
1. Add items with a price of "0" (Free) to your Purchase Order form. These will serve as the product sub-labels.
2. View the source code of your form to get the label id# of the 'Free items'. Right Click in an empty canvass space in the form and click "View Form Source" or follow this guide: How to Get Form Source Codes.
3.Get the numbers with the 'for' value of the label tag of the 'Free Items'. For example:
In the sample form, the numbers are 1008, 1009 and 1010.
4. Copy those numbers then use it in the CSS guide below (to be injected to your form):
input[id*="input number"] + label > .form-product-details
If you have multiple product, simply duplicate the selectors above (in bold), then separate each with a comma.
input[id*="1008"], input[id*="1009"], input[id*="1010"]
input[id*="1008"] + label > .form-product-details, input[id*="1009"] + label > .form-product-details, input[id*="1010"] + label > .form-product-details
5. Copy your finalized CSS code then inject it to your form by following this guide: How to Inject Custom CSS Codes
Test and preview your form. If done correctly, the form should look and function similar to this form.
For questions, please write it below!