In this document, you will find many useful snippets for customizing the appearance and functionality of Composite Products.
To use a snippet, you can download the linked file and activate it as you would do with any other plugin. Alternatively, you can copy the contained code into your child theme’s functions.php file.
Note: We are unable to provide support for customizations under our Support Policy. If you need to customize a snippet, or extend its functionality, seek assistance from a qualified WordPress/WooCommerce Developer. We highly recommend Codeable, or a Certified WooExpert.
Components & Component Options ↑ Back to top
Change the default component options sort order ↑ Back to top
To change the default sort order of Component Options, you can use the woocommerce_composite_component_default_orderby filter.
For instance, to change the default Component Options sorting option from “Default sorting” to “Sort by price”, use the following snippet:
By default, if you use the “Select Products” method to enter Component Options, the Default sorting option will sort products in the order they have been entered in the Component Options field.
To make the Default sorting option operate based on menu_order instead, use the following snippet:
Similarly, to make the Default sorting option operate based on the product title, use the following snippet:
Change the component options thumbnail columns count ↑ Back to top
The number of Component Options columns when using the Thumbnails setting can be changed by using the woocommerce_composite_component_loop_columns filter. The following snippet is a simple example of setting the product thumbnails column count to 2:
Change the component options thumbnails per page ↑ Back to top
The number of Component Options loaded per-page when using the Thumbnails setting can be changed by using the woocommerce_component_options_per_page filter. The following snippet is used to set the results count to 12:
Grey-out disabled component options when using Scenarios ↑ Back to top
When using Scenarios to Hide Component Options, incompatible products and variations are hidden by default.
To grey-out, instead of hiding them, you can use the woocommerce_component_options_hide_incompatible filter:
Enable/disable the toggle-box component view ↑ Back to top
By default, Components are displayed in toggle-boxes when using the Progressive layout.
This behavior can be changed by using the woocommerce_composite_component_toggled filter. For instance, you can use the filter to disable the toggle-box view completely:
Alternatively, you may want to enable the toggle-box view when using the Stacked layout only:
Require Components to be configured in sequence when using the Componentized layout ↑ Back to top
By default, the Componentized layout does not require Components to be configured in sequence. Using this snippet will imitate the Stepped layout behavior, where access to a Component is possible only if all preceding Components have been configured.
Add a permalink to the selected component option’s product page ↑ Back to top
To add a permalink to the selected component option section that redirects to the product page, use the following snippet:
Always display the “Choose an option” placeholder dropdown option and the “Clear Selection” button ↑ Back to top
When you use the Dropdown style without defining a Default Option, a “Choose an option” placeholder option is added to the top of the drop-down menu. This placeholder option is omitted when a Default Option is defined unless the Component is Optional.
The visibility of the Clear Selection button also complies with the same rule — when a Default Option is defined, the Clear Selection button is not visible, unless the Component is Optional.
To override this behavior, use the following snippet:
Make the selected component option show up at the top of the component ↑ Back to top
When you use the Load More pagination option, the selected component option shows up between component options.
To make the selected component option show up at the top of the component instead, use the following snippet:
Hide out of stock component options ↑ Back to top
To hide out of stock products from showing up inside components:
- Navigate to WooCommerce > Settings > Products > Inventory.
- Check the Hide out of stock items from the catalog.
When this option is enabled, out of stock products are hidden in Shop Archives as well. To hide out of stock products inside components only, use the following snippet:
Automatically select the remaining available variation in a component ↑ Back to top
If you have set up Scenarios that exclude all but one variation in a specific component and you’d like to select it by default, use the following snippet:
Composite Summary/Review ↑ Back to top
Change the number of columns in the summary/review section ↑ Back to top
To change the max number of component columns in the Summary/Review section, you can use the woocommerce_composite_component_summary_max_columns filter. The following snippet is a simple example of setting the Summary/Review section column count to 3:
Display the configuration summary widget in the review/summary step ↑ Back to top
When you use the Stepped or Componentized layout, the configuration summary widget is hidden in the review/summary step, as it is already displayed inside the step’s content.
To display the configuration summary widget in the review/summary step, use the following widget:
Pricing ↑ Back to top
Prevent composite products with component discounts from being listed as on-sale ↑ Back to top
By default, composite products with component discounts are listed as On Sale. Use the following snippet to prevent this:
Calculate discounted component prices over regular prices ↑ Back to top
By default, Component discounts reduce the final price of on-sale Component Options even further.
Alternatively, you may prefer to ignore sale prices and always apply Component discounts over the regular prices of the selected Component Options. This is possible using the woocommerce_composited_product_discount_from_regular filter:
Prevent composite price strings from showing up in range-format ↑ Back to top
First, make sure that you are using the latest version of Composite Products. Then, activate the following snippet:
Hide/replace the “Free!” Component Option price strings that show up when a Component is Priced Individually ↑ Back to top
To hide “Free!” price strings from drop-downs and selected product details, use the following snippet:
Replace the displayed price string of a Composite product with your own custom string ↑ Back to top
Use this snippet to define your own custom price strings for Composite products – useful if you have activated the Hide Price option to reduce server load:
The snippet will add a new “Custom Price” field under the Product Data > General tab, which you can use to define your own custom price string.
Display a “Total” string before the total composite price ↑ Back to top
To display a Total string before the total Composite Price, use the following snippet:
Hide the total composite price when the configuration is invalid ↑ Back to top
By default, the total Composite price shows up even if the components configuration is invalid (for example, if an out of stock product is selected in a component). To prevent the total Composite price from showing up when the components configuration is invalid, use the following snippet:
Calculate a components’ Relative Price based on the selected option ↑ Back to top
By default, the a component’s Relative price is calculated based on the default option. To calculate components Relative Price based on the selected option, use the following snippet:
Cart & Orders ↑ Back to top
Hide components in the cart, checkout, order and e-mail templates ↑ Back to top
The snippet will hide all line items associated with Components from the cart, checkout, order and e-mail templates. When the snippet is active, customers will see only the parent line item associated with the Composite product:
Change the way item subtotals appear in the cart/orders ↑ Back to top
By default, the cart item subtotal of a composite container item is calculated as the sum of the base composite price subtotal + the subtotals of any components that are priced individually. Additionally, the subtotals of individually-priced components are displayed with an ‘Option subtotal:’ prefix.