Update Composite Products template overrides

If your theme overrides Composite Products templates, update those copies when the extension changes its templates. Updating the plugin doesn’t replace files in your theme. This guide helps you compare an override with the installed template, preserve your customizations, and verify the result.

Before you start

↑ Back to top

Work on a staging copy of your store and back up your theme files. You’ll need access to the active theme or child theme and the installed Composite Products plugin files. If a theme author maintains the override, ask them to supply a compatible update.

These instructions apply to PHP template files, including PHP files that output JavaScript templates. They don’t describe editing a block theme’s Single Product template in the Site Editor.

Find template overrides

↑ Back to top

1. Go to WooCommerce > Status and open the system status report.
2. Find the Composite Products section and check Template overrides for theme files marked out of date.
3. Compare the listed override with the corresponding file under wp-content/plugins/woocommerce-composite-products/templates/. Check the @version header in both files. Template versions can be older than the plugin version.

The version check identifies older or missing version headers. A matching version number alone doesn’t prove that an override contains the current changes. Review the file diff too.

Merge the current template into your override

↑ Back to top

1. Start from the corresponding template in the installed extension, then reapply the changes your theme needs. Don’t replace a customized file without reviewing what would be lost.
2. Keep the same relative path under your theme’s woocommerce/ directory. For example, the radio-button option template belongs at your-child-theme/woocommerce/single-product/js/options-radio-buttons.php.
3. Preserve the template’s escaping, accessibility attributes, and required markup. Don’t edit the plugin’s own files or change only the override’s version header to suppress a warning.
4. Save the updated override on staging and clear any page or asset caches used by the store.

Radio-button option template change

↑ Back to top

Composite Products 11.1.2 updated templates/single-product/js/options-radio-buttons.php from template version 11.0.0 to 11.1.2. The radio button’s label now prefers the plain-text option title, with the existing display title as a fallback. This avoids double-escaped characters in the accessible label.

The label’s escaped interpolation changed from:

{{ data[ index ].option_display_title }}

to:

{{ data[ index ].option_display_title_text || data[ index ].option_display_title }}

Keep the double braces. The visible option title elsewhere in the template uses separate markup; don’t replace every title expression with this attribute expression. Use the current installed file as the starting point for your merge.

Stores that don’t override this file receive the template change through the extension update.

Verify the updated override

↑ Back to top

1. Reload the system status report and check that the updated override is no longer marked out of date.
2. Open a Composite Product that uses Radio Buttons for its component options. Include an optional component so you can check its empty-selection label.
3. Check the radio buttons’ accessible names in your browser’s accessibility inspector. A component title containing an ampersand should be read as an ampersand, rather than the literal text &.
4. Select and clear options, change quantities, and add a valid configuration to the cart. Confirm that labels, selections, validation messages, prices, and your intended theme customizations still work.
5. Deploy the reviewed theme changes, clear production caches, and repeat the relevant storefront checks.

If the page stops working, restore the backed-up override on staging and compare the diff again. If the issue occurs with the extension’s unmodified template too, use the support options below.