How To Use Product Table Widget For Your Online Store

  • BdThemes
  • How To Use Product Table Widget For Your Online Store

Table Of Contents

product table widget

How To Use Product Table Widget For Your Online Store

The Product Table Widget is an easy-to-use WooCommerce product table WordPress addon presented by BDthemes and is a part of the Ultimate Store Kit. It lets your visitors manage their purchase options nicely to the end.
Let’s learn how to use the widget on your site.

Insert the Widget

product table widget insert

First, you have to insert the widget on your page. To do that, go to the widget menu, then search Product Table, then drag-drop the widget in the text area of your page.

Content tab customization

Change the Layout

Product Table widget doc 2 - BdThemes

Now, we are going to customize the Layout under the Content tab. To do that, go to Content > Layout. Here, select the Header Alignment to the middle, then select the Data Alignment to the left, then enable the Pagination switcher.

Define the Query

Product Table widget doc 3 - BdThemes

Next, go to Content > Query. Here, select the Source first, then set the Product Limit. After that, you can see two modes i.e.: INCLUDE and EXCLUDE. Now, for the INCLUDE mode, change the Show Product option. You can change the other options if needed.

Edit the Additional settings

Product Table widget doc 4 - BdThemes

After that, go to Content > Additional. Here, you can see some switchers and fields. Enable the switchers and fill up the Description Limit field by 10, and see the result.

Define the SHOW/HIDE items

Product Table widget doc 5 1 - BdThemes

Now, for the SHOW/HIDE sub-section, change the options as you wish.

Style tab customization

Edit Table settings

Product Table widget doc 6 - BdThemes

Next, we are going to customize the Table using the Style tab. To do that, go to Style > Table. Here, you can see two modes i.e.: NORMAL and HOVER. Now, for the NORMAL mode, change the Header Typography, then change the Heading Background Color, and see the result. You can change the other options if needed.

Change the Search Field options

Product Table widget doc 7 - BdThemes

After that, go to Style > Search Field. Here, you can see two modes i.e.: NORMAL and FOCUS. For the NORMAL mode, first, change the Text Color, then change the Background Color. Next, set a thin Border, then, set the Border Radius, and see the result. You can change other options if you want.

Edit the Image

Product Table widget doc 8 - BdThemes

Now, go to Style > Image. Here, set a Border, then change the Color, then set the Border Radius, and see the result on the page.

Format the Title

Product Table widget doc 9 - BdThemes

Next, go to Style > Title. Here, change the Color, then change the Hover Color, then change the Typography, and see the result.

Change the Description

Product Table widget doc 10 - BdThemes

After that, go to Style > Description. Here, change the Color, then change the Typography, and see the result.

Edit the Rating

Product Table widget doc 11 - BdThemes

Now, go to Style > Rating. Here, change the Color, then change the Active Color, and see the result.

Set the Price

Product Table widget doc 12 - BdThemes

After that, go to Style > Price. Here, change the Regular Color, then change the Sale Color, then change the Typography, and see the result.

Edit Quantity

Product Table widget doc 13 2 - BdThemes

Next, go to Style > Quantity. Here, change the Color, then change the Border Color, then change the Typography, and see the result on the page.

Design the Cart

Product Table widget doc 14 - BdThemes

Now, go to Style > Cart. Here, you can see two modes i.e.: NORMAL and HOVER. For the NORMAL mode, change the Text Color, then change the Background Color. After that, enable the Fullwidth Cart switcher, and see the result. You can change the other options if needed.

Edit the Footer

Product Table widget doc 15 1 - BdThemes

Lastly, go to Style > Footer. Here, you can see two modes i.e.: PAGINATION and PAGE INFO. For the PAGINATION mode, change the options as you need, and see the result on the page.

Final Result

Product Table widget doc 16 - BdThemes

All done! Now, release your breath and enjoy the show.

Video Assist

If you have any queries about this widget, please watch this tutorial video.

You can also see our demo page to learn more.

Thank you very much.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge