1. Home
  2. Knowledge Base
  3. WooCommerce Product Add-Ons Ultimate
  4. How to update add-on field styles
  1. Home
  2. Knowledge Base
  3. Product Page
  4. How to update add-on field styles
  1. Home
  2. Knowledge Base
  3. Front End
  4. How to update add-on field styles

How to update add-on field styles

Add-Ons Ultimate tries to add as little styling to fields as possible, preferring to inherit styles from the theme. This ensures that the fields inserted by the plugin will match your site style and layout.

However, you may sometimes find that you want to update the styles. There are two ways to do this.

Updating add-on styles using the Customizer

The simplest way is to use the standard WordPress Customizer to change your field styles. To use the Customizer:

  • Go to a product page where you have add-on fields
  • From the top admin bar, click the ‘Customize’ menu item
  • The Customizer panel will open on the left of your screen
  • Go to the ‘Product Add-Ons Ultimate’ section
  • Choose ‘Styles’

You’ll see that there are multiple styles that you can change using the Customizer, including:

  • Margin and padding around the fields
  • Margin and padding around individual fields
  • Background and border colours
  • Text colour
  • Text and textarea field width
  • Textarea height
  • Force field labels on to a separate line
  • Change the border colour for selected image swatches

When you update styles, you can preview the changes on your page. Click ‘Publish’ to make the changes live.

Update styles using CSS

All field styles can be updated using CSS. This gives you the scope to truly design the field layout.

To update CSS, please see this article.

Was this article helpful?

Related Articles