How to Use WooCommerce Product Sheets with Elementor

WordPress makes it easy to set up a website, and WooCommerce can quickly turn any WordPress website into a fully functional online store. However, if you simply use their default settings, your website may look ordinary and fail to highlight your business features.

WordPress and WooCommerce have a vast array of plugins that can add all sorts of powerful features to the store. One of them, Elementor, is a very useful tool that makes it easy to customize WooCommerce product pages.

Woocommerce Product Sheet and Introduction to Elementor

As mentioned above, there are tons of WordPress plugins to choose from that can help design a better WordPress website that meets the needs. Some plugins are large plugins, while others focus on adding specific elements or features.

Elementor is an example of the former:

Elementor offers a completely new interface for designing web pages and creating content. By choosing and customizing from a vast library of widgets, blocks, and layouts, more control can be given over how a site is put together.

On the other hand, the WooCommerce Product Sheet is a more targeted solution:

This plugin helps to add dynamic customizable forms that list WooCommerce products. These tables can be used for a variety of applications, but the integration with WooCommerce makes it a more than perfect tool for displaying products and services in a user-friendly and attractive way. (If you want to display content other than products, such as posts, pages, or documents, then you can use its other plugin Posts Table Pro. Posts Table Pro integrates just as well with Elementor, and it can list any WordPress content type in a table, not just WooCommerce products.)

How to use Woocommerce Product Sheet with Elementor Page Builder

First, make sure that both Elementor and WooCommerce Product Table plugins are installed on the site, and that WooCommerce is also installed and activated. These steps are usually quick and easy, and once they're done, it's time to start creating a unique website. Now, let's get started!

1. Add Woocommerce Product Sheet to Text Editor or Shortcode Widget

Start with the most basic and useful application. If you only want to use the Dynamic Product Table on an Elementor site, add it to a widget so it will show up on the front end. Open any page or post and make sure you're using the Elementor editor. If you see the traditional WordPress interface, click the"Editing with Elementor."button to switch:

If this is your first time using Elementor, take a quick look around. On the right, you'll see a large space where content is displayed and updated in real time as you add and edit content. On the left, there's a list of "widgets" that can be dragged into this area, then rearranged and customized as needed:

Product tables can be added to many different Elementor widgets. However, if you only want to display a single product table on the page, you can use a basic text section for that. Therefore, grabbing theText Editor Widgetand drag it to the blank area:

Then, you can click inside the widget to remove the default text and enter whatever you like. As for the product form itself, just paste this simple shortcode to add it:

[product_table]

Regardless of where on the page the relevant code is placed, the product table will be displayed accordingly. This can be verified by viewing the page on the front end of the site.

If you just want to use the elements for the code itself, you can also use the Shortcode widget:

Regardless of where you decide to place the product table, always remember to save the page after it has been placed. You can further customize the appearance and functionality of the product table if you want it to look the way you want it to.

To do so, go back to the WordPress dashboard, then find and click on the "WooCommerce" menu and select the "Settings" tab. At the top of the screen, click on the "Products" option, then find and click on the "Product Table" to make the relevant settings.

Here, find a comprehensive list of settings for the WooCommerce product form. Choose what information will be displayed on the form, add filters and variables to the form, and more. Any changes made here will be automatically applied to the product form you just placed using Elementor. Once you're done making adjustments to the form, save the settings and you're done!

2. Organize multiple product sheets using collapses, tabs, or toggle buttons

If you want to display all WooCommerce products in one table, the above method works better. However, if you want to create multiple tables, each containing a separate product category, how do you accomplish this?

There are several ways to do this in Elementor. For example, use the Accordion widget to create the same effect as in the previous example.

First, drag the Accordion part to the right edit area:

You can use the "+" to add as many different tabs as you like and edit the title and text of each tab. It is also possible to add a product table to one or more tabs using the same shortcode as before.

Of course, adding only the basic shortcodes would create a series of identical product tables. Instead, each shortcode needs to be modified so that only certain products are displayed, for example, items in a specific category. The exact method depends on which products you want to include and/or exclude from each table.

There are a number of other handy Elementor widgets that can be used to achieve similar effects. These include the Toggle widget and the Tabs widget. Display multiple WooCommerce product tables in an attractive and organized way, Elementor can achieve this effect.

summarize

Using the WooCommerce Product Table plugin in conjunction with Elementor allows for a user-friendly and aesthetically pleasing way to display products. Simply add the product table shortcode to the Elementor widget and dynamically display the desired content.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off