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

Add new custom column in Woo Product Table

Time needed: 2 minutes.

If you are going to add new custom column like custom field, taxonomy, audio or file this article can help you.

  1. Add new table/Edit your existing table

    If you need help on how to create new table read this article.

  2. From column tab find add new column

    You can add new custom column in table from end of the same page. You will find there "Add new column". Fill the required information to create new custom column.add new column

  3. Type your column slug/keyword/name

    If you are going to add new column for a custom field then this column slug will be your custom field name.

  4. Give this new column a nice name

  5. Select column type from dropdown list

    There are several types of column. Select the best one which suitable for your need. There are few article for column type specific.
    1. Taxonomy
    2. Audio
    3. File Download using ACF

  6. Finally click on add new column

  7. Hooray! Shiny new column has been added