Configure the Size Chart General Settings in WooCommerce

The General Settings section of the Size Chart plugin allows you to control the overall appearance, labels, and behavior of size charts across your WooCommerce store.

By configuring these settings correctly, you can maintain a consistent design and improve how size charts appear on product pages.

General Settings

The General Settings area lets you control the visual styling of the size chart table.

Using these options, you can customize:

Table header font color
Table row text color
Table header background color
Table row background color
Other table styling elements

These settings help match the size chart table with your store’s theme and branding, ensuring a clean and professional appearance.

Global Settings

The Global Settings section allows you to define labels that apply to all size charts across your store.

Size Chart Label

This label is used consistently for every product size chart.

Tab Label

Visible on the product details page when the size chart is displayed as a custom tab
Example: Size Chart, Size Guide, Measurements

Visible on the product details page when the size chart is displayed as a popup link
Usually appears below the product price

Using global labels ensures consistency and avoids the need to configure labels for each individual chart.

chart global settings — Chart global settings

Pop-Up Settings

The Pop-Up Settings section controls how and where the size chart popup link appears on the product page.

Chart Label Position

Choose where the size chart link should be displayed:

After Add to Cart button
Before Add to Cart button
After Product Meta
Before Summary Text

Label Text Color

Select the color of the popup label text
The chosen color will be visible on the product details page

Label Class

Add a custom CSS class to the size chart label
Useful if you want advanced styling using your theme or custom CSS

These options give you full control over the popup link’s placement and appearance.

Custom CSS

The Custom CSS section allows you to apply your own styles for deeper customization.

You can use custom CSS to modify:

Size chart button color
Font size of the size chart label
Table font size
Any additional styling related to the size chart

Add your custom CSS in the provided field (as shown in the screenshot) to tailor the size chart design according to your preferences.

Conclusion

The Size Chart General Settings give you complete control over the look and behavior of size charts in WooCommerce. By configuring table styles, global labels, popup settings, and custom CSS, you can ensure your size charts match your store’s design and provide a better user experience for customers.

Proper setup helps maintain consistency, improve readability, and make size charts easier to access on product pages.

FAQs

1. Do General Settings apply to all size charts automatically?

Yes. The General Settings control the default table styling for all size charts. These styles apply globally unless a specific size chart uses a custom style configuration.

Tab Label appears when the size chart is displayed as a separate tab on the product page.
Popup Label appears when the size chart opens as a popup link, usually below the product price.

Yes. In the Pop-Up Settings, you can choose where the popup link appears, such as before or after the Add to Cart button, after product meta, or before the product summary.

4. Can I style the size chart using my own CSS?

Yes. The Custom CSS option allows you to customize button colors, font sizes, table text, and other visual elements using your own CSS rules.

5. Will changing Global Settings affect existing products?

Yes. Since Global Settings apply across the store, any changes you make will immediately reflect on all products using size charts.

6. Can I override global styles for a specific size chart?

Yes. Individual size charts can use their own custom styles, which will override the global styling settings.

7. Why is my size chart label not visible on the product page?

Make sure:

A size chart is assigned to the product
The display style (tab or popup) is selected
The label color contrasts with your theme background

8. Do these settings work with all WooCommerce themes?

Yes. The settings are compatible with most WooCommerce-compatible themes. For advanced styling, you can use the Custom CSS option.