How to Customize the Flatsome FAQ Accordion with CSS

The native Flatsome Accordion element provides a practical foundation for FAQ sections, product information, support content, and documentation. However, its default appearance may not match the design of every WooCommerce store or WordPress website.

You can customize the Flatsome FAQ accordion with CSS while keeping the native UX Builder element, its content controls, responsive behavior, and structured-data option. This guide explains where to add the code, which Flatsome CSS classes control the accordion, how to create custom plus and minus icons, and how to improve mobile usability and accessibility.

We have used Flatsome on our own website and across hundreds of client projects for more than 8 years. It is a very versatile theme that has helped us achieve premium custom designs whenever we needed them.

Also check Best Flatsome Website Examples in 2026: Real Site Showcase

Why Customize the Native Flatsome Accordion?

The Flatsome Accordion already handles the main interaction between questions and answers. You can add content through UX Builder, organize multiple accordion items, and enable FAQ structured data without installing an additional FAQ plugin.

Custom CSS changes the visual presentation without replacing that functionality. You can redesign borders, backgrounds, spacing, typography, toggle controls, hover states, and open states while continuing to edit the FAQ content through the standard Flatsome interface.

This approach keeps your website setup focused. You avoid installing another plugin for a component that Flatsome already provides, and you can apply one consistent design to existing FAQ sections across the website.

Why replace a working native component when CSS can give it the design your page needs?

Where to Add Custom CSS in Flatsome

Most Flatsome users can add the code through the theme’s Custom CSS area. This method keeps the CSS separate from page content and applies it globally across the website.

Add CSS Through Flatsome Theme Options

1. Open the WordPress dashboard.
2. Go to Flatsome → Advanced → Custom CSS.
3. Paste the complete CSS into the global Custom CSS field.
4. Save the changes.
5. Clear the Flatsome CSS cache and any optimization cache.

The menu wording may differ slightly between Flatsome versions, but the Custom CSS field remains available inside the Flatsome theme settings.

Use a Flatsome Child Theme for Development Workflows

Experienced users can place the CSS inside the stylesheet of a Flatsome child theme. This method works well when you manage CSS through a code editor, version control system, or local WordPress environment.

Avoid editing the parent Flatsome theme stylesheet, as future theme updates may overwrite your changes.

Back Up Existing CSS First

Copy your existing Custom CSS into a local TXT file before replacing or testing any styles. A backup gives you a quick rollback option if the new code conflicts with another website element.

Flatsome Accordion CSS Classes Explained

The native accordion uses a predictable group of CSS classes. Understanding each selector makes the design easier to modify and troubleshoot.

The Accordion Container

The .accordion selector controls the complete accordion group. You can use it to remove the default border, change the background, or adjust the container layout.

.accordion {
  border: 0 !important;
  background: transparent !important;
}

Individual Accordion Items

The .accordion-item selector controls each question-and-answer pair. It usually manages spacing between questions, borders, corner radius, background color, overflow, and hover behavior.

.accordion .accordion-item {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid rgba(42, 47, 39, 0.16);
  border-radius: 12px;
  background: #ffffff;
}

The Clickable Question Title

The .accordion-title selector controls the clickable question. Use it to change the padding, text color, font weight, line height, hover color, and active background.

.accordion .accordion-title {
  position: relative;
  display: block;
  padding: 18px 64px 18px 22px !important;
  border: 0 !important;
  color: #1f241d !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

The Answer Content Area

The .accordion-inner selector controls the answer area. It manages the answer padding, font size, line height, text color, paragraph spacing, and list spacing.

.accordion .accordion-inner {
  padding: 4px 22px 22px !important;
  border: 0 !important;
  color: #4a5147;
  font-size: 15px;
  line-height: 1.75;
}

The Toggle Control

The .toggle element contains the native Flatsome accordion icon. You can move it to the right, hide the original icon, and replace it with custom plus and minus icons created with CSS.

Build a Clean Flatsome FAQ Card Style

The following example converts the native Flatsome Accordion into a clean card-based FAQ layout. It uses white cards, subtle borders, a circular toggle, responsive mobile rules, keyboard focus styling, and reduced-motion support.

/* Clean Flatsome FAQ Card Style */
:root {
  --faq-accent: #a7c957;
  --faq-accent-dark: #7fa53a;
  --faq-title: #1f241d;
  --faq-text: #4a5147;
  --faq-card: #ffffff;
  --faq-open: #f7faf2;
  --faq-border: rgba(42, 47, 39, 0.16);
  --faq-border-hover: rgba(167, 201, 87, 0.7);
}
.accordion {
  border: 0 !important;
  background: transparent !important;
}
.accordion .accordion-item {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--faq-border);
  border-radius: 12px;
  background: var(--faq-card);
  box-shadow: none !important;
  transition: border-color 0.25s ease;
}
.accordion .accordion-item:last-child {
  margin-bottom: 0;
}
.accordion .accordion-item:hover {
  border-color: var(--faq-border-hover);
}
.accordion .accordion-title {
  position: relative;
  display: block;
  padding: 18px 64px 18px 22px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--faq-title) !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none !important;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.accordion .accordion-title:hover,
