Developer API

PHP

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.

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.

Code example of hooking into this filter:

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

Code example:

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.

Code example:

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.


JavaScript

AJAX results loaded

Once upon initial page load, and each time AJAX result markup is loaded on the page, the event wcpt_after_every_load is triggered on the container .wcpt

Code example:

  $('body').on('wcpt_after_every_load', '.wcpt', function(){
    var $this = $(this);
    // do something with $this (markup container)
  })

Layout

The event wcpt_layout is triggered on .wcpt each time the table is forced to re-layout. For example, initial page load, screen resize, AJAX results loaded, variation selected, etc.

Code example:

  $('body').on('wcpt_layout', '.wcpt', function(e, data){
    var $this = $(this);
    // do something with $this (markup container)
  });