• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • Bundle
  • Support
  • Blog
  • My Account
  • 0

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

Bartosz Gajewski

How to customize the WooCommerce checkout page & fields with CSS

Updated: January 10, 2023 / Plugin Tutorials

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:

an example of a field without css
Upload Field: before, without WooCommerce checkout CSS customization

🎉 You can change its look to this:

woocommerce checkout page css example
Upload Field: After. WooCommerce checkout CSS example

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
WP Desk
80,000+ Active Installations
Last Updated: 2022-11-24
Works with WooCommerce 6.7 - 7.1.x
👉🏼 Read more on how to customize and edit the WooCommerce checkout page!

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
WP Desk
10,000+ Active Installations
Last Updated: 2022-11-24
Works with WooCommerce 6.7 - 7.1.x
👉🏼 Read about the plugin and WooCommerce product personalization.

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.

  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

    Flexible Checkout Fields available fields
    WooCommerce checkout design plugin - Flexible Checkout 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:

    customizing the css class in the woocommerce checkout
    Customizing WooCommerce checkout page with CSS - Appearance tab
  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:

    Flexible Product Fields in WordPress menu
    Install and activate Flexible Product Fields to customize CSS class
  3. Add new fields

    Now, let's create a group of fields with a field inside.

    text field css styling plugin
    Adding a text field with Flexible Product Fields

    This is how it looks like on the product page:

    css styling text field product page
    Text field added with Flexible Product Fields
  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.

    CSS Class settings for woocommerce product fields
    Customizing CSS Class for product fields with a plugin
  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)

💡 In this guide, I'm showing you some examples of CSS styling. If you don't know what CSS is, check out this tutorial →

To add custom CSS go to the Appearance menu → Customize.

Customize Appearance to set css class woocommerce
WooCommerce checkout page design with CSS. Appearance -> Customize.

Use the Additional CSS section to add custom styling to your WordPress theme.


Additional CSS in Personalizing
WooCommerce page CSS - adding a CSS class

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:

Example custom CSS
Customizing WooCommerce page with CSS - custom CSS example

This code lets me transform this field:

woocommerce checkout no css
Radio field: default look without custom CSS class

Into such a beauty like this 🤤 :

customizing woocommerce checkout page with css radio button
WooCommerce checkout page CSS: an example of a radio button CSS styling

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:

Example div
Div Example CSS Class

➡️ If you want to customize elements inside this div, you need to call them like this:

example css class div code
Legend CSS element styling

for a legend element:

woocommerce checkout page css
Legend CSS element result

➡️ That's because this element is nestled inside the div and a fieldset element:

Legend element in the code example
Legend element in the code. This is how to style the CSS class.

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 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
  • 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

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
WP Desk
80,000+ Active Installations
Last Updated: 2022-11-22
Works with WooCommerce 6.7 - 7.1.x

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.
💡 Some of these fields are explained in detail in WooCommerce Product Personalization Options Guide →

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
WP Desk
10,000+ Active Installations
Last Updated: 2022-11-04
Works with WooCommerce 6.7 - 7.1.x

Related to the WooCommerce checkout design plugin

  • Add gift wrapping and CSS style the product field

    css style product field
    Add more fields to the product page. Find out how to add additional fields to the WooCommerce product page and add a CSS class.

  • Add radio buttons to checkout and add CSS class

    how to remove required fields from checkout form
    Add and style radio buttons. Put into practice the knowledge gained in this article and add radio buttons to checkout.

Tweet

4 minutes read14011 views

Bartosz Gajewski

Content Specialist in WP Desk. He tries to increase the number of plugin users with useful content. Privately an enthusiast of mountains and European cinema.

Powered by WP Desk

WP Desk brings you great WooCommerce plugins. We strive to save your time and money by speeding up your processes. Use our plugins to build a better store. Awesome support included in the package.

Premium WooCommerce Plugins →

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

WP Desk › Plugin Tutorials › How to customize the WooCommerce checkout page & fields with CSS

Footer

WP Desk - WooCommerce Plugins

At WP Desk we create great WooCommerce plugins with awesome support. Save time and money with our e-commerce solutions. See how we can help you improve your e-store →

Secured by Comodo

WP Desk

  • About us
  • Giving Back
  • Blog
  • Contact us

Products

  • Premium Plugins
  • Get Support
  • WooCommerce Invoices
  • Email Marketing
  • Octolize

Legal

  • Terms & Conditions
  • Refund Policy
  • Support Policy
  • Privacy Policy

© 2023 WP Desk