Complete Guide to Section Settings

Sections are the building blocks of your product addon forms in Extra Product Options for WooCommerce. With version 4.4.0, we’ve introduced comprehensive section settings that give you complete control over how your sections look and behave. This guide covers all available section settings and how to use them effectively.

Each section in your addon builder comes with three main setting categories:

General Settings: Basic section configuration
Label Settings: Title and description customization
Section Settings: Advanced styling and appearance

General Settings

Section Status

The Section Status toggle is a fundamental control that determines whether the entire section and all its contained fields will be visible to customers on the frontend product page. This setting acts as a master switch for section visibility, allowing you to control the display of entire sections without needing to delete them from your addon configuration.

When enabled, the section status ensures that all fields within that section are rendered and displayed to customers during the product purchase process. When disabled, the section becomes completely invisible to frontend users, though it remains in your addon builder for future use. This functionality is particularly valuable for store owners who need to manage complex product configurations with multiple sections.

Disabled (OFF) – When switched off, the section becomes completely hidden from the frontend view. This means customers will not see the section title, description, or any fields contained within it. The section remains in your addon builder configuration, allowing you to re-enable it later without losing your settings.

Enabled (ON) – When this toggle is switched on, the section and all its fields will be displayed to customers on the product page. This is the default state for active sections that you want customers to interact with. All fields within the section, including text inputs, dropdowns, checkboxes, and any other field types, will be visible and functional.

Label Settings

Enable Section Title & Description

This setting provides complete control over whether section headers (title and description) are displayed to customers on the frontend. When enabled, customers will see the section title and any description text you’ve configured. When disabled, only the fields within the section are displayed, creating a cleaner, more minimal interface that integrates seamlessly with your product page design.

The Enable Section Title & Description toggle is a master control that affects the visibility of all label-related content for a section. This includes the section title, title styling, description text, and all associated formatting. When this option is disabled, the plugin completely removes the header area from the section, resulting in a streamlined display where fields appear directly without any introductory text or headings.

Enabled

When this toggle is active, the section title and description will be visible to customers on the product page. This is ideal when you need to provide context, instructions, or categorization for the fields within the section. The title appears at the top of the section, followed by the description (if provided), and then all the fields. This creates a clear hierarchy and helps customers understand what information they need to provide.

Disabled

When switched off, the section header area is completely hidden, and only the fields themselves are displayed. This creates a cleaner, more integrated look that works well when the purpose of the fields is self-evident or when you want the fields to blend seamlessly with the rest of your product page design. This is particularly useful for minimal design aesthetics or when using visual cues (like icons or field labels) to convey section purpose.

Title

The Title field allows you to set the main heading text that appears at the top of your section when section labels are enabled. This title serves as the primary identifier for the section and helps customers understand what information or options are contained within that section. The title is displayed prominently and can be styled using the title type, color, and alignment settings.

The section title is a critical element for user experience and form navigation. It acts as a visual anchor that helps customers quickly identify and understand the purpose of each section. The title text you enter here will be rendered as an HTML heading element (based on your Title Type setting), which means it contributes to the semantic structure of your page and can impact both user experience and search engine optimization.

Enter Descriptive Text: Type a clear, concise title that accurately describes the section’s purpose. The title should immediately communicate what customers will find in that section. For example, if the section contains fields for personalizing a product, a title like “Personalization Options” clearly indicates the section’s purpose.

Keep It Concise: While you can enter longer titles, it’s best practice to keep section titles short and focused. Aim for 3-5 words that capture the essence of the section. Longer titles can become cluttered and may not display well on mobile devices or in constrained layouts.

Use Action-Oriented Language: When appropriate, use verbs or action words that guide customers. For example, “Choose Your Options” is more engaging than “Options Available.” However, descriptive titles like “Shipping Information” are also perfectly valid and often clearer.

Examples of Effective Titles:

Personalization Options – Clear and descriptive for customization fields
Shipping Details – Straightforward for address and shipping information
Additional Services – Indicates add-on products or services
Special Instructions – Clear purpose for text area fields
Product Customization – General but descriptive
Delivery Preferences – Specific and action-oriented
Gift Wrapping Options – Clear and specific

