Forge12 Accessories for WooCommerce

Version 2.2.0  |  WordPress 5.8+  |  WooCommerce 6.0+  |  PHP 7.4+
forge12.com  |  Support: info@forge12.com

A. Installation

1. Upload the f12-woo-accessoires folder to /wp-content/plugins/, or install via Plugins > Add New > Upload Plugin.
2. Activate the plugin through the Plugins menu in WordPress.
3. Navigate to Forge12 Accessories in the admin menu to configure the plugin.

System Requirements

B. Dashboard

The Dashboard is the starting page when you open Forge12 Accessories in the admin menu. It provides a quick overview of your accessory configuration.

Quick Stats

Quick Actions

Shortcuts to the most important plugin pages: Settings, Features, Overview, and the WooCommerce product editor.

C. Adding Accessories to Products

Accessories are assigned on the product edit screen in WooCommerce.

1. Go to Products > All Products and edit a product.
2. In the Product data panel, click the Accessories tab.
3. Use the search field to find products and click to add them.
4. Drag and drop accessories in the list to reorder them.
5. Click Update to save the product.

Accessory Picker

The unified accessory picker provides:

• Search – Find products by name or SKU.
• Sortable List – Drag and drop to reorder accessories.
• Recommended Badge – Click the star icon to mark an accessory as recommended (requires the Recommended Badge feature to be enabled).
• Category Inheritance – Below the picker, a note shows any additional accessories inherited from product categories.

Product Metadata

D. Category Assignment

You can assign accessories to entire product categories. All products in that category will automatically display the assigned accessories.

1. Go to Products > Categories.
2. Edit a category (or add a new one).
3. Scroll to the Optional Accessories field.
4. Search and add products as accessories.
5. Save the category.

E. Optional Accessories Settings

Navigate to Forge12 Accessories > Optional Accessories to configure the display of optional accessories.

Basic Settings

Position Options

F. Layouts

Grid Layout

The default layout. Accessories are displayed in a responsive product grid using WooCommerce's standard product card markup. Configurable from 2 to 4 columns.

List Layout

A single-column list layout. Each accessory is shown in a full-width row with image, title, price, and Add to Cart button.

Checkbox Layout (Frequently Bought Together)

A "Frequently Bought Together" style layout with checkboxes. Features include:

• The main product is always listed first and pre-selected (cannot be unchecked).
• Select All / Deselect All buttons for quick selection.
• A selection counter showing how many items are selected.
• A live total price that updates as checkboxes are toggled.
• A single Add selected to cart button that adds all selected products at once via AJAX.

Inline Layout

A compact layout designed for the "Before Add to Cart" position. Characteristics:

• Checkboxes are integrated into the WooCommerce product form.
• Shows up to 3 accessories by default, with a "Show more" toggle for additional items.
• Displays a live total price combining the main product and selected accessories.
• Selected accessories are automatically added to the cart with the main product.

Pro Layouts

The following layouts are available with the Pro add-on:

G. Display Options

Control which product details are shown for each accessory item. These toggles are available in the Display Options section of the Optional Accessories settings.

H. Cart Crossselling

Display accessories from cart products on the cart page to encourage additional purchases.

Navigate to Forge12 Accessories > Cart to configure.

I. Design System

The Design System lets you customize the visual appearance of all accessory sections. Navigate to Forge12 Accessories > Design.

Global Colors

Global Settings

Preset Themes

Choose from four preset themes to quickly style your accessories:

• Default (Blue) – The standard blue theme.
• Dark – Dark backgrounds with light text.
• Warm – Warm color palette with orange/brown tones.
• Minimal – Clean, minimal design with subtle borders.

Element-Specific Settings

Fine-tune the appearance of individual elements. Each element supports:

• Font Size (10–48px), Font Weight (300–700), Font Family, Color
• Padding, Margin, Border Width, Border Color

Live Preview

The Design page includes a live preview panel that updates in real time as you adjust settings. This lets you see exactly how accessories will look before saving.

J. Features Page

The Features page (Forge12 Accessories > Features) lets you enable or disable individual features. Only enabled features load their code, keeping the plugin lightweight.

Frontend Features

SEO & API

Admin Tools

Feature Tooltips

Each feature on the Features page includes an info tooltip with a detailed description of what it does and any dependencies.

K. Accessory Overview

The Overview page (Forge12 Accessories > Overview) provides a reverse lookup: see which products and categories use each accessory.

Features

• Filter by Type – Show only optional or required accessories.
• Search – Find accessories by product name.
• Sort – Sort by name, SKU, or assignment count.
• Pagination – 20 items per page.
• Type Badges – "O" for optional, "R" for required (Pro).
• Source Info – See whether the assignment is from a product or category.
• CSV Export – Download the overview as a CSV file.
• Quick Actions – Edit or view the product directly.

L. Shortcode

Use the shortcode to display accessories anywhere on your site:

[f12-woo-accessories]

Place this shortcode on any page, post, or widget area. On product pages, it will display the accessories configured for that product. The shortcode respects all settings from the Optional Accessories page (layout, display options, etc.).

M. Template Overrides

All frontend templates can be overridden from your theme. Copy the template file from the plugin into your theme directory and modify it.

Override Path

Copy from:

wp-content/plugins/f12-woo-accessoires/templates/{template-name}.php

To:

wp-content/themes/your-theme/f12-woo-accessoires/{template-name}.php

Available Templates

Admin Templates

N. Hooks & Filters (Developers)

Actions

Filters

CSS Custom Properties

All design settings are available as CSS variables on the :root element:

/* Colors */
--f12-color-primary
--f12-color-primary-hover
--f12-color-primary-text
--f12-color-bg
--f12-color-border
--f12-color-text
--f12-color-price
--f12-color-badge

/* Layout */
--f12-border-radius
--f12-box-shadow

/* Element-specific (examples) */
--f12-heading-font-size
--f12-heading-font-weight
--f12-heading-color
--f12-card-padding
--f12-container-margin
--f12-button-font-size
/* ... and more for each element */

O. Frequently Asked Questions

Can I assign accessories to variable products?

Yes. Accessories can be assigned to any product type including simple, variable, grouped, and external products.

Will accessories be shown if they are out of stock?

By default, yes. If you enable the Stock Alerts feature, out-of-stock accessories will display a badge. WooCommerce's own stock settings control whether customers can still purchase them.

Can I use the same accessory for multiple products?

Yes. A product can be an accessory for any number of other products. Use the Overview page to see all assignments for a specific accessory.

How do category-level accessories interact with product-level accessories?

They are merged. If a product has its own accessories and also belongs to a category with accessories, both sets are displayed. Duplicates are automatically removed.

Can customers override my theme's styles?

The plugin uses CSS custom properties for all styling. You can override any variable in your theme's stylesheet. Alternatively, use the Design System to adjust the appearance without writing CSS.

Where can I get support?

Contact us at info@forge12.com or visit forge12.com.

© Forge12 Interactive  |  forge12.com