Integration

Add the accessibility widget to WooCommerce.

Add your own reading aids to selected WooCommerce shop pages. The reading aids complement your work on an accessible website.

Guide checked on

What you need

WordPress 7.0 or later, active WooCommerce 11.2.2 or later, PHP 7.4 or later (8.3 recommended) and administrator rights. The standard WordPress plugin is optional. In Accessonaut, first create a project with your actual website domain and open the installation page in the project.

Step by step

  1. Make a backup and set up a test copy of your shop. Check that WordPress, PHP and WooCommerce meet the required versions.
  2. Download the ZIP file from the WooCommerce download page and install it via Plugins → Add New Plugin → Upload Plugin. Activate Accessonaut for WooCommerce.
  3. Open WooCommerce → Accessonaut. Copy the HTTPS service address and the public project ID from your Accessonaut project.
  4. Choose the central project design or local settings. Five templates and a preview you load explicitly help you customise it.
  5. Check the area selection: shop overview, products, product categories and product tags are preselected. Cart, checkout and customer account are deselected at first and are only included once you enable them separately.
  6. Read the notes on the external service and switch the widget on explicitly. Save, clear caches and check the selected pages, including mobile views and keyboard operation.

The WooCommerce plugin

The plugin adds the code for you. It is available as a ZIP. Activating it alone does not start a connection: you only switch the widget on explicitly after configuring it. The WooCommerce plugin works without the standard WordPress connector.

Plugin and installation notes

Match the design to your website

In your Accessonaut project, open “Reading-aid widget”. Five templates and a live preview help you with the design: colours, fonts, menu width, corners, shadows, an icon or labelled opener and your own texts. Position and edge spacing can be set separately for desktop and smartphone. After saving, your existing embed code picks up the project design automatically; the public configuration is cached for up to one minute.

In the WooCommerce plugin you can choose local settings instead. These take priority over the project design. Design options are available on all plans. On the Free plan, the Accessonaut notice stays visible. Your visitors’ personal reading settings take priority over design defaults.

Keep in mind

Order confirmations and pages for paying orders that already exist always stay excluded. If you use both plugins, the WordPress connector from version 1.2.0 handles the other pages; WooCommerce areas are controlled by the WooCommerce plugin. You need to remove additional scripts from the theme or tag manager. The integration does not change any order, payment or Store API logic.

Common questions about WooCommerce

Do I need to exclude Cart, Checkout and My Account from the page cache?

Yes. WooCommerce recommends not caching these three pages in caching plugins, because they show customer-specific content. This applies regardless of the widget. If you change the area selection in the plugin, clear the caches of the other shop pages afterwards.

Does the plugin work with the Checkout block and the classic checkout?

The plugin declares compatibility with the Cart and Checkout blocks and with HPOS. It does not interfere with order submission. Since WooCommerce 8.3, new stores use the blocks by default; existing stores keep their variant. Test exactly the variant your shop uses.

Do I also need the standard WordPress plugin?

Only if the widget should also appear outside the shop, for example on the blog or contact page. The WooCommerce plugin only controls recognised shop areas. The standard plugin then handles all other pages. Use version 1.2.0 or later for this.

Why don’t I see reading-aid usage for shop pages?

In WooCommerce mode, the widget sends no anonymous usage reports. That way, requests only ever contain the website origin. Opened menus and reading aids switched on on these pages therefore do not appear in “Usage & analytics”.

What happens if I deactivate the WooCommerce plugin?

It then stops outputting the script on shop pages. If the standard WordPress plugin is active, though, it takes over these pages again, including cart and checkout, and without WooCommerce mode. Deactivate both plugins if needed. If you delete the WooCommerce plugin, it removes its settings.

If something does not work

The widget is missing on the cart or checkout.

Cause: These areas are deselected in the area selection at first. Order confirmations and payment pages for existing orders always stay excluded.

Fix: Select cart, checkout or customer account explicitly under WooCommerce → Accessonaut, save and clear the caches.

In the shop, the widget still sends page addresses.

Cause: An additional embed from the theme or tag manager loads first. The widget starts only once per page, with the script that runs first. Standard mode then applies instead of WooCommerce mode.

Fix: Remove all other embeds. On shop pages, the source may only contain the script with data-privacy-mode="commerce".

Check the installation

  • Open a shop page you have explicitly enabled in a private window. The widget appears exactly once.
  • Reach the button with the keyboard. Open the panel, change the text size and close it again.
  • Check the homepage, a subpage, a form and the mobile view. The widget must not cover any important controls.
  • In the Network tab, check that widget.js and the project configuration load from your service address. If there are errors, check the domain, project ID and CSP.
  • For Free projects, the visible Accessonaut notice remains part of the widget. Permissions come from your project.

Test cart, checkout and account separately

  • Check product variants, quantity selection, the mini cart and dialogs with the keyboard. Check focus, closing and the return to the element that opened them.
  • Test your classic or block-based cart and checkout with a filled test cart, form errors and shipping and payment selection. If you use both variants, check both.
  • Without separate approval, cart, checkout and customer account stay without the Woo widget. Order confirmations and pages for paying orders that already exist always stay excluded.
  • Check embedded payment fields separately and use test payments in the test shop. The plugin does not change any payment, order or Store API flows.
  • If both Accessonaut plugins are active, use the standard connector from 1.2.0. WooCommerce areas follow only the settings of the WooCommerce plugin; all other pages follow the standard connector.

Privacy and limits

When it loads, the visitor’s browser fetches the script and the project configuration from the Accessonaut service. This involves the IP address, browser request data and the website hostname. Display preferences are stored locally in the browser. Cover the integration in your privacy notice and check your specific configuration.

For the project configuration, WooCommerce mode only uses the website origin made up of protocol, hostname and, if applicable, port. Full page addresses and parameters are not sent for this. Widget requests are made without a referrer. Alt-text assignments and the private browser assistant are not loaded in this mode.

The reading aids do not guarantee conformance. Also check barriers in the source code and complete user journeys, both automatically and manually.

Official platform documentation

WooCommerce: Distinguishing shop areas and endpoints

Practical knowledge for your next steps

All articles in the knowledge base