Turn Your Minimum Efforts Into Maximum Results
  • Products
      Explore package advantages
  • Support
  • Blog
  • Contact

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

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

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

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

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

Style tab customization

Edit Table settings

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

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

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

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

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

Edit the Rating

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

Set the Price

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

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

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

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

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.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.

Subscribe to newsletter

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Join Now

Join Thousands of Happy Users

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge