Posted on

How to create a audio table using Woo Product Table?

Custom Audio Table

With our Woo Product Table you can create your online music store. If you want to add music/audio column like above table follow below steps.

Check this demo table first!

  1. Create a Custom Field

    Create a custom field using ACF plugin and assign it with your products. I hope you already have done this step. If you need any help on this step please read this.

  2. Now create a table with audio type new column

    Add new column with audio type column. The column keyword will be the custom field name which you have create by ACF. See this screenshot.

Posted on

How to install Woo Product Table Pro Plugin

Introduction

You can create a beautiful and user friendly product table very easily. Our product table provides many more features like drag and drop elements, Sorting table data, advance search option. Also have responsive layout, pagination and third party plugin supports. You can easily change table design as you want.

How to install

From v7.0.0, we have made our “Woo Product table Pro” plugin as an addon of our free plugin “Woo Product Table – Free WooCommerce Table view solution.”
So from now, our free plugin must have to be installed to activate Woo Product Table Pro. So let’s start ..

From your WordPress admin panel –

  1. Navigate to : Plugins -> Add New

  2. Type “Woo Product Table” in Search Plugins … and press Enter

  3. Choose Woo Product Table Plugin by CodeAstrology and click “Install now”


  4. And now click “Activate”


  5. Now first extract your zip file, what you have downloaded from Codecanyon. And enter to extracted folder. up to -> inside [Main Files] folder.


  6. Chose right plugin file. Like following screenshot:


  7. Now from WordPress Admin Panel, go to Plugins > Installed Plugins


  8. Click on the “Add New” button


  9. Click on the “Upload Plugin” button


  10. Activate the newly installed Plugin


That’s it !

Posted on

WooCommerce Product’s Variables Show as Individual Row

We have introduced a new feature in Woo Product Table Pro. From now you can show variable drop downs as separate row. Each variable combination will place in an individual row.

Let’s see how to display variations in separate row. Currently there is only one way to do this. Follow the below steps to show WooCommerce products variations in separate rows.

  1. Create a table

    First create a product table. Check this to learn about How to Create WooCommerce Product Table.

  2. Select a Variable Product

    Now select a variable product to show it’s variations in a table like this demo product table.how-to-variations

  3. Select Product Type

    You can see in above image, I have selected Product Type to Only Variation Product. You also have to select this option to create variation table.

  4. Paste the Shortcode

    Now copy and paste the shortcode to that product’s content area which one you have selected in Step 2 product include field.

Now you can see a variable product table for Woocommerce variable product.

Posted on

How to Add Custom Column using Action and Filter Hooks

In Woo Product Table plugin, there are lots of column already we have added. But for you maybe those are not enough. You wanted to add more custom column. That’s why I am writing this tutorial.

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

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 this code is used in our addon plugin. Which you can find at branch New Shortcode Column – link to https://github.com/codersaiful/UltraAddons-addons/tree/new_shortcode_column

Below we have used wpto_template_loc_item_ . $keyword filter.

if( !function_exists( 'temp_file_for_new_shortcode' ) ){
    function temp_file_for_new_shortcode( $file ){
        //$file = __DIR__ . '/../file/hello.php';
        $file = $your_file_location;
        return $file;
    }
}
add_filter( 'wpto_template_loc_item_new_shortcode', 'temp_file_for_new_shortcode', 10 );

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.

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

Now we have to show the shortcode content using our custom file. Here we have used hello.php

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

How to show product attributes in different column and search box

Many of our users want to know how to show product attributes with different column in our Woo Product Table. Also we are going to see how to add filter by product attributes.

Follow below step to create a table like the above with attributes in different column and search filter. See the live table here.

  1. Add new attribute column

    Use below this box to add new column.
    Step in Attributes

  2. How to find the Column Keyword for Attributes

    In this field we have to type attribute slug. Click on this configure terms of your desired attributes.
    How to find the Column Keyword for Attributes

  3. Copy the Taxonomy Value

    Here we can see the taxonomy value is pa_brand and we have to copy this value and paste to column keyword field at Step 1.
    In your case the taxonomy value could be different from the below one.How to find the Column Keyword for Attributes

  4. Fill the box

    Column Keyword: Attribute name
    Column Label: Give the column a title
    Column Type: Select the column type as Taxonomy. This is very important because we are going to show taxonomies in this table column.
    Select the column type as Taxonomy

  5. Show Advance Search Box with Attribute Filter

    To enable attribute filter with advanced search box add taxonomy keywords for desired filter option.Show Advance Search Box with Attribute Filter

  6. Show Mini Filter with Product Attributes

    To enable mini filter with product attributes add taxonomy keywords for desired filter option.Show Mini Filter with Product Attributes

Posted on

Change Default WooCommerce Thumbnail Image Size for Woo Product Table

