Posted on

Show column label before inner items

This article will guide you to create a responsive table manually beautifully.

Time needed: 5 minutes.

To create a mobile responsive table like above one follow bellow steps.

  1. Add a new blank column

    If you need help on How to add a new blank column in Woo Product Table read this article.

  2. Now select the columns inside new blank column

    If you need help on how to show/hide inner items in a column which you want to show in mobile please read this article.

  3. Now hide the new blank column in desktop view

    If you need help on how to show/hide table's column read this article.

  4. Now show the new blank column for mobile/tablet device

    Now go to responsive table and check the newly added blank column for mobile/tablet device. If you need help on how to create responsive table read this article.

  5. Hooray! Now mobile/tablet users will see responsive table

If you need same design as shown in image add below CSS to your site's Customize > Additional CSS Block.

.wpt_device_mobile .item_inside_cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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