If you want to hide some columns only for mobile, you can do that very easily. Go to 'Responsive' tab, select "Auto Responsive " from Mobile Responsive option.
Now select which columns you want to hide only for mobile.

If you want to hide some columns only for mobile, you can do that very easily. Go to 'Responsive' tab, select "Auto Responsive " from Mobile Responsive option.
Now select which columns you want to hide only for mobile.
You can create a user-friendly product table for mobile and tablet. Go to 'Responsive" tab and select 'Manual Responsive' from Mobile Responsive option.
Now select which column you want to show in Mobile and Tablet.
To create an audio player table we need to add "audio_file" custom field. We use ACF for that.
Now active audio player column
If you want that your audio player should be at the bottom, then check the "Stick to Bottom" checkbox. Also you can change the Background Color as well as Progress Bar Color.
If you want to show artist name, create another custom field called "audio_artist " add a new column with the same column keyword.
Add your audio and artist name in your audio product.
See the demo here - Click Here
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.
First create a product table. Check this to learn about How to Create WooCommerce Product Table.
Now select a variable product to show it's variations in a table like this demo product table.
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.
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.
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' );
First, select no responsive from under the Mobile tab. We're going to remove this tab from the future version.
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.
This is a complete list of all our available features in the WooCommerce Product Table. With following the link you can read more about these features.
Recently, we have added quantity buttons in our WooCommerce Product Table. But there is some themes which already have quantity buttons. Now the problem is there are double double quantity buttons in our product table.
To solve the issue, simply select No from PRODUCT TABLE >> Configure >> Under BASIC SETTINGS >> Enable Quantity [+] or [-] Buttons
And finally save the settings.
Click here to see the demo of using Attributes as Taxonomy Keyword for Filter.
First, create column using attributes.
I have added to attributes color and size which slug or name is pa_color and pa_size
Click on Update/Publish
Now go to Search Box and Filter tab. Enable Advanced Search Box if not showing advanced search box in the front.
Now type the attributes name into Taxonomy Keyword for Advanced Search Box
Click on Update. Now you can see the filter options for attributes in the front.
You can find a license key inside your account on CodeCanyon.
1. Make sure that you logged in to your account.
2. Visit your Downloads section, find the plugin, that you want to get a license key for, and click the button Download, then License Certificate.
3. Find the Item Purchase Code in the text document and paste it into the form inside the plugin.
Please, see the image below:
1. Now go to your WordPress dashboard.
2. Skip this step if you already installed pro version. If you are using Woo Product Table, then uninstall the free version and install premium version Woo Product Table Pro - WooCommerce Product Table view solution. Which you have downloaded from CodeCanyon.
3. After downloaded, installed, and activated Woo Product Table Pro - WooCommerce Product Table view solution then click on Activate submenu item of PRODUCT TABLE.
4. Paste your purchase code which you have found in above the click on Submit
From now you can get 1-click update of our premium Woo Product Table Pro - WooCommerce Product Table view solution
We'll create an online book store based on WooCommerce. To create a similar WooCommerce shop table layout like below this table follow these instruction.
Here I have using Advanced Custom Fields plugin.
If you need help on how to create custom field in WooCommerce see this article
If you need help on how to create WooCommerce Product Table read this article
To show custom field as column read how to add custom field as table's column
First, you need to create at least one custom field. If you need help on how to create a custom field using ACF read this article
You can add custom fields or custom taxonomy from under the column table.
To get help on how to install Woo Product Table read this.
From WordPress admin area go to PRODUCT TABLE > Add New to create new Product Table.
Just click to active or inactive
If you want, you can give some basic conditions
You can set some extra conditions, if you want
You can enable search and filter option
Also you can configure your table for mobile view
Click on publish
Now Copy you table's shortcode and paste it where you want to show this WooCommerce product table
Adding custom CSS in WordPress is very simple. Who don't know how to add custom CSS in WordPress this article for them. Before we start if you don't know how to add custom HTML code in WordPress Page or Post check this article.
We have added custom HTML in our previous post let's try to make some design changes by CSS with Additional CSS block.
Now add some CSS code for class highlight-text
p.highlight-text {
color: red;
font-size: 20px;
font-weight: 700;
}