You can use wpto_thumbs_size filter to resize thumbnail. Read this article to learn about how to use filter and action hook.

Here I have added a snippet. Add this snippet to end of the child theme’s functions.php file.

if( !function_exists( 'wpt1234_resize_the_thumb_size' ) ) {

function wpt1234_resize_the_thumb_size () {
    return 'woocommerce_thumbnail';
}

}
add_filter( 'wpto_thumbs_size', 'wpt1234_resize_the_thumb_size' );
Posted on

Update to the latest Woo Product Table Pro and Few Todos

  1. Uninstall current Woo Product Table Pro plugin

  2. Install our free Woo Product Table plugin first from here

  3. Again download the current version from Codecanyon and install it.

  4. Disable/enable inner column items

  5. Optimize your table for small devices (Step 1)

    First, select no responsive from under the Mobile tab. We’re going to remove this tab from the future version.

  6. Optimize your table for small devices (Step 2)

    From the responsive tab, select which columns are you going to show in mobile or tablet devices.

That’s all, Enjoy our most recent version Woo Product Table.

Posted on

Woo Product Table Hooks: Actions and filters

Introduction: What are hooks?

Hooks in WordPress essentially allow you to change or add code without editing core files. They are used extensively throughout WordPress and WooCommerce and are very useful for developers.

There are two types of hook: actions and filters.

  • Action Hooks allow you to insert custom code at various points (wherever the hook is run).
  • Filter Hooks allow you to manipulate and return a variable which it passes (for instance a product price).

Using hooks

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

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
}

Using filter hooks

Filter hooks are called throughout are code using apply_filter( 'filter_name', $variable );.To manipulate the passed variable, you can do something like the following:

add_filter( 'filter_name', 'your_function_name' );

function your_function_name( $variable ) {
// Your code
return $variable;
}

With filters, you must return a value.

To learn more about options for using hooks and filters see Snippet doc section.

Example

In the example below, both action hooks and filter hooks are used. This tutorial teaches you how to change and add fields to the checkout.

  • Actions are used to:
    • Add a new field to the checkout
    • Add that new field to the order
  • Filters are used to:
    • Override the labels and placeholders of existing fields
    • Make an existing field optional while it used to be required
    • Remove existing fields

Available action hooks and filters

For details on what the action hooks and filters do, reference the Woo Product Table Hooks Reference.

Posted on

Supported Attributes of Shortcode and Content Column

WooCommerce Product table support any kind of shortcode in the table’s column. Many shortcode needs some attributes. Here we have added few possible attributes for your desired shortcode.

Usage Example of Shortcode

[favorite_button post_id="%product_id%" title="%name%"]

  • %product_id%: (int) Product ID
  • %sku%: (string) Product SKU
  • %name%: (string) Product Title
  • %excerpt%: (string) Short Description
  • %product_name%: (string) Product Title
  • %title%: (string) Product Title
  • %product_title%: (string) Product Title
  • %permalink%: (string) Product Link
  • %content%: (string) Long Description
  • %excerpt%: (string) Short Description
  • %description%: (string) Short Description
  • %short_description%: (string) Short Description
  • %thumbnail%: (string) Thumbnail
  • %image_id%: (int) Thumbnail ID
  • %thumb_id%: (int) Thumbnail ID
  • %sku%: (string) SKU
  • %author%: (string) Author Name
  • %slug%: (string) Slug
  • %price%: (string) Price
  • %regular_price%: (string) Regular Price
  • %menu_order%: (int) Menu Order
  • %stock_status%: (string) Stock Status
  • %stock_quantity%: (int) Stock Quantity
  • %backorders%: (string) Stock Quantity
  • %average_rating%: (string) Rating
  • %review_count%: (int) Rating Count
  • %user_login%: (string) Username
  • %user_nicename%: (string) User Full Name
  • %user_email%: (string) User Email

Posted on

Add Custom Taxonomy as Table Column

  1. First create custom taxonomy

    First, you need to create at least one custom taxonomy.

    I am using the CPT UI plugin to create custom taxonomy, which is absolutely free plugin. Also, some people won’t suggest you use any plugin for creating custom taxonomies. I suggest because we can use this plugin to create custom taxonomies and then get the code from this plugin and paste it wherever you need and finally we can remove this plugin.

    That’s why I’m using this plugin. You can download it from WordPress.org.

    After installing the Custom Post Type UI plugin you can find the option Add/Edit Taxonomies. Click on it you can see another screen like below. Fill the required information and click on Add Taxonomy. I’ll discuss more on this topic later.



    After successfully added our new custom taxonomy go to the Edit Taxonomy tab and click on Populate missing labels based on chosen labels. That’s all for now. We have created our first taxonomy for the WooCommerce Products.

  2. Add new column with custom taxonomy

    You can add custom fields or custom taxonomy from under the column table.

  3. Now click on Add as Column

  4. Finally click on publish/update