Set Your Own CSS Class to Any Custom Fields in Your WooCommerce Store

There are two types of custom fields: product and checkout fields. You can personalize both of them. All you need is to assign your own custom field class from your CSS file. In this guide, I’ll show you how to make it.

In general, there is no easy way to personalize checkout or product fields. If you want to assign a CSS custom field class to any field, you need a plugin.

In this guide, you’ll learn how to change the look of the fields. Look at the default Upload field:

You can change its look to this:

That’s just an example. You will set your own styling.

There are two great plugins for custom fields:

• Flexible Checkout Fields
• Flexible Product Fields

These plugins let you configure fields and create custom fields, too. You can check out our tutorial: Create Custom Fields in WooCommerce →

Download one or both of them using links above to continue with this guide.

Assign a CSS custom field class to any field

Let’s begin with the Flexible Checkout Fields plugin. Once you install and activate it, go to WooCommerce → Checkout Fields. You will find Edit Section in there:

Now, select a field by simply clicking its name. You will see 4 tabs. Choose the Appearance. You may set your own CSS class there:

Next, let’s see how it works for Flexible Product Fields. There are no product fields by default in WooCommerce. You need to create some and then you can style them.

Go to Products → Product Fields:

Then create a group of fields and a field inside. If you need more help, check out our WooCommerce Extra Product Options Guide →

You will find a CSS Class option inside a field’s configuration screen.

You’ve just learned how to set your own styling for both checkout and product fields.

Create your CSS custom field class

lorem

Example

Let’s say we want to style radio button field.

We need to create a CSS class. I created the 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:

More features of our 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.

Almost 10,000 stores worldwide use this plugin on a daily basis. People’s ratings are 4.6 out of 5 stars.

The free version lets you create:

• Single Line Text
• Paragraph Text

With the PRO version you can create: 

• Checkbox
• Radio button
• Select (Drop Down)
• Date
• Time
• Color Picker
• Headline
• HTML or plain text
• File Upload

Flexible Product Fields

This plugin is a new addition to our line-up. However, it’s getting a huge growth!

In short, this plugin lets you create product add-ons. You can add new custom fields to the products in your WooCommerce store.

The plugin is available for free. You can also upgrade the plugin if you need additional options such as conditional logic.

The types of fields you can add to your products:

• Single Line Text
• Paragraph Text
• Checkbox
• Radio Button
• Dropdown
• Date (PRO)
• Headline (PRO)

We described all these fields in WooCommerce Product Personalization Options Guide →

You should definitely check out that guide! You will find there 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.

Read more: Price based on user role in WooCommerce →