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 markup

Every element printed in the table and navigation goes through the filter: wcpt_element_markup

This filter provides two arguments to the callback:
$markup – The HTML markup generated by the plugin for this element.
$element – The array with element settings based on user input.

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_filter', 100, 2);
function wcpt_custom__modify_filter( $markup, $element ){
  if( $element['type'] == 'category_filter' ){
    $markup = '<span>Custom text</span>' . $markup;
  }

  return $markup;
}

Modifying table output

The table markup is passed through the wcpt_markup filter.


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)
  });