There are two types of fields in WooCommerce: product and checkout fields. And you can personalize both of them! In this article, you'll learn how to assign a custom field class and use CSS to style the WooCommerce checkout page. I will be customizing WooCommerce checkout page fields with CSS with the free design plugin as well.
In general, there is no easy way to personalize checkout or product fields in WooCommerce. So you need to use default fields & their classes. But if you want to assign a CSS custom field class to any checkout or product field, you need a plugin.
➡️In this guide, you'll learn how to change the look of the WooCommerce checkout page & product fields. Look at the default Upload field:
🎉 You can change its look to this:
That's just an example of the use of custom CSS with the WooCommerce checkout page design. Learn how to easily customize the checkout and product fields with CSS and free plugins! Let's begin!
Table of contents
- Free plugins to personalize fields in WooCommerce
- Customizing the WooCommerce checkout page with CSS
- Use custom CSS for the new product fields
- Add CSS rules to your theme
- Plugin features
Free plugins to personalize fields in WooCommerce
So, let's start with these two FREE plugins that will help you adjust the fields and the design of checkout and product pages in WooCommerce!
Flexible Checkout Fields
Flexible Checkout Fields WooCommerce
Edit, add new or hide unnecessary fields from the WooCommerce checkout form. It's all about conversions and better user experience.Download for free or Go to WordPress.org
Flexible Product Fields
Flexible Product Fields WooCommerce
Create a product wizard to sell engravings, gift wrapping, gift messages, business cards, stamps and optionally charge for it (fixed or percentage).Download for free or Go to WordPress.org
Download one or both of them using the links above to continue with this guide.
Customizing the WooCommerce checkout page with CSS
Let's begin with Flexible Checkout Fields.
Assign a CSS custom field class to any field
Once you install and activate the plugin, go to WooCommerce → Checkout Fields.
Open the Checkout Section to edit the fields
Now, select a field by simply clicking its name. You will see 6 tabs.
Choose the Appearance tab
You may set your CSS class here:
Add custom CSS for the WooCommerce checkout page
So, you have now this new CSS class that you can use for the field to personalize the WooCommerce checkout page design. Scroll down to an example ↓
Use custom CSS for the new product fields
👉🏼 Next, let's see how it works for Flexible Product Fields. By default, there are no product fields in WooCommerce. So, first you need to create additional product fields so that you can style them.
Install and activate the plugin
First, get the free plugin to start customizing the product fields in WooCommerce.
Configure the fields
Then, go to Products → Product Fields:
Add new fields
Now, let's create a group of fields with a field inside.
This is how it looks like on the product page:
💡 If you need more help with that, check out our WooCommerce Extra Product Options Guide →
Set the CSS class for the field
Here, you will find a CSS Class option inside a field's configuration screen.
Personalize the product page with the theme customizer
Finally, open the Appearance tab → Customize to add custom CSS rules (like in the example below).
You've just learned how to set your styling for both checkout and product fields in WooCommerce. 🎉
Add CSS rules in your theme (for the WooCommerce checkout page)
To add custom CSS go to the Appearance menu → Customize.
Use the Additional CSS section to add custom styling to your WordPress theme.
Let's say we want to style the radio button field.
➡️ We need a CSS class. I've added one called example-class. As you may see below, I also wrote some code for fieldset, legend, and label elements:
This code lets me transform this field:
Into such a beauty like this 🤤 :
OK. Maybe it's not the most beautiful radio button out there but I like it 😉
➡️ Anyway, you get the idea. The plugin assigns your CSS custom field class to the field's div:
➡️ If you want to customize elements inside this div, you need to call them like this:
for a legend element:
➡️ That's because this element is nestled inside the div and a fieldset element:
Let's see quickly what features & field types are available in the free and PRO versions of two plugins.
Flexible Checkout Fields
In short, Flexible Checkout Fields lets you create custom fields in WooCommerce. Also, with this plugin, you can edit or rearrange default WooCommerce checkout fields. For example, you can disable address fields if you sell digital products. You may use the plugin to design a WooCommerce checkout page with a bit of CSS too! 😊
Almost 80,000 stores worldwide use this plugin daily with 4.6 out of 5 stars ratings.
The free version lets you create:
- Single Line Text
- Paragraph Text
Here is a video, which is a recap of what you will find in the free version of Flexible Checkout Fields:
With the PRO version, you can create:
- Radio button
- Select (Drop Down)
- Color Picker
- HTML or plain text
- File Upload
But there is much more, for example, if you want to hide some fields based on custom conditions or validate the checkout fields! Visit the product page to see all features.
Flexible Checkout Fields PRO WooCommerce £59
Edit, add new or hide unnecessary fields from the WooCommerce checkout form. It's all about conversions and better user experience.Add to cart or View Details
Flexible Product Fields
This plugin lets you customize your WooCommerce product page with ease.
The free version lets you add the following product fields:
- Radio button
- Radio with images
- Radio with colors
This video is a recap of all features available in the free version:
In short, this plugin lets you create product add-ons. You can add new custom fields to the products in your WooCommerce store.
The PRO version lets you add:
- Date field
- File Upload field
And, additionally, allows you to use:
- Order group,
- WooCommerce custom price fields (assigning a fixed or percentage price to a field),
- Conditional logic,
- Quick support via e-mail,
- Duplicating field groups,
- And more.
You should check out that guide with a lot of use cases. We guide users step-by-step through the configuration to implement:
- Simple booking system,
- Gift wrapping feature,
- Catering diet wizard,
- Computer wizard etc.
Visit the product page to see all features of the plugin.
Flexible Product Fields PRO WooCommerce £59
Create a product wizard to sell engravings, gift wrapping, gift messages, business cards, stamps and optionally charge for it (fixed or percentage).Add to cart or View Details