Snippets

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.

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, as in the following snippet:

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:

1. Navigate to WooCommerce > Settings > Products > Inventory.
2. 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:

Hide terms with no matching products when option filtering is enabled on a component

↑ Back to top

When you enable the Options Filtering option in a component, a field shows up where you can select some product attributes. Then, when you view the Composite Product, these attributes show up in the filters container together with all the terms they include.

Composite Products does not perform any checks to make sure that at least one product exists for each term. This is because enforcing these checks would have a significant performance impact on the page.

In the above example, it is possible that there aren’t any Blue products in the component. However, the Blue term still shows up. If clicked, it returns an empty products set.

To remove the terms that do not have any matching products, use the following snippet:

To identify the correct term IDs in your case, please follow these steps:

1. Navigate to Products > Attributes.
2. Select a specific attribute.
3. Click the Configure terms button.
4. Select a term and check its URL for the ID.

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:

Set a default quantity for a component

↑ Back to top

To set a default quantity for a component, use the following snippet:

Before using this snippet, replace 1234 with the ID of the component for which you’d like to set a default quantity. You can find the ID of each component by:

• Navigating to Product Data > Components and;
• Hovering over a specific component.

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 snippet:

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.

To prevent this, use the following snippet/plugin, which relies on the woocommerce_add_composited_cart_item_subtotals and woocommerce_add_composited_order_item_subtotals filters:

Questions & Support

↑ Back to top

Have a question? Please fill out this pre-sales form.
Already purchased and need assistance? Get in touch with us via the Help Desk!