Title Type

The Title Type setting determines which HTML element is used to render your section title, affecting both the semantic structure of your page and the default visual styling. This setting is crucial for maintaining proper document structure, accessibility, and SEO best practices. The title type you choose will wrap your section title text in the corresponding HTML tag, which browsers and assistive technologies use to understand the content hierarchy.

HTML headings (H1 through H6) are semantic elements that indicate the importance and hierarchy of content on a page. Search engines use heading structure to understand page organization, and screen readers use headings to help users navigate content. The Title Type setting allows you to choose the appropriate heading level for your section titles, ensuring your product pages follow web standards and best practices.

H1 (Heading Level 1): The largest and most prominent heading level, H1 is typically reserved for the main page title. In most cases, your WooCommerce product title will already use H1, so using H1 for section titles can create semantic conflicts. H1 should generally appear only once per page to maintain proper document structure. Use H1 for section titles only if your product page doesn’t already have an H1 element, or if you’re creating a custom layout where section titles are the primary headings.

H2 (Heading Level 2): This is the ideal choice for main section titles in most cases. H2 headings are large and prominent, clearly indicating major content sections. They work well for the primary sections of your product addon form, such as “Personalization Options” or “Shipping Information.” H2 is semantically correct for top-level sections and provides excellent visual hierarchy.

H3 (Heading Level 3): Use H3 for subsections or when you have nested sections within your addon. If your addon structure has main sections (H2) and subsections within those, H3 is appropriate for the nested sections. H3 headings are medium-sized and work well for secondary content groupings.

H4 (Heading Level 4): Smaller heading level suitable for tertiary sections or when you have a deeply nested structure. H4 headings are less prominent visually but still maintain semantic meaning. Use H4 when you have multiple levels of section hierarchy.

H5 (Heading Level 5): Even smaller heading, rarely needed for product addon sections unless you have an extremely complex nested structure. H5 is typically used for very specific sub-categorizations.

H6 (Heading Level 6): The smallest standard heading level, H6 is rarely used in practice. It’s available for completeness but is seldom needed for product option sections.

Span: This option renders your title as a span element rather than a heading. Span is an inline, non-semantic element that doesn’t contribute to document structure. Use Span when you want to style text like a heading but don’t want it to affect the page’s heading hierarchy. This is useful when your product page already has a complete heading structure and you want section titles to be visually styled but not semantically significant.

Title Color

The Title Color setting allows you to customize the text color of your section title, giving you complete control over the visual appearance of section headers. This color setting overrides any default theme colors, allowing you to match your brand identity or create visual distinction between different sections. The color you choose will be applied to the title text, affecting how prominently the section header appears and how well it integrates with your overall design.

Color is one of the most powerful visual design tools, and the title color setting lets you use color strategically to enhance your product addon forms. The color you select will be applied as a CSS color property to the section title element, which means it will override default theme styles and give you precise control over the title’s appearance. This is particularly useful for creating branded experiences or establishing visual hierarchy through color differentiation.

Color Picker Interface: Click on the color picker field to open a visual color selection tool. This interface allows you to choose colors visually by clicking on a color wheel or spectrum, making it easy to select colors that match your brand or design aesthetic. The color picker typically shows a preview of the selected color and allows you to adjust hue, saturation, and brightness.

