How to customize the size chart with custom css

In addition to the various built-in customization options, this plugin also provides a custom CSS feature for further customization of your size chart layout. With this option, you can easily apply your own custom CSS code to achieve the desired layout for your size chart.

Refer to the screenshot below for an example of how to apply your custom CSS and customize the size chart according to your preferences.

Screenshot - 1: (Admin - Add your custom css)

Screenshot - 2: (Front - Size chart button design with custom color)

Here are some default CSS selectors that you can use to target and customize different elements of your size chart:

• .scfw-size-chart-main .md-size-chart-btn {} : Target the size chart link or button.
• table#size-chart tr th, table#size-chart tr td {} : Target the table cells in the size chart.
• .scfw-size-chart-main .md-modal-title {} : Target the main title of the size chart popup.
• .chart-container .md-size-chart-subtitle {} : Target the subtitle of the size chart.
• .chart-container p {} : Target all paragraphs in the size chart content.
• .scfw-size-chart-main .md-size-chart-modal-body {} : Target the maximum width of the size chart popup.

Feel free to utilize these selectors in your custom CSS code to customize the design and styling of your size chart as desired.