Developer API

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 filterPurpose
wcpt_product_get_lowest_priceGet the lowest price in case of variable products.
wcpt_product_get_highest_priceGet the highest price in case of variable products.
wcpt_product_get_sale_priceGet the sale price in case of products that are on sale.
wcpt_product_get_regular_priceGet 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_saleGet 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)
  });