Skip to main content
  1. All Posts/

woo-product-table

eCommerce JavaScript

Product Table for WooCommerce by CodeAstrology

Product Table for WooCommerce has Tiny Shortcode. Easy to use and No need programming knowledge to use. Easily able to handle by Graphical User Interface. Just like following:
[Product_Table id='123']
Download from Plugin in WordPress.org

Features

  • Within a minute, User able to make a table and using shortcode, able to display anywhere
  • Most popular and Fastest
  • Developer Friendly – Available lots of Filter and Action Hook
  • Support all theme and plugin
  • Displaying product list as table within a minute.
  • So many lots of features Read More

How to Contribute?

As Woo Product Table(Product Table for WooCommerce by CodeAstrology) Plugin is a WooCommerce Plugin of WordPress. So Need first WordPress then WooCommerce.
And there are lot’s of Action and Filter hooks available in our Plugin by these hooks, Use able to make Addon of Woo Product Table. You also can create custom Hooks, when you will contribute to our plugin. Now I will explain step, how can contribute to our plugin.
Check following steps:

  • Install WordPress to your localhost. It can be WAMP, XAMP etc. Although I prefer XAMP. You can use any one.
  • Install WooCommerce Plugin to your WordPress Site.
  • Activate WooCommerce Plugin and import some product. Sample Product available in “WooCommerce” Plugins folder. sample directory C:wamp64www{wordpress-site}wp-contentpluginswoocommercesample-datasample_products.csv. Check How to import.
  • Clone woo-product-table repository to your Plugins directory. Repository Clone Tutorial.

    • Go to plugins like C:wamp64www{wordpress-site}wp-contentplugins
    • open comand tool. such as Git Bash. A screenshot:
    • write git clone https://github.com/codersaiful/woo-product-table.git And press ENTER.
    • I recommend you to pull latest branch but you can pull master branch also AND Obviously create new branch from this branch with your name/username etc.
    • After fix, push. We will check and merge.
    • RECOMMENDED: Everytime pull latest version.
  • Now open your Localhost WordPress site’s code via any code Editor. like VS Code, Netbeans etc.
  • I strongly recommend to open your main WordPress CMS folder via CODE EDITOR. Your site’s probable directory is: C:wamp64www{wordpress-site}.
  • Woo Product Table plugin directory is: C:wamp64www{wordpress-site}wp-contentpluginswoo-product-table
  • Go to Dashboard -> Plugins and Activate *Product Table Plugin for WooCommerce by CodeAstrology
  • Check all functionality and Findout issue. Or Making a new Features for Product Table Plugins.
  • Creating a table: Dashboard -> Product Table -> Add New -> put name, set some columns and Publish Post. Then copy that shortcode and Paste to your desired page.
  • Create a new issue on this ripository and add Label hacktoberfest, good first issue, hacktobarfest2022 and codeastrology
  • Finally You will get a Product table. Like following screenshot:

Plugin in WordPress.org

https://wordpress.org/plugins/woo-product-table/

Available Filter and Action Hooks List

https://docs.google.com/spreadsheets/d/1RwnzuupIYC-ao2R3_P3hZU__R-8nA3p7o2XoWWntNig/edit?usp=sharing

Making a sample Addons

Here I will show, how a user can make a addon for Product Table for WooCommerce using our Hook. As example, I will show, how to add new column in our table.

Using hooks

There are variety of ways to add your custom code to manipulate code by hooks:

  • To a custom child theme’s functions.php file.
  • Using a plugin such as Code Snippets

Using action hooks

To execute your own code, you hook in by using the action hook do_action('action_name');. Here is where to place your code:

add_action( 'action_name', 'your_function_name' );

function your_function_name() {
// Your code
}

Start Procedure of adding new Collumn

First we have to our custom column in default column array using wpto_default_column_arr filter.

<?php
if( !function_exists( 'new_shortcode_column' ) ){
   function new_shortcode_column( $column_array ) {
       $column_array['new_shortcode'] = 'New Shortcode';
       return $column_array;
   }
}
add_filter( 'wpto_default_column_arr', 'new_shortcode_column' );

We have added our new shortcode column to default column array. Now we need a file where we can add the content for that custom shortcode.
Below we have used wpto_template_loc_item_ . $keyword filter.

<?php
if( !function_exists( 'temp_file_for_new_shortcode' ) ){
    function temp_file_for_new_shortcode( $file ){
        //$file = __DIR__ . '/../file/my_shortcode.php';
        $file = $your_file_location;
        return $file;
    }
}
add_filter( 'wpto_template_loc_item_{new_shortcode}', 'temp_file_for_new_shortcode', 10 );

Here {new_shortcode} is column’s keyword. it’s dynamic and changeable based on your column name/keyword.

Example File code(my_shortcode.php)

/**
 * //Some Available Variation over there:
 * $keyword, 
 * $table_ID, 
 * $settings, 
 * $column_settings, 
 * $product
 * $id (here id is product id)
 */  

//Such: an example
$product_id = $id;

echo get_post_meta( $product_id, 'discount_custom_field', true );

//Do here, what u want

Now we need to add a input field for get the custom shortcode from user. here we have used wpto_column_setting_form_ . $keyword action to add the input field inside column area in column tab.

<?php
function input_for_new_shortcode($_device_name, $column_settings){
    $text = isset( $column_settings['new_shortcode']['text'] ) ? $column_settings['new_shortcode']['text'] : false;
    ?>
<input class="ua_input" name="column_settings<?php echo esc_attr( $_device_name ); ?>[new_shortcode]" value="<?php echo esc_attr( $text ); ?>">
<?php 
}
add_action( 'wpto_column_setting_form_new_shortcode', 'input_for_new_shortcode', 10, 2 );

Now we have to show the shortcode content using our custom file. Here we create a file my_shortcode.php with following code.

<?php
$my_shortcode = isset( $settings['text'] ) ? $settings['text'] : '';
 
echo do_shortcode( $settings['text'] );

How to Change Label text for URL Field and File Type Field of ACF. Use following Filter.

<?php

function wpt_custom_extra_label_change( $label, $id ){
    $label = get_post_meta($id, 'my_custom_label', true);
    return $label;
}
add_filter( 'wpt_extra_label_text', 'wpt_custom_extra_label_change', 10, 2 );