Hex Code Input: For precise color matching, you can enter hexadecimal color codes directly into the color field. Hex codes are six-digit codes (like #FF5733 or #2E86AB) that represent specific colors. This is especially useful when you need to match exact brand colors or when you’re working with a design system that specifies exact color values. Hex codes provide the most accurate color reproduction across different browsers and devices.

RGB and HSL Values: Some color pickers also support RGB (Red, Green, Blue) and HSL (Hue, Saturation, Lightness) color formats. These alternative formats can be useful for specific design workflows, though hex codes are the most commonly used format in web development.

Title Alignment

The Title Alignment setting controls how the section title text is positioned horizontally within its container. This setting applies CSS text-align properties to determine whether the title appears on the left, right, center, or is justified across the full width. Alignment is a fundamental design principle that affects visual balance, readability, and the overall aesthetic of your product addon sections.

Text alignment is one of the most basic yet important typographic controls in web design. The alignment you choose for section titles affects how customers scan and read your content, how the title relates to the section content below it, and how well the section integrates with your overall page layout. Different alignments create different visual effects and can convey different tones or styles.

Default: When set to Default, the section title will use whatever text alignment is specified in your WordPress theme’s CSS. This means the title will inherit the alignment style from your theme’s default heading styles, ensuring consistency with the rest of your site’s typography. This is often the best choice if you want section titles to match your site’s existing design language without making them stand out as different from other headings.

Left: Left alignment is the most common text alignment for headings in Western languages, as it matches the natural reading flow from left to right. Left-aligned titles create a clean, traditional appearance and work well for most design styles. This alignment is particularly effective when you want titles to align with the left edge of your content area or when you want a straightforward, professional look. Left alignment is also the most accessible choice for users reading in left-to-right languages.

Center: Center alignment creates a symmetrical, balanced appearance that draws attention to the title. Centered titles work well for prominent sections, hero-style content, or when you want to create a more formal, ceremonial feel. Center alignment can make titles feel more important or special, but it should be used thoughtfully as it can also feel less modern or professional in some contexts. Centered text can be more difficult to read in longer titles, so it’s best for shorter section titles.

Right: Right alignment is less common for headings but can be effective for specific design purposes. Right-aligned titles can create visual interest, work well in right-to-left language layouts, or be used to create a unique design aesthetic. However, right alignment can feel unusual or even disorienting for users reading left-to-right languages, so it should be used sparingly and only when it serves a specific design purpose.

Justify: Justified alignment spreads the title text evenly across the full width of the container, creating straight edges on both left and right sides. While justified text can create a clean, formal appearance, it’s rarely used for headings and can create awkward spacing in shorter titles. Justified alignment works best with longer text, so it’s generally not recommended for section titles, which are typically short. Justified text can also create readability issues, especially with shorter headings.

Section Description

The Section Description field allows you to add explanatory or instructional text that appears below the section title when section labels are enabled. This description provides additional context, guidance, or instructions that help customers understand what information they need to provide or what options are available in that section. Descriptions are particularly valuable for complex sections or when you need to provide specific instructions that wouldn’t fit in a concise title.

Section descriptions serve as a bridge between the section title and the actual fields, providing customers with the context they need to complete the form successfully. Unlike titles, which are typically short and focused, descriptions can be longer and more detailed, allowing you to explain processes, provide examples, or give specific instructions. This text is rendered as paragraph text below the title, creating a clear information hierarchy: Title (most prominent) → Description (supporting information) → Fields (interactive elements).

Description Text Color

The Description Text Color setting allows you to customize the color of the section description text, giving you control over how the description appears visually in relation to the section title and overall design. This color setting works independently from the title color, allowing you to create visual hierarchy through color differentiation or maintain consistency with your brand colors.

Color is a powerful tool for creating visual hierarchy and guiding user attention. The description text color, when set differently from the title color, can help establish a clear information hierarchy: titles (typically darker or more prominent colors) draw primary attention, while descriptions (often lighter or more subdued colors) provide supporting information without competing for attention. This color differentiation helps customers quickly distinguish between the main heading and the explanatory text.

Color Picker Selection: Color is a powerful tool for creating visual hierarchy and guiding user attention. The description text color, when set differently from the title color, can help establish a clear information hierarchy: titles (typically darker or more prominent colors) draw primary attention, while descriptions (often lighter or more subdued colors) provide supporting information without competing for attention. This color differentiation helps customers quickly distinguish between the main heading and the explanatory text.

Hex Code Input: For precise color matching, especially when working with brand colors or design systems, enter hexadecimal color codes directly. This ensures exact color reproduction across different browsers and devices.

Description Alignment

The Description Alignment setting controls how the section description text is positioned horizontally within its container, determining whether the description appears left-aligned, right-aligned, centered, or justified. This setting works independently from the title alignment, though matching them typically creates the most visually cohesive appearance.

Text alignment for descriptions follows the same principles as title alignment but serves a slightly different purpose. Since descriptions are typically longer than titles and contain more text, alignment choices can have a more noticeable impact on readability and visual appearance. The alignment you choose affects how customers read the description and how well it integrates with the section’s overall design.

Default: Uses your WordPress theme’s default text alignment for paragraph text. This ensures consistency with the rest of your site’s content styling and is often the best choice for seamless integration with your theme’s design language.

Left: Left alignment is the standard choice for body text and descriptions in left-to-right languages. It’s the most natural reading alignment and works well for longer descriptions. Left-aligned descriptions are easy to scan and read, making them ideal for instructional or explanatory text.

Center: Center alignment can create a formal or ceremonial appearance but is generally less ideal for longer descriptions. Centered text can be more difficult to read in longer paragraphs, as the eye has to work harder to find the start of each line. However, for very short descriptions (one or two lines), center alignment can work well and create visual interest.

Right: Right alignment is uncommon for descriptions and can feel unusual or disorienting for users reading left-to-right languages. It’s primarily useful for right-to-left language layouts or very specific design purposes where you want to create a unique aesthetic.

Justify: Justified alignment creates even edges on both sides of the text but can create awkward spacing, especially in shorter descriptions. While justified text can look formal and clean, it’s generally not recommended for descriptions as it can create readability issues and uneven word spacing.

Section Settings (Styling)

Enable Section Styling

The Enable Section Styling toggle is the master control that activates all advanced styling options for the section container. When enabled, you gain access to a comprehensive set of styling controls including background colors, margins, padding, borders (Premium), and custom CSS (Premium). When disabled, the section uses minimal default styles inherited from your theme, creating a clean, unadorned appearance that integrates seamlessly with your site’s existing design.

This setting acts as a gateway to all section styling features. When disabled, the plugin applies only the most basic styling necessary for the section to function, relying primarily on your WordPress theme’s default styles. This ensures that sections blend naturally with your site’s design without adding custom styling that might conflict with your theme. When enabled, the plugin generates custom CSS for the section based on your styling choices, giving you complete control over the section’s visual appearance.

Enabled

When you toggle this setting to ON, all styling options in the Section Settings tab become active and available for configuration. This includes background color picker, margin controls, padding controls, border settings (Premium), and custom CSS field (Premium). You can then customize each of these options to create a section that matches your brand identity and design requirements.

Disabled

When this setting is OFF, the section will use minimal default styling. The section will still function perfectly, but it won’t have custom background colors, custom spacing, borders, or other advanced styling applied. The section will inherit styling from your WordPress theme, ensuring it matches your site’s overall appearance without any custom modifications.

Background Color

The Background Color setting allows you to set a custom background color for the entire section container, affecting the area behind all section content including the title, description, and all fields. This color is applied to the section’s main container element, creating a visual backdrop that can help distinguish sections, group related fields, or match your brand identity. The background color works in combination with other styling options like borders and padding to create the overall section appearance.

Background color is one of the most impactful visual design elements you can apply to sections. It creates immediate visual distinction and can significantly affect how customers perceive and interact with your product addon forms. A well-chosen background color can make sections feel organized, professional, and integrated with your brand, while a poorly chosen color can create visual clutter or accessibility issues.

Color Picker Selection: Use the color picker interface to visually select a background color. This is ideal when you want to experiment with different shades or when you’re working with colors from your design palette. The color picker typically shows a preview of how the color will look.

Hex Code Input: For precise color matching, especially when working with brand colors or design systems, enter hexadecimal color codes directly (e.g., #f5f5f5 for light gray). This ensures exact color reproduction and is essential when you need to match specific brand guidelines or design system colors.

Section Margin

Controls the outer spacing around the section (space outside the border).

How to use:

Set values for Top, Right, Bottom, and Left independently
Choose units: Pixels (px), Em, Rem (Premium), or Percent (Premium)
Margin pushes other elements away from the section

Units explained:

Pixels (px): Fixed size, most common
Em: Relative to parent font size
Rem (Premium): Relative to root font size
Percent (Premium): Relative to container width

Section Padding

Controls the inner spacing within the section (space inside the border).

How to use:

Set values for Top, Right, Bottom, and Left independently
Choose units: Pixels (px), Em, Rem (Premium), or Percent (Premium)
Padding creates space between the border and content

Border (Premium Feature)

Adds a border around the section container with full customization.

Border Color

Choose any color for the border
Use brand colors for consistency
Use subtle grays for minimal borders

Border Width

Set in pixels (0-10px typical range)
0px = no border
1-2px = subtle border
3-5px = prominent border

Border Style

Solid: Continuous line (most common)
Dashed: Broken line with dashes
Dotted: Broken line with dots
Double: Two parallel lines
None: No border

Border Radius

Creates rounded corners
0px = sharp corners
5-10px = subtle rounding
15-20px = pronounced rounding
Higher values create pill-shaped sections

Custom CSS (Premium Feature)

Allows you to add custom CSS styles scoped to this specific section.

Creates rounded corners
0px = sharp corners
5-10px = subtle rounding
15-20px = pronounced rounding
Higher values create pill-shaped sections

.epofw-section-wrapper {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.epofw-section-wrapper:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

Best Practices & Design Tips

Visual Hierarchy

Use background colors – to group related fields

Vary section spacing – to create visual flow

Use borders and radius – for modern card-style sections

Maintain consistency – across all sections

Maintain color contrast minimum 4.5:1 ratio

Use semantic heading levels (H1-H6) properly

Ensure readable font sizes in descriptions

Test with screen readers for proper structure

Accessibility

Performance

Limit custom CSS keep it minimal and efficient

Use standard settings when possible (faster rendering)

Optimize color choices avoid excessive styling

Test page load times with styled sections

Conclusion

Section settings in Extra Product Options for WooCommerce 4.4.0 provide powerful customization options to create professional, branded product addon forms. Whether you need simple organization or advanced styling, these settings give you the flexibility to match your store’s design perfectly.

Frequently Asked Questions

Find answers to commonly asked questions about our products and services.

What are section settings and why do I need them?

Section settings are customization options that allow you to control how your product addon sections appear on the frontend. They include controls for titles, descriptions, colors, spacing, borders, and more. You need them to create professional, branded product forms that match your store’s design and provide a better customer experience. Without section settings, all sections would look the same and wouldn’t reflect your brand identity.

Do I need to enable section styling for all sections?

No, you can choose to enable section styling only for sections where you want custom appearance. If you’re happy with your theme’s default styling, you can leave section styling disabled. Enable it when you want to apply custom colors, spacing, borders, or other styling options to specific sections.

Can I use different settings for different sections?

Yes, absolutely! Each section has its own independent settings. You can customize each section differently – for example, use a colored background for one section, a border for another, and minimal styling for a third. This flexibility allows you to create visual hierarchy and distinguish between different types of content.

Will section settings affect my site’s performance?

Section settings have minimal impact on performance. When you enable custom styling, the plugin generates CSS that’s either inline or in a stylesheet. The performance impact is negligible for most sites. However, if you use extensive custom CSS, it’s good practice to optimize it. Disabling section styling when not needed can reduce CSS output slightly.

Are section settings compatible with all WordPress themes?

Section settings work with all WordPress themes, but the visual results may vary depending on your theme’s CSS. Some themes have strong default styles that might override certain section settings. If you encounter conflicts, you can use custom CSS to ensure your section styles display correctly. The plugin is designed to work with any WooCommerce-compatible theme.

Should I always show section titles and descriptions?

Not necessarily. If your section purpose is clear from the fields themselves, you can disable titles and descriptions for a cleaner, more minimal appearance. However, titles and descriptions are helpful when sections contain multiple fields, need instructions, or when you want to provide context. Test both options to see which works better for your specific use case.

What’s the difference between title type options (H1, H2, H3, etc.)?

Title types correspond to HTML heading levels. H1 is the largest and most prominent (typically used once per page for the main title). H2 is ideal for main section titles. H3-H6 are progressively smaller headings for subsections. Span is a non-semantic element for purely visual styling. Choose based on your page’s heading hierarchy – most sections work well with H2.

Can I use the same title for multiple sections?

Technically yes, but it’s not recommended. Using the same title for multiple sections can confuse customers and doesn’t help with visual organization. Each section should have a unique, descriptive title that clearly indicates its purpose. If sections serve similar purposes, consider combining them or using more specific titles.

How long should section descriptions be?

Keep descriptions concise – typically 1-2 sentences. Longer descriptions can overwhelm customers and take up valuable screen space, especially on mobile devices. Focus on providing essential information: what the section is for, what customers need to do, or any important requirements. If you need more detailed instructions, consider adding them to individual field labels or help text.

Do section titles affect SEO?

Section titles are rendered as HTML heading elements (H1-H6), which search engines use to understand page structure. While product addon sections may not be the primary SEO focus, proper heading hierarchy contributes to overall page SEO. Use semantic heading levels (H2 for main sections) and include relevant keywords naturally in titles, but prioritize user experience over keyword optimization.

What’s the difference between margin and padding?

Margin is the space outside the section border (space between sections), while padding is the space inside the section border (space between the border and content). Think of it like a picture frame: margin is the space around the frame, padding is the space between the frame and the picture. Both are important for creating proper spacing and visual breathing room.

Which spacing unit should I use – px, em, rem, or percent?

It depends on your needs. Pixels (px) are fixed-size and most common – use them when you want consistent sizing. Em is relative to parent font size – good for responsive designs. Rem (Premium) is relative to root font size – excellent for consistent responsive scaling. Percent (Premium) is relative to container width – ideal for fluid layouts. For most users, px works well; use rem or % for advanced responsive designs.

How do I create a card-style section appearance?

To create a card-style section, combine these settings: enable section styling, set a background color (usually white or light), add a border (1-2px solid, Premium), set border radius (5-10px for subtle rounding, Premium), and add padding (15-30px). This combination creates a modern, contained card appearance that’s popular in contemporary web design.

Can I use custom CSS to override section settings?

Yes, if you have Premium version, you can use custom CSS to add advanced styling beyond what’s available in the standard settings. Custom CSS is scoped to the specific section, so it won’t affect other sections or page elements. However, be careful with CSS specificity – very specific selectors might override your custom CSS. Test thoroughly before deploying custom CSS to production.

My section isn’t showing on the product page. What’s wrong?

Check these common issues: 1) Section Status must be enabled (ON), 2) The addon must be assigned to the product, 3) Check for JavaScript errors in browser console, 4) Verify the addon is saved and published, 5) Clear browser and WordPress cache. If all these are correct, check if your theme is properly loading WooCommerce templates.

My custom colors aren’t showing. Why?

Possible causes: 1) Section styling might not be enabled – enable it first, 2) Your theme’s CSS might be overriding section styles (use custom CSS with higher specificity), 3) Browser cache – clear cache and hard refresh (Ctrl+F5 or Cmd+Shift+R), 4) Color values might not be saved – check the color picker shows your selected color, 5) Check for CSS conflicts in browser developer tools.

Section spacing looks wrong on mobile. How do I fix it?

Mobile spacing issues are often caused by using fixed pixel values that are too large for small screens. Solutions: 1) Use smaller margin/padding values for mobile (you may need custom CSS with media queries), 2) Consider using rem or em units which scale better, 3) Test on actual mobile devices, 4) Use percentage-based spacing for fluid layouts (Premium). The plugin’s responsive design handles most cases, but extreme values might need adjustment.

Still have a question?

If you have any other queries, feel free to reach out to us. Our knowledgeable team is here to help!

Email Us

Download Free Version

Related Resources

Section Settings Documentation
Field Types Documentations