🧩 Getting Started with WooCommerce Accordions & Tabs Manager (WOOATM) #
Welcome to the WooCommerce Accordions & Tabs Manager (WOOATM) plugin – the ultimate solution to customize, rearrange, and style product tabs with accordion and tabbed views. This plugin enhances product page usability and allows better content organization with beautiful, customizable UI options.
Follow the steps below to get started:
✅ Step 1: Enable the Plugin #
-
Navigate to WooCommerce > Settings > WOOATM.
-
Check the box to Enable Accordions & Tabs Manager.
-
(Optional) Enable WOOATM Custom Tabs if you want to add your own custom tabs to product pages.
🧭 Step 2: Choose the Layout Style #
Under WooCommerce Tabs Design, choose how you want tabs displayed:
-
Horizontal Tabs
-
Vertical Tabs
-
Accordion (best for mobile and compact displays)
You can also set the WooCommerce Tabs Position:
-
After Product Summary
-
After Product Description
⚙️ Step 3: Set Layout Gaps & Fonts #
-
Gap between tabs (px): Sets spacing between tab buttons.
-
Gap between accordions (px): Sets vertical spacing for accordion elements.
-
Accordion/Tab Title Font Size: Define the font size for headings.
🎨 Step 4: Customize Tab & Accordion Appearance #
Style your tabs/accordions with various color and layout settings:
-
Background Colors for tab and active tab.
-
Title Colors for normal and active state.
-
Content Text and Background Color
-
Border Color for tab or accordion elements.
🧩 Step 5: Style & Icons #
-
Accordion Style & Tab Style: Choose from predefined visual styles.
-
Tabs Alignment: Set tab titles to align left, right, or center.
-
Accordion Icon Position: Left or Right.
-
Icons: Customize default and active icons.
-
Icon Font Size & Arrow Color: Modify for better visibility.
🛠️ Step 6: Behavior Settings #
-
Keep accordions like when page loads: Choose whether accordions load open or closed.
-
Tabs to accordion break point width (px): Automatically converts tabs to accordion below a certain screen width.
🗂️ Step 7: Manage & Add Custom Global Tabs #
-
Use the Global Tabs section to create reusable content blocks across all products.
-
Click Add New, name your tab, and enter content using the visual editor.
-
Reorder tabs via drag-and-drop in the Tabs Sorting section (Custom Tab, Reviews, Description, Additional Info, Global).
