PHP API
Modifying templates
Create a folder wc-product-table in your child theme and add your custom template there.
Adding custom elements
Add the Shortcode element in a table column. This element parses shortcodes entered in it and prints the output in the table in each row. The current row product is help in global variable $product. So you can use that context to generate your markup. Create a custom shortcode to print out your custom output. Use the Shortcode element to print out the markup.
↳ To initialise the element you can use the javascript event wcpt_after_every_load
that is run once on the .wcpt
container when page first loads and upon every AJAX request for fresh product results. You can also use the trigger wcpt_layout
that is run more often, every time the size of the table changes due to internal elements or browser resize. Both events are described further in the Javascript API section on this page.
Modifying element settings
You can modify the settings of any product table element programatically. Every table element will be run through the filter: wcpt_element before the plugin processes its HTML markup based on its settings.
This filter provides one argument to the callback function:$element
– An array containing all the element’s settings.
Within your callback function you can also refer to the global $product variable to access the current product. This global $product variable will hold a different product each time a new product row is being printed. So your callback function can make changes to the element specific to the current row product.
To ensure that you are targeting the correct element, you need to check that the $element[‘type’] matches the specific element you wish to modify before modifying the markup.
For example, if we wanted to add some text before the ‘Category Filter’ element we would use this code:
add_filter('wcpt_element', 'wcpt_custom__modify_element_settings', 100, 1);
function wcpt_custom__modify_element_settings( $element ){
if( $element['type'] == 'category_filter' ){
$element['single'] = 'true';
}
return $element;
}
Another way to identify the specific element is to go to its settings and give it an HTML Class and in your callback function check if $element['html_class']
matches the HTML class that you are targeting.
Modifying element markup
After the plugin has processed the HTML for any table element, it will run the markup through a filter before printing it. You can hook in here and completely modify the markup for the element. The filter is: wcpt_element_markup
This filter provides two arguments to the callback function:$markup
– HTML markup generated by the plugin for this element.$element
– An array containing all the element’s settings.
Within your callback function you can also refer to the global $product variable to access the current product. This global $product variable will hold a different product each time a new product row is being printed. So your callback function can make changes to the element specific to the current row product.
To ensure that you are targeting the correct element, you need to check that the $element[‘type’] matches the specific element you wish to modify before modifying the markup.
For example, if we wanted to add some text before the ‘Category Filter’ element we would use this code:
add_filter('wcpt_element_markup', 'wcpt_custom__modify_element_markup', 100, 2);
function wcpt_custom__modify_element_markup( $markup, $element ){
if( $element['type'] == 'category_filter' ){
$markup = '<span>Custom text</span>' . $markup;
}
return $markup;
}
Another way to identify the specific element is to go to its settings and give it an HTML Class and in your callback function check if $element['html_class']
matches the HTML class that you are targeting.
Modifying table markup
The complete table markup is passed through the wcpt_markup
filter.
Modifying table query args
All the table query args are passed through the filter: wcpt_query_args
This filter provides one argument to the callback function:$query_args
– An array of query args for the product table query.
Example code:
add_filter( 'wcpt_query_args', 'wcpt__custom_query_args' );
function wcpt__custom_query_args( $query_args ) {
$table_data = wcpt_get_table_data(); // table data
// modify query args here
return $query_args;
}
↳ Variation table
If you have created a variation table and each line of the table is displaying a separate variation then you need to use this filter hook to modify the variation query args: wcpt_variation_query_args
Example code:
add_filter( 'wcpt_variation_query_args', 'wcpt__custom_query_args' );
function wcpt__custom_query_args( $query_args ) {
$table_data = wcpt_get_table_data(); // table data
// modify query args here
return $query_args;
}
Modifying products fetched by table query
The product results received through the table query are passed through this filter: wcpt_products
Please keep in mind this set only contains the products displayed on the current page, not the entire result set for the table. So if the product table has 100 products, and only 10 displaying per page, then this result will hold the current 10 products.
This filter provides one argument to the callback function:$products
– A WP_Query object with query args and product results for current page of the table.
Example code:
add_filter( 'wcpt_products', 'wcpt__custom_product_result' );
function wcpt__custom_product_result( $products ) {
$table_data = wcpt_get_table_data(); // table data
// modify products here
return $products;
}
Modify product price
The prices displayed in the product table are run through the following filters. Each filter gets two arguments, the original price figure and the product.
Price filter | Purpose |
---|---|
wcpt_product_get_lowest_price | Get the lowest price in case of variable products. |
wcpt_product_get_highest_price | Get the highest price in case of variable products. |
wcpt_product_get_sale_price | Get the sale price in case of products that are on sale. |
wcpt_product_get_regular_price | Get the regular price for the product. |
wcpt_product_get_price | Affects the price considered by the element conditions system, not displayed anywhere. |
wcpt_product_is_on_sale | Get the sale status of the product. Toggling this will change the product sale status. Its first argument is sale status, second is product. |
Here is an example where we reduce the price of a specific product in a specific product table:
add_filter('wcpt_product_get_regular_price', 'apply_custom_price_in_table', 10, 2);
function apply_custom_price_in_table($price, $product)
{
// get the current table's data
$table_data = wcpt_get_table_data();
// check if the table id matches the one we want to modify
if ($table_data['id'] == 63) {
// check if product id matches the one we want to modify
if ($product->get_id() == 37) {
// make changes to the price
$price = $price - 10;
}
}
return $price;
}
Keep in mind in the above example we have not put this product on sale, only reduced its regular price. To put the product on sale we will need to use the above mentioned filters “wcpt_product_is_on_sale” and “wcpt_product_get_sale_price” as well.
Whitelist url params over AJAX
By default the plugin will not allow random parameters over its AJAX calls for security and compatibility reasons. If you need to whitelist specific url parameters that need to be carried across all AJAX calls, then use the function wcpt_permit_param
to add your custom parameters to the plugin’s url parameter whitelist.
Example code:
add_action('init', 'whitelist_custom_wcpt_params');
function whitelist_custom_wcpt_params()
{
wcpt_permit_param('myparam1');
wcpt_permit_param('myparam2');
}
JavaScript API
AJAX results loaded
The event wcpt_after_every_load
is triggered on the .wcpt
container once upon initial page load, and each time the table is refreshed with new product results after AJAX requests for navigation are completed.
Example code:
$('body').on('wcpt_after_every_load', '.wcpt', function(){
var $this = $(this);
// do something with $this (.wcpt container)
})
Layout
The event wcpt_layout
is triggered on .wcpt
container each time the table is forced to re-layout. For example upon the initial page load, screen resize changed, AJAX results loaded, variation selected, column width adjusted etc.
Example code:
$('body').on('wcpt_layout', '.wcpt', function(e, data){
var $this = $(this);
// do something with $this (.wcpt container)
});