Posted on

Display table as toggle items

We are going to display table as toggle items. For that we are going to use Elementor toggle widget. When visitor click any menu they will see a table .

  1. Add a new section.

    First, we are adding a new section for toggle widget area.

  2. Drag and drop toggle widget

    Search for toggle widget. Drag and drop that widget in to that new section.

  3. Paste table shortcode

    Now Give a title and paste the shortcode.

  4. Save the change

    You can add table add many as you want. Add toggle item and paste table shortcode. Finally click "Update" to save.

To see live demo please click here.

Posted on

Redirect to the checkout page after adding to cart

Sometimes we need a quick buy option. It works like, when a customer adds products to the cart then it automatically redirects to the checkout page. You can control that option from 'Configuration' tab.

If you using 'Selected' add to card option

Then use "Direct Checkout Page[for Add to cart Selected]" option.

Or if you are using 'Add to Cart' Button then use 'Enable Quick Buy Button [Direct Checkout Page for each product]' option

Posted on

Enable / Disable Load More Button

Note: Load more button is not show on archive pages ( Like Shop, Category, Tag ).

If you have many product then you need 'Load More' button and our table have that option. So you can enable or disable that button, very easily .

Go to "Configuration" Tab, scroll down and you will see an option for load more button.

Also, if you are using the free version then you will find that option in "Configure" page.

Posted on

Change Default Search Box Taxonomies Names

Sometime we need to change default search box taxonomies names and give them a meaningful name. It's help customer to understand better.

Now we are going to change those name with the help of our plugin's filter hook.

 if( !function_exists( 'codeastrology_wpto_searchbox_taxonomy_name' ) ){

	function codeastrology_wpto_searchbox_taxonomy_name( $taxonomy_name, $taxonomy_keyword){

		if( $taxonomy_keyword == "product_cat"){
			$taxonomy_name = "Filter by Category";
		}

		if( $taxonomy_keyword == "product_tag"){
			$taxonomy_name = "Filter by Tag";
		}
		
		return $taxonomy_name;
	}
 }

 add_filter( 'wpto_searchbox_taxonomy_name', 'codeastrology_wpto_searchbox_taxonomy_name', 10,2 );

Add those code in your theme/child theme's functions.php file or use 'Code Snippets' plugin to add those code. Take a look

Posted on

Design Table Head

To design your table head, go to Style and expend 'Table Head' section .

Available Options

  1. Typography
    • Using typography you can change
      • Font Family
      • Font Size
      • Font Weight
      • Text Transform
      • Font Style
      • Text Decoration
      • text-decoration
      • text-decoration
  2. Color
    • Use to change table head text color.
  3. Background Color
    • Use to change table head background-color.
  4. Border Color
    • Using to change border-color.
  5. Cell Padding
    • If you want to give some padding between cells, use this.
Posted on

Create a Table with UltraAddons Elementor Lite

Time needed: 2 minutes.

We are going to create a table with UltraAddons Elementor Lite. Let start ...

  1. Create a section for product table.

    Firstly we have to create a section for our product table. As usual click 'Add New Section' and select column.

  2. Drag and Drop

    Now look for 'ADDONS-ULTRAADDONS' section in elementor menu. You may have to scroll down. You will find 'Product Table' widget in there. Just drag and drop 'Product Table' from there to elementor section.

  3. Select or create new

    At this moment, you can create a new table by clicking 'Create a new table' link or can select your existing table from table list. I am going to select an existing table for this documentation.

  4. Save the Table

    When you select any table from table list, That table will display in that section. Now click update and visit your page.

Well Done! You have created your table. Ok, then let's Design Table Head.

Design Table Head

To design your table head, go to Style and expend 'Table Head' section .

Available Options

  1. Typography
    • Using typography you can change
      • Font Family
      • Font Size
      • Font Weight
      • Text Transform
      • Font Style
      • Text Decoration
      • text-decoration
      • text-decoration
  2. Color
    • Use to change table head text color.
  3. Background Color
    • Use to change table head background-color.
  4. Border Color
    • Using to change border-color.
  5. Cell Padding
    • If you want to give some padding between cells, use this.
Posted on

How to change “Out Of Stock” Text

If any product is out of stock and you want to display custom massage for that product, you can do that using our plugin's Filter Hook.

function codeastrology_wpto_out_of_stock_text( $add_to_cart_text_final, $settings, $column_settings, $table_ID, $product){

    $StockQ = !$product->is_in_stock();
    if( $StockQ ){
        $add_to_cart_text_final = "Out of stock Massage";
    }
    return $add_to_cart_text_final;

}
add_filter( 'wpto_add_to_cart_text', 'codeastrology_wpto_out_of_stock_text', 10, 5);

Using that filter you can easily change Out of stock massage in the table. Use those code in your theme/child theme's functions.php file to manipulate out of stock massage.

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

To see live demo click here.

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);
}