How to customize the size chart table style?
When working with size charts in your e-commerce store, presenting the information in an appealing and user-friendly manner is required. The "Chart Table Style" customization option allows you to enhance the design and layout of your size chart tables. This document will guide you through the process of customizing the size chart table style using different styling options available in the plugin.
Chart Table Style Settings
- To begin customizing the size chart table style, edit or create a new size chart from the backend.
- Under the size chart settings section, you will find an option labeled "Chart Table Style."
Screenshot - 1: (Admin - Chart table style setting)
The "Chart Table Style" offers various pre-defined styles for your size chart tables. Each style provides a unique look and feel, allowing you to choose the one that best matches your website's design.
1. Default Style
- The "Default Style" represents the standard layout of a size chart table.
Screenshot - 2: (Front - Default style layout)
2. Minimalistic Style
- The "Minimalistic Style" offers a clean and simple layout for your size chart table.
Screenshot - 3: (Front - Minimalistic style layout)
3. Classic Style
- The "Classic Style" provides a timeless and elegant design for your size chart table.
Screenshot - 4: (Front - Classic style layout)
4. Modern Style
- The "Modern Style" offers a modern and stylish appearance for your size chart table.
Screenshot - 5: (Front - Modern style layout)
5. Custom Style
- The "Custom Style" allows you to apply table colors from the Global Settings, enabling seamless integration with your website's theme.
Screenshot - 6: (Admin - Global style settings)
Screenshot - 7: (Front - Custom style layout)
6. Advanced Style
- The "Advanced Style" provides further customization options for your size chart table within the "Chart table" section.
- You can customize table header text and background colors, even and odd row colors, table borders, and more.
Screenshot - 8: (Admin - Advance style settings)
Screenshot - 9: (Front - Advance style layout)
[NEW] - Table Hover
- We have recently introduced a new feature called "Table Hover" in the Advanced Style section.
- This option enables you to add an effective table cell hover effect, enhancing user interaction and attracting your customers.
Screenshot - 10: (Admin - Table hover settings)
Screenshot - 11: (Front - Table hover layout)
