Awesome FAQ – answer questions before customers ask vs Lightweight Accordion

Answer your visitors’ questions before they hit the contact form – beautiful, SEO-ready FAQ sections in minutes, no code required. Awesome FAQ | Pricing | Support | Live Demos Why Awesome FAQ? Awesome FAQ is a lightweight, user-friendly WordPress plugin that lets you create beautiful and responsive FAQ sections using Gutenberg Blocks or shortcodes. It’s perfect for bloggers, business owners, online shops, portfolios, and anyone who needs a simple and elegant way to display frequently asked questions. FAQ Schema (JSON-LD) is built right in. With one click, your FAQs are marked up with Google-recommended structured data – increasing the chances of rich results and “People Also Ask” snippets in search engines. No extra SEO plugin needed. An analytics dashboard also shows which questions get the most views, clicks, and engagement, so you can continuously improve your content. The Pro version goes further with an AI-powered FAQ generator: draft product FAQs for WooCommerce using OpenAI (GPT-4o), Anthropic (Claude Sonnet), or the native WordPress 7.0 Connectors API, and generate Q&A content with custom layout prompts right inside the Block Editor. Free Features 7 Modern FAQ Themes: Clean, professional accordion designs, free forever. Fully Responsive: Looks great on all devices out of the box. Two Column & Horizontal FAQ: Flexible layout choices beyond the standard accordion. Gutenberg Block Support: Add and customize FAQs visually in the block editor. Shortcode Support: Place FAQ sections in any page, post, or widget. FAQ Schema SEO: Google-recommended JSON-LD markup for rich results. AI-Powered Answer Generation: Generate answers for your FAQs. Smooth Animations: Polished open/close transitions. Fast and Lightweight: Optimized code with minimal footprint. Easy to Use: No coding needed, and 100% ad-free. Pro Version – AI Power & Advanced Layouts Upgrade to Awesome FAQ Pro for advanced customization, automated layout generation, and AI power. Pro features include: More Premium FAQ Templates: Exclusive interactive, pre-designed accordion layouts. Category & Filter FAQ: Organize your FAQs with filterable tabs for a cleaner presentation. FAQ Search System: Real-time live search bar so users find answers instantly. Multi-Column FAQ Grid: Multi-column and grid layouts to present FAQs beautifully. Design & Typography Controls: Full control over backgrounds, text colors, icons, borders, margins, and typography. AI-Powered Product FAQ Builder: Generate product-specific FAQs in seconds using OpenAI (GPT-4o), Anthropic (Claude Sonnet), or the native WordPress 7.0 Connectors API. WooCommerce Product FAQ Integration: Show custom FAQ sections directly on product pages, in a dedicated product tab or below the product summary. Block Editor AI Builder: Auto-generate Q&A content and dynamically customize layout designs, colors, and backgrounds in Gutenberg using custom prompts. Global Settings Panel: Configure AI models, API keys, and display options under WooCommerce → Settings → FAQ AI Settings. Analytics Dashboard: Track user interactions, views, and clicks to optimize your questions and answers. New: Ask AI Block – Interactive AI answer assistant that answers visitor questions instantly using your FAQ content, complete with source citations and user feedback. New: Bento FAQ Block – Modern asymmetric bento grid layout for FAQ cards with interactive focused modal previews, custom card sizing, and scroll animations. New: Nested FAQ Block – Multi-level accordion structure allowing sub-questions and multi-tier Q&A hierarchy with separate parent/child design controls. New: Ask AI Dashboard – Centralized admin dashboard for managing AI provider settings, custom system prompts, real-time query logs, token usage, and visitor feedback analytics. AI-Powered FAQ Builder Awesome FAQ Pro includes AI-powered tools for creating FAQ content. You can generate Q&A content directly inside the Gutenberg editor using custom prompts. For WooCommerce products, the AI FAQ builder can generate product-specific questions and answers using supported AI providers. Supported AI providers include: OpenAI (GPT-4o) Anthropic (Claude Sonnet) Native WordPress 7.0 Connectors API The AI features are designed to help you create FAQ content faster while still allowing you to review and edit the generated content before publishing. WooCommerce Product FAQs With Awesome FAQ Pro, you can add FAQs directly to WooCommerce product pages. Choose where your FAQ section appears: In a dedicated product tab Below the product summary You can write product FAQs manually or use the AI-powered product FAQ generator to create an initial set of questions and answers. This is useful for: Product specifications Shipping questions Return policies Product usage Compatibility questions Warranty information Customer support questions FAQ Analytics Awesome FAQ Pro includes an analytics dashboard that helps you understand how visitors interact with your FAQ content. Track: FAQ views Question clicks User interactions Popular questions Engagement Use these insights to identify the questions visitors care about most and improve your FAQ content. Ask AI block features (Pro) Answers from your own content only – the model receives your matching FAQ snippets and is told to reply from them, so it cannot invent an answer. Source citations – every answer can list the FAQ entries it was built from, which is what makes visitors trust it. Rotating placeholders – example questions cycle through the empty field so visitors know the box is worth using. Suggested question chips – clickable questions under the field that answer instantly. Visitor feedback – a customisable question with 👍/👎 buttons, so you can see which answers miss. Fallback link – send anyone the assistant could not help to your contact or support page. Disclaimer line – editable AI notice under the box. No answer, no guess – when nothing is close enough, the visitor gets related questions instead of a made-up answer. Full design control – colors for every part (heading, input, chips, answer box, labels, sources, feedback text), typography, background, borders, padding, and alignment. Ask AI Dashboard (Pro) Everything the assistant does is reported under Awesome FAQ → Ask AI, built around the two questions a site owner actually has: what is this costing me, and what are people asking that I have not answered yet. Dashboard Features: Questions today with a trend against the previous 7 days. Answered for free – how many replies came from the cache or straight from a FAQ, so cost nothing. AI calls today against your daily allowance. Unanswered – questions no FAQ covered. Found helpful – 👍 and 👎 totals from visitors. A daily bar chart splitting every answer into cached, from a FAQ, and answered by AI, so you can see whether questions are growing and how much of the load stays free. How to Use Awesome FAQ – Quick Start Using the Gutenberg Block: Open a page or post in the block editor. Click the Add Block (+) button and search for Awesome FAQ. Add the block, then choose a theme and set colors, icons, typography, and toggle options. Add your questions and answers. Publish – your FAQ section is live! Using a Shortcode: Go to Awesome FAQ → Add New FAQ in the dashboard. Enter your questions and answers, assign categories if needed, and click Publish. Copy the generated shortcode and paste it into any post, page, or widget. Using WooCommerce Product FAQs (Pro): Edit a WooCommerce product and scroll to the Product FAQ — Awesome FAQ box. Check Show FAQ Section on This Product. Write FAQs manually or click Auto-Generate from Product to draft them with AI. Pick a theme, click Update, and configure global options at WooCommerce → Settings → FAQ AI Settings. Use Cases Awesome FAQ can help solve common content and customer-support needs. Product FAQs – Answer common product questions before customers contact support. Service FAQs – Explain services, pricing, policies, and processes. SaaS FAQs – Answer questions about software features, plans, integrations, and onboarding. WooCommerce FAQs – Provide product-specific information directly on product pages. Support FAQs – Reduce repetitive questions by making common answers easy to find. Documentation FAQs – Organize common questions for documentation and help centers. Blog FAQs – Add useful Q&A sections to blog posts and articles. Agency FAQs – Explain services, workflows, pricing, and project processes. Portfolio FAQs – Answer questions about services, experience, projects, and availability. Love the plugin? Want new features? Need support? Send your feedback ⭐ Check out our other WordPress Plugins 🔥 Html5 Audio Player – Best audio player plugin for WordPress. 🔥 Html5 Video Player – Fully customizable video player plugin. 🔥 PDF Poster – Display PDFs beautifully on your website. 🔥 StreamCast – Powerful radio player plugin. 🔥 3D Viewer – Display interactive 3D models easily.

