How to define new custom functions
The price formula field type in WooCommerce Product Options allows store owners to create custom calculations for product prices based on information that the customer provides. In addition to the long list of Mathematical and Logical functions that ship with the plugin, you are offered the possibility to define new custom functions that you can use in any price formula, the same way you use the factory ones. This article provides details on how to add those new functions.
Server- and client-side
WooCommerce Product Options evaluates a price formula both on the client side (Javascript) and on the server side (PHP). The reason is that customers need to see the price update in real-time while they select different options (and those changes occur in the browser of the customer, in Javascript) but WooCommerce also needs to recalculate a formula while adding a product to the cart (and that process occurs on the server, in PHP).
For this reason, when you define a custom function, you have to define it in both languages. This is how it works:
PHP
A custom function can be defined through the wc_product_options_formula_custom_functions filter. The callback function attached to that filter must return an array, initially empty, of custom functions. The following code is just a simple example that adds a function called double, which multiplies a number by 2.
<?php
add_filter( 'wc_product_options_formula_custom_functions', 'my_wpo_custom_functions' );
function my_wpo_custom_functions( $functions ) {
$user_defined_functions = [
'double' => function ( $number ) {
return 2 * $number;
},
'triple' => function ( $number ) {
return 3 * number;
},
]
return array_merge( $functions, $user_defined_functions );
}
Javascript
To let the plugin add our custom functions also on the client side, we use a different filter that will be responsible for adding our custom functions to the main script. The filter we are going to use is wc_product_options_formula_custom_js_functions.
<?php
add_filter( 'wc_product_options_formula_custom_js_functions', 'my_wpo_custom_js_functions' );
function my_wpo_custom_js_functions( $js_functions ) {
$js_functions = '{
...' . $js_functions . ',
double: ( value ) => 2 * value,
triple: ( value ) => 3 * value,
}';
return $js_functions;
}
As you can easily recognize, in this case, we return a string that corresponds to the definition of an object as if it were written in Javascript language. But we also use the spread operator ... so that the filter can be called repeatedly without overwriting any previous additions to the custom functions.
This mechanism makes it possible to attach multiple filter callback functions as follows:
<?php
add_filter( 'wc_product_options_formula_custom_js_functions', 'my_wpo_custom_js_functions' );
function my_wpo_custom_js_functions( $js_functions ) {
$js_functions = '{
...' . $js_functions . ',
double: ( value ) => 2 * value,
}';
return $js_functions;
}
add_filter( 'wc_product_options_formula_custom_js_functions', 'my_other_wpo_custom_js_functions' );
function my_other_wpo_custom_js_functions( $js_functions ) {
$js_functions = '{
...' . $js_functions . ',
triple: ( value ) => 3 * value,
}';
return $js_functions;
}
which becomes essential when multiple third-party plugins add their own user-defined functions to WooCommerce Product Options.
While there are other ways to expand a javascript object with actual Javascript code, this method has the major benefit of keeping the addition of custom functions for both the client and the server side in the same place. That makes it easier to ensure that a custom function gets added to both sides.