How to customize the WooCommerce checkout page & fields with CSS

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!

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
• Customize WooCommerce product & checkout pages easily - feature list 🚀

🚫 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!

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

⭐ See some screenshots that will show you the general functionality of the plugin

Flexible Product Fields

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

⭐ See some screenshots that will show you the general functionality of the plugin

Customizing the WooCommerce checkout page with CSS

Let's begin with Flexible Checkout Fields ⭐.

1. Assign a CSS custom field class to any field

   Once you install and activate the plugin, go to WooCommerce → Checkout Fields.

2. Open the Checkout Section to edit the fields

   

   Now, select a field by simply clicking its name. You will see 6 tabs.

3. Choose the Appearance tab

   You may set your CSS class here:

   

4. 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.

1. Install and activate the plugin

   First, get the free plugin to start customizing the product fields in WooCommerce.

2. Configure the fields

   Then, go to Products → Product Fields:

   

3. 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:

   

4. 💡 If you need more help with that, check out our WooCommerce Extra Product Options Guide →

5. Set the CSS class for the field

   Here, you will find a CSS Class option inside a field's configuration screen.

   

6. 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.

Example

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:

Plugin features

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 90,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
• Textarea
• Number
• E-mail
• Phone
• URL
• Checkbox
• Color
• Headline
• Image
• HTML

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: 

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

Flexible Product Fields

This plugin lets you customize your WooCommerce product page with ease.

The free version lets you add the following product fields:

• Text
• Textarea
• Number
• E-mail
• URL
• Checkbox
• Multi-checkbox
• Select
• Multi-select
• Radio button
• Time
• Radio with images
• Color
• Radio with colors
• Heading
• Paragraph
• Image
• HTML

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.

You may also read more about advanced product fields for WooCommerce.

Related Articles

Create Custom Fields in WooCommerce Checkout and Product Pages

Standard WooCommerce doesn't let you create custom fields without writing your code. However, there are situations when you need the custom product or...

How to customize the WooCommerce shop page (checkout & product)?

Can you blame WooCommerce for no advanced options to customize the shop, product, or checkout page? Of course, you shouldn’t. In fact, it’s better to ...

WooCommerce advanced custom fields: a FREE product & checkout customizer

Are you looking for a way to easily customize your WooCommerce? Let's build advanced product and checkout pages with custom fields in WooCommerce with...

Customize the WooCommerce Checkout Page: Tips & Tools for Success

The WooCommerce Checkout Page is simple by default for there is no built-in option to customize the form in the WooCommerce plugin. So, how to edit, c...

Customize the WooCommerce Checkout Page: Top Tips for a Seamless Experience

I don’t have to convince you that the checkout page is one of the most important parts of every WooCommerce store. The possibility to fully adjust it ...