.accordion .accordion-title:focus,
.accordion .accordion-title:visited {
  text-decoration: none !important;
}
.accordion .accordion-title:hover,
.accordion .accordion-title.active {
  color: var(--faq-accent-dark) !important;
}
.accordion .accordion-title.active {
  background: var(--faq-open) !important;
}
.accordion .accordion-title:focus-visible {
  outline: 2px solid var(--faq-accent);
  outline-offset: -4px;
}
.accordion .accordion-inner {
  overflow: hidden;
  padding: 4px 22px 22px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--faq-text);
  font-size: 15px;
  line-height: 1.75;
}
.accordion .accordion-title.active + .accordion-inner {
  background: var(--faq-open) !important;
  animation: faqReveal 0.3s ease both;
}
.accordion .accordion-inner p {
  margin-bottom: 0.9em;
}
.accordion .accordion-inner p:last-child {
  margin-bottom: 0;
}
.accordion .accordion-title .toggle {
  position: absolute;
  top: 50% !important;
  right: 18px !important;
  left: auto !important;
  display: block !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(167, 201, 87, 0.5) !important;
  border-radius: 50% !important;
  background: rgba(167, 201, 87, 0.08) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  color: var(--faq-accent-dark) !important;
  font-size: 0 !important;
  opacity: 1;
  transform: translateY(-50%);
  transition: color 0.25s ease, background-color 0.25s ease;
}
.accordion .accordion-title .toggle i {
  display: none !important;
}
.accordion .accordion-title .toggle::before,
.accordion .accordion-title .toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.accordion .accordion-title .toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.accordion .accordion-title:hover .toggle {
  border-color: var(--faq-accent) !important;
  background: rgba(167, 201, 87, 0.16) !important;
}
.accordion .accordion-title.active .toggle {
  border-color: var(--faq-accent) !important;
  background: var(--faq-accent) !important;
  color: var(--faq-title) !important;
}
.accordion .accordion-title.active .toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0.4);
}
@keyframes faqReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 549px) {
  .accordion .accordion-item {
    margin-bottom: 12px;
    border-radius: 10px;
  }
  .accordion .accordion-title {
    padding: 16px 56px 16px 17px !important;
    font-size: 15px;
  }
  .accordion .accordion-title .toggle {
    right: 15px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }
  .accordion .accordion-inner {
    padding: 3px 17px 19px !important;
    font-size: 14px;
    line-height: 1.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .accordion .accordion-item,
  .accordion .accordion-title,
  .accordion .accordion-title .toggle,
  .accordion .accordion-title .toggle::before,
  .accordion .accordion-title .toggle::after,
  .accordion .accordion-inner {
    transition: none !important;
    animation: none !important;
  }
}

This code applies globally to native Flatsome accordions. Existing accordion elements that use the standard Flatsome classes will inherit the design automatically.

How the Custom Plus and Minus Icon Works

The custom toggle uses CSS pseudo-elements instead of an image or external icon library. This keeps the design lightweight and allows the icon color and size to follow the rest of the FAQ styling.

Hide the Default Flatsome Icon

.accordion .accordion-title .toggle i {
  display: none !important;
}

Draw the Plus Symbol

The ::before pseudo-element creates the horizontal line. The ::after pseudo-element creates another line and rotates it by 90 degrees.

.accordion .accordion-title .toggle::before,
.accordion .accordion-title .toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.8px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.accordion .accordion-title .toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

Convert the Plus into a Minus

When the question opens, Flatsome adds the .active class to the title. The following rule hides the vertical line and leaves the horizontal line visible.

.accordion .accordion-title.active .toggle::after {
  opacity: 0;
}

Matching width and height values are important when the toggle uses a circular border. Theme rules can otherwise stretch the control into an oval.

Customize FAQ Colors with CSS Variables

CSS variables place the main design colors at the beginning of the code. You can change the visual style without having to search through every selector.

:root {
  --faq-accent: #a7c957;
  --faq-accent-dark: #7fa53a;
  --faq-title: #1f241d;
  --faq-text: #4a5147;
  --faq-card: #ffffff;
  --faq-open: #f7faf2;
}

Replace only the color values to match your website. For example, changing --faq-accent updates the focus outline, toggle border, and active toggle background wherever that variable appears.

Make the Flatsome FAQ Responsive

A desktop FAQ can feel too spacious on a small screen. Mobile rules should reduce question padding, answer spacing, text size, and toggle dimensions while preserving a comfortable touch target.

@media (max-width: 549px) {
  .accordion .accordion-title {
    padding: 16px 56px 16px 17px !important;
    font-size: 15px;
  }
  .accordion .accordion-title .toggle {
    right: 15px !important;
    width: 28px !important;
    height: 28px !important;
  }
  .accordion .accordion-inner {
    padding: 3px 17px 19px !important;
    font-size: 14px;
    line-height: 1.7;
  }
}

The 549px breakpoint matches a common Flatsome mobile breakpoint. Test the FAQ at several widths, as long questions can wrap differently depending on the website’s font and column width.

Add Keyboard Focus and Reduced-Motion Support

Keep Keyboard Focus Visible

Removing the native border or link styling must not remove the visible focus indicator. Keyboard users need to see which question currently has focus.

.accordion .accordion-title:focus-visible {
  outline: 2px solid #a7c957;
  outline-offset: -4px;
}

Respect Reduced-Motion Preferences

Some visitors prefer less animation. The prefers-reduced-motion media query removes transitions and reveal effects for those users.

@media (prefers-reduced-motion: reduce) {
  .accordion .accordion-item,
  .accordion .accordion-title,
  .accordion .accordion-title .toggle,
  .accordion .accordion-inner {
    transition: none !important;
    animation: none !important;
  }
}

How to Enable FAQ Schema in Flatsome

The custom CSS controls only the visual appearance of the accordion. Flatsome continues to control the FAQ structured data through the Accordion element settings.

1. Open the page in UX Builder.
2. Select the Accordion element.
3. Expand the Structured data settings.
4. Set FAQ Schema to On.
5. Save and update the page.

The structured data should contain the same questions and answers visitors can see on the page. Avoid adding hidden questions only for schema purposes.

FAQ schema can help search engines and other systems understand the relationship between each question and answer. It does not guarantee that Google will show an FAQ-rich result.

Global FAQ Styles Versus Scoped Styles

Global Flatsome FAQ CSS

A selector such as the following applies to native Flatsome accordions throughout the website:

.accordion .accordion-title {
  color: #1f241d;
}

Global styling requires no manual classes. Existing accordion elements update automatically after you add the CSS.

Scoped Flatsome FAQ CSS

A scoped style begins with a custom wrapper class and applies only to accordions within that section.

.product-faq .accordion .accordion-title {
  color: #1f241d;
}

Scoped styles work better when different pages need different FAQ designs. You must add the wrapper class to the relevant section, row, or column in UX Builder.

The free HexCoda FAQ pack uses global Flatsome selectors, which makes installation faster and avoids editing every existing page.

Common Flatsome FAQ CSS Problems

The New FAQ Style Does Not Appear

Clear the Flatsome CSS cache, the optimization plugin cache, the server cache, and the browser cache. Confirm that the code was added to the global Custom CSS field and that no older accordion style appears later in the stylesheet.

The Toggle Circle Looks Oval

Flatsome or another CSS rule may change the width, height, padding, or line height. Force equal dimensions and use border-box sizing.

.accordion .accordion-title .toggle {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

Several FAQ Styles Conflict

Use only one global accordion style at a time. Several CSS files that target the same Flatsome selectors will override one another according to their order and specificity.

The Mobile FAQ Has Too Much Space

Review the mobile media query and reduce the title padding, answer padding, and margins between accordion items. Long questions may also need more space on the right for the toggle.

The FAQ Schema Does Not Appear

Open the Accordion settings in UX Builder and confirm that FAQ Schema is enabled. Test the published page rather than the UX Builder preview, as structured data may not appear in the editor.

Download 10 Free Flatsome FAQ CSS Styles

HexCoda created 10 responsive styles for the native Flatsome Accordion element. The collection includes bordered cards, divider layouts, compact support rows, numbered questions, dark panels, product-focused layouts, and structured grid designs.

• 10 individual Notepad-compatible TXT files
• Responsive desktop and mobile CSS
• Editable color variables
• Native Flatsome Accordion compatibility
• Installation instructions
• No additional FAQ plugin required

Frequently Asked Questions

Quick answers about Flatsome accordion customization, CSS selectors, schema, and responsive behavior.