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.
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:
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:
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:
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:
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:
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.
To add a permalink to the selected component option section that redirects to the product page, use the following snippet:
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:
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:
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:
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:
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:
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:
By default, composite products with component discounts are listed as On Sale. Use the following snippet to prevent this:
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:
First, make sure that you are using the latest version of Composite Products. Then, activate the following snippet:
To hide “Free!” price strings from drop-downs and selected product details, use the following snippet:
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.
To display a Total string before the total Composite Price, use the following snippet:
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:
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:
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:
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.