• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Essential Premium WooCommerce Plugins - WP Desk

  • Premium Plugins
  • Support
  • Blog
  • My Account
  • 0
Szymon Barczak

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

Updated: November 24, 2020 / Guides

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.

As you need a dedicated CSS class for your custom fields, next in the article I will refer to it as a CSS custom field class.

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:

Upload Field: before

You can change its look to this:

Upload Field: After

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

If you haven't configured a CSS class yet, I'll show you how to make it, too. That will be the next chapter of this article.

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:

Flexible Checkout Fields - Settings

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:

Set your own custom field class

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:

Flexible Product Fields in WordPress menu

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.

CSS Class settings for product fields

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

Create your CSS custom field class

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

Customize Appearance

lorem

Additional CSS in Personalizing

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:

Example custom CSS

This code lets me transform this field:

Radio field: default look

Into such a beauty like this:

Example of Radio Button 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

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

Legend element styling

for a legend element:

Legend element

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

Legend element in the code

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.

Checkout Fields Bar

Almost 40,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 Checkout Fields WooCommerce

Edit, add new or hide unnecessary fields from the checkout form. It's all about conversions and better user experience.

Download for free or Go to WordPress.org
WP Desk
40,000+ Active Installations
Last Updated: 2021-01-14
Works with WooCommerce 4.2.0 - 4.6.x

Flexible Product Fields

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

Flexible Product Fields - 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.

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
7,000+ Active Installations
Last Updated: 2021-01-14
Works with WooCommerce 4.2.0 - 4.6.x
Tweet

3 minutes read2772 views

Szymon Barczak

Content Management Specialist at WP Desk. Concentrates his efforts on growing our plugin user base. In his free time he is interested in psychology and retro games.

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 →
WP Desk › Guides › Set Your Own CSS Class to Any Custom Fields in Your WooCommerce Store

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
  • FAQ
  • Docs
  • Get Support

Legal

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

© 2021 WP Desk