Lightweight Accordion plugin for WordPress allows you to add collapse elements to posts using a Gutenberg block or a shortcode (via classic editor). By using the details HTML tag and a few lines of CSS this allows for a javascript-free accordion for minimum page load. Extremely Lightweight (<1kb): Without using Javascript the plugin uses the native details HTML tag and a few lines of code for almost no impact on front-end. Customizable: Options include customizing the HTML tag used for the accordion title, open by default, borders, colors, and accordion grouping (auto-close others when one opens). Shortcode Usage examples Here are a few examples of using the accordion plugin with shortcodes. [lightweight-accordion title="My Accordion"]My Content[/lightweight-accordion] Additionally you can display the accordion open on load with the accordion_open option. [lightweight-accordion title="My Accordion" accordion_open=true]My Content[/lightweight-accordion] You can also change the html tag wrapping the title of the accordion using the title_tag option. [lightweight-accordion title="My Accordion" title_tag="h3"]My Content[/lightweight-accordion] If you want to include FAQ schema you can add the schema option and set it to faq. [lightweight-accordion title="What is your return policy?" schema="faq"]You have 1 week to return your items[/lightweight-accordion] If you’d like put a border around the content of the accordion you can use the “bordered” attribute. [lightweight-accordion title="Bordered Content" bordered=true]My Content[/lightweight-accordion] If you want accordions to auto-close when another opens (exclusive accordion), use the “group” attribute with the same value on each accordion. [lightweight-accordion title="Question 1" group="faq"]Answer 1[/lightweight-accordion] [lightweight-accordion title="Question 2" group="faq"]Answer 2[/lightweight-accordion] [lightweight-accordion title="Question 3" group="faq"]Answer 3[/lightweight-accordion] If you’d like to swap the default triangle marker for a chevron or plus/minus icon (optionally on the right side of the title) use the “icon” and “icon_position” attributes. [lightweight-accordion title="My Accordion" icon="chevron" icon_position="right"]My Content[/lightweight-accordion] Shortcode Options Here is the full listing of shortcode options. Additionally all of these options are accessible when using the Gutenberg block. title (Required Default: null) The title of your accordion will be displayed at the top for users to click. A good example would be to include a user’s question so they could click it for more details. content (Required Default: null) Content that will go into your accordion element. title_tag (Default: “span”) This sets the html tag that wraps the title in the accordion summary. Useful if you want to make it a heading tag for SEO purposes. accordion_open (Default: false) Set this to true if you want your accordion to be open by default. bordered (Default: false) Set this to true if you want a border around the accordion content. title_text_color (Default: false) Set this to a hex value or CSS color to change the color of the accordion title text. title_background_color (Default: false) Set this to a hex value or CSS color to change the color of the accordion title text. schema (Default: false) Set this to faq if you’d like FAQ schema to be included. class (Default: false) Used to add a custom class to the parent container of the accordion. anchor (Default: null) Adds the value as an ID to the accordion div as an anchor. autop (Default: true) By default the shortcode will wrap text in a ‘p’ tag. Set this to false if you’d like this disabled for the specific accordion. group (Default: false) Set this to a group name to make accordions with the same group auto-close when another opens. Uses the native HTML details name attribute for zero JavaScript overhead. icon (Default: false) Set this to “chevron”, “plus”, or “none” to replace the default triangle marker. The chevron rotates and the plus becomes a minus when the accordion opens. icon_position (Default: false) Set this to “right” to display the chevron or plus icon on the right side of the accordion title. Additional Details If you’d like to remove the “lightweight-accordion.css” from being enqueued on your site use the filter below. It’s recommend you style the accordion yourself if you use this filter. add_filter('lightweight_accordion_include_frontend_stylesheet', '__return_false' ); If you’d like to remove the “lightweight-accordion/editor-styles.css” from being enqueued in the admin area of your site you can use the filter below. add_filter('lightweight_accordion_include_admin_stylesheet', '__return_false' ); If you’d like to remove processing of shortcodes in accordion content you can use this filter. add_filter('lightweight_accordion_process_shortcodes', '__return_false' ); If you’d like to use inline Microdata for FAQ schema you can use this filter. (Not recommended) add_filter('lightweight_accordion_output_microdata', '__return_true' ); If you’d like to force “lightweight-accordion.css” to load on all of your site you can use this filter. By default the plugin will detect if the block or shortcode is used and enqueue the CSS. add_filter('lightweight_accordion_always_include_frontend_stylesheet', '__return_true' ); When a page contains an accordion a tiny inline script is added to the footer that automatically opens accordions targeted by a URL hash (for example a link to an accordion’s anchor). If you’d like to disable this you can use the filter below. add_filter('lightweight_accordion_anchor_script', '__return_false' );