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

Posted on

Multiple Plus Minus Problem

We have noticed that in the quantity column multiple plus-minus buttons appear because of some theme, like above. In this article we are going to solve that problems.

Time needed: 2 minutes.

Get rid of multiple plus minus problem

  1. Uninstall recommended plugin

    When someone installs our WOO Product Table plugin, we recommend our another plugin "Quantity Plus Minus Button for WooCommerce". Please deactivate the plugin if it has activated. Also, any other Quantity Plus Minus Button plugin as well, if there is any.

  2. Active Blank Column

    Next step, need to active 'blank' column

  3. Set Quantity

    Now we are select quantity as a inner item

Now save the change, that's it.

Posted on

Manipulate Quantity After Add To Cart

By default in our product table quantity is 1 and when you add the product into the cart product quantity will back to 1. If you want to set product quantity 0 instead of 1, you can easily do it by using a filter hook called wpto_qty_return_zero.

add_filter("wpto_qty_return_zero","__return_true");

Now suppose you are using one of the quantity control plugin. In that case when you add product to the cart, quantity will back to the minimum value.

But you want that quantity should be the same increment value. For example, your product minimum quantity is 2 and you increase value to 6 and then add product to cart. Now you don't want that the quantity value set back to the minimum value 2. You want quantity value remain that increase value 6.

For that we just need to use 'wpto_qty_return_quanity' filter.

add_filter("wpto_qty_return_quanity","__return_false");
Posted on

Thumbnail Image Options

When someone click on thumbnails image by default image popup in lightbox. You change that image behavior.

  • No Action - Disable all kinds of actions.
  • Product Link - On click, image will open the product in the product single page.
  • Quick View - When someone clicks the thumbnails image, it will open in YITH quick view.
Posted on

Show/hide inner items by clicking

Time needed: 1 minute.

If you want multiple inner items in one column, and want to show/hide by clicking. You can use "Toggle Show Hide" option for that.

  1. Select items

    Expand column and select which inner items you want to show.

  2. Turn On Option

    Scroll down and you will see "Toggle Show Hide" option, check it. Also give a toggle text in the input box.

  3. Table view

Posted on

Create an audio player table

To create an audio player table we need to add "audio_file" custom field. We use ACF for that.

Create a custom field

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

Posted on

Overriding Woocommerce templates via a theme

WooCommerce template files contain the markup and template structure for frontend and HTML emails of your store.

When you open these files, you will notice they all contain hooks that allow you to add/move content without needing to edit template files themselves. This method protects against upgrade issues, as the template files can be left completely untouched.

Template files can be found within the /woocommerce/templates/ directory

How to Edit Files

Edit files in an upgrade-safe way using overrides. Copy the template into a directory within your theme named /woocommerce keeping the same file structure but removing the /templates/ subdirectory.

Example: To override the archive page, copy: wp-content/themes/yourtheme/woocommerce/archive-product.php

The copied file will now override the WooCommerce default template file.

Now edit archive-product.php and delete woocommerce_shop_loop and paste our table shortcode

Example - echo do_shortcode("[Product_Table id='104' name='test']");

Posted on

Create an advanced search box table

If you want to use the advance search box, then select Show Search Box from "Search &Filter" tab. It will appear a search box on your front-end table page. Now turn on "Advance Search" option from Configure page.

You can also search from a specific area. As an example, suppose you want to search only from the post title and SKU then select post_title and _sku from "Search From". Also, you can search from other sections.

Also you can search from taxonomy as well. Set which taxonomy you want to search in.

Finally if you want to see the demo table click here.

Posted on

Remove Custom Taxonomy Link

If you created custom taxonomy and showing in table and you want to remove link then, use those code below.

if( !function_exists('wpt_remove_taxonomy_link') ){
	function wpt_remove_taxonomy_link(){
		?>
			<script>
				jQuery(document).ready(function($){
					$('.wpt_pa_color a,.wpt_pa_color a').contents().unwrap();
				});
			</script>
		<?php
	}
	add_action( 'wp_footer', 'wpt_remove_taxonomy_link' );
}

Replace (wpt_pa_color) classes with your own taxonomy classes.

Posted on

Show Table in Only Shop page

When we turn on ‘Table On Archives’ table will show on WooCommerce Archive/Category/Tag/Attribute page. But if you only want to show table on shop page, we can do this using filter hook.

if (!function_exists('wpt_show_table_only_shop')) {
	function wpt_show_table_only_shop($my_archive, $template){
		if(!is_shop()){
			return $template;
		}
		else{
			return $my_archive;
		}
	}
	add_filter('wpto_archvie_page_template_loc', 'wpt_show_table_only_shop', 10, 2);
}
Posted on

Footer Cart Options

Our product table have a footer cart, we can control that footer cart. Go to "Configuration" tab and make change.

  • We can hide this cart until customer add some product in his cart.
  • We can always show the cart
  • Or we can always hide the cart

Change Footer Cart BG Color

We can change footer card background color

Footer Cart Position

  • We can show footer cart in bottom right
  • We can show footer cart in bottom left
  • We can show footer cart in top right
  • Or we can show footer cart in top left

Footer Cart Size

We can control footer cart size, make sure your value is integer. Set value like 50 or 70

Posted on

Overriding item templates of columns via a theme

Woo Product Table gives you the opportunity to Overriding templates of the columns from your theme.

You can change the contents appearance with overriding template files. Our template files could be found at woo-product-table/includes/items or if you are a pro user then you should also look at woo-product-table-pro/includes/items directory. To override via your theme simply create a directory named woo-product-table/items and copy the template files inside this directory.

Below you can see our template structure. If you want to override any of these just copy and paste in to your-theme/woo-product-table/items directory.

Overriding templates feature can give you the more flexibility to customize the Woo Product Table as per your requirement. If you need any help on this topic please let us know by creating support ticket.