Demo 1

Filters Sort results
Reset Apply
WCPT Food Dish 01
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Max:
Min: 1
Step: 1
ADD
WCPT Food Dish 02
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Max:
Min: 1
Step: 1
ADD
WCPT Food Dish 03
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Max:
Min: 1
Step: 1
ADD
WCPT Food Dish 04
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Max:
Min: 1
Step: 1
ADD
WCPT Food Dish 05
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Max:
Min: 1
Step: 1
ADD
WCPT Food Dish 06
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
4pcs
$20
Max:
Min: 1
Step: 1
ADD
Filters Sort results
Reset Apply
WCPT Food Dish 07
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Max:
Min: 1
Step: 1
ADD
WCPT Food Dish 08
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Max:
Min: 1
Step: 1
ADD
WCPT Food Dish 09
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Max:
Min: 1
Step: 1
ADD
WCPT Food Dish 10
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Max:
Min: 1
Step: 1
ADD
WCPT Food Dish 11
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Max:
Min: 1
Step: 1
ADD
WCPT Food Dish 12
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Max:
Min: 1
Step: 1
ADD
Download 'WCPT Food Demo 1' and import it to your site.

Import steps

Note: This facility is new and experimental, look forward to improvements. Your feedback is most welcome here! You need WCPT PRO v1.8.0+ to run imports.
  1. Download the demo products (category: WCPT Food Dish) and import them.
  2. Download the demo table and import it to your site (reference image).
In case of any issue in using this facility please contact support for assistance.

Demo notes:

  • The Veg and Non-veg icons are being generated by relabelling attribute terms as images using the Custom term labels facility in a global Attribute element.
  • This demo displays the products across 2 tables in adjacent columns. The left column shows products 1-6 and the right column shows remaining products 7-12. To re-create this layout please check FAQs > Styling > How do I print my product table across multiple columns?
  • The 2pcs / 4pcs / 6pcs variation dropdown is being generated from the Select Variation element using the ‘Dropdown’ option.
  • Table settings > Query > Pagination is disabled in this table as products are displayed in offset. You may want to enable it if you are not using offset.
  • The phone version of this table combined elements from column 2 and 3 into a single column. It is an elegant layout that perform well on small devices.
  • Using the table editor you can deeply customize this table, adding and removing elements based on your needs. For special customizations not covered by table facilities please contact the plugin author.
  • To create the variation dropdown, this demo uses the ‘Select variation‘ element included in WCPT PRO. This element automatically lists out all possible variation combinations and prices in a single dropdown.

Laptop settings

  • Create 2 columns
    • 1st column: Create 2 rows in this column.
    • 2nd column: Create 2 rows in this column as well.
      • In the first row add a ‘Select Variation’ element.
      • And in the second row add a Quantity and then a Button element.
        • In the Button element’s settings, set Link to ‘Add to cart via AJAX’.
  • Optionally you can set a max-width limit for the tables. Got to:
    • Table Editor > Style tab > Laptop style > Container > Max-width: 600px
  • Making the 2 tables appear in adjacent columns:
    • Use Gutenberg or any pagebuilder to create 2 columns
    • Paste the table shortcode in each column
  • Creating an offset:
    • In the table settings, turn pagination off. Set the product limit to 6. Now the first table will list products 1-6.
    • In the second table shortcode use the ‘offset’ shortcode attribute to start listing products from where the previous table ends. This demo is using offset=”6″
    • In this way the first table lists product 1-6 and the second table can be made to list products 7-12

Phone settings

  • Create only 1 column in the Phone columns section. All elements can be neatly placed in this single column
  • Create 3 rows within this column:
    • 1st row: Relabeled veg/non-veg attribute element, and a Title element
    • 2nd row: Content element
    • 3rd row: Select variation, Quantity & Button elements