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.

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:

View on Github

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:

View on Github

Similarly, to make the Default sorting option operate based on the product title, use the following snippet:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

Alternatively, you may want to enable the toggle-box view when using the Stacked layout only:

View on Github

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.

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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!

Use of your personal data
We and our partners process your personal data (such as browsing data, IP Addresses, cookie information, and other unique identifiers) based on your consent and/or our legitimate interest to optimize our website, marketing activities, and your user experience.