The above code will make the section display 4 columns. You can adjust the number of columns, by changing the width value.

You only need to divide 100% by the number of columns you’d like. For example, 2 columns = 100/2 =50%.

The width should be set to 50%.

Here’s how to add your CSS: How to add CSS to your WordPress site

The post Change the number of radio/checkbox image columns on mobile devices appeared first on Plugin Republic.

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

Use a preset style

From version 3.11.0, Add-Ons Ultimate comes with preset styles. The default is to inherit all styles from the theme and you can adjust many elements using the Customizer method below.

However, you can also switch to a preset style which will automatically update the styles. Elements like font, font size, etc will still be inherited from the theme, in order to ensure consistency between the add-on fields and the rest of the product page.

To switch to a preset style:

• 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’
• Select an option from the ‘Preset styles’ field
• Select an ‘Accent colour’, ideally to match your main theme colour
• Click ‘Publish’

Updating add-on styles using the Customizer

If you prefer to adjust specific elements, you can also use the Customizer. 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.

The post How to update add-on field styles appeared first on Plugin Republic.