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. Gluten free Pure veg | ||
WCPT Food Dish 02 ![]() Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Non-spicy Pure veg | ||
WCPT Food Dish 03 ![]() Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Non-spicy | ||
WCPT Food Dish 04 ![]() Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Gluten free Non-spicy Pure veg | ||
WCPT Food Dish 05 ![]() Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Gluten free Pure veg | ||
WCPT Food Dish 06 ![]() Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Gluten free Non-spicy | ||
WCPT Food Dish 07 ![]() Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Non-spicy Pure veg | ||
WCPT Food Dish 08 ![]() Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Non-spicy Pure veg |
Download 'WCPT Food Demo 4' 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.- Download the demo products (category: WCPT Food Dish) and import them.
- Download the demo table and import it to your site (reference image).
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.
- The 2pcs / 4pcs / 6pcs variation dropdown is being generated from the Select Variation element using the ‘Radio buttons’ option.
- The phone layout of this table is significantly different from the laptop layout. Elements are rearranged so the table looks and feels great on small screen devices as well.
- 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 change the background color of the last column, go to your product table settings > columns > go to the 3rd column > open the design settings and give it a different background color.
- This demo shows the most typical food menu setup. Variations of this layout can be found on many popular restaurant menu sites.
- Check the Setup notes tab for a detailed guide on how to setup a similar table on your site manually.
- Based on your requirements feel free to skip or modify any elements in the guide. Such as the Food Filter attribute, Select Variations element that shows the radio options, etc.
- You may also use the Demo import facility to get this table on your site quickly and modify it later on.
Laptop Columns
- Create 3 columns:
- Column 1: Add a ‘Product Image’ element, open is style settings and set width to 150px
- Columns 2:
- Create 3 rows in this column:
- Row 1: Add a Veg/Non-veg attribute here and relabel it as an image. Add ‘Title’ element.
- Row 2: Add the ‘Excerpt’ element.
- Row 3: This demo uses an attribute called ‘Food filter’ to display all the filter tags associated with the product.
- ‘Style for terms’ settings:
- Font size: 12px
- Background: #eee
- Border-radius: 4px
- Padding: 1px 8px 1px 8px
- Maring-top: 4px
- ‘Style for terms’ settings:
- Create 3 rows in this column:
- Column 3:
- Create 3 rows in this column:
- Row 1: Add the ‘Price’ element. Style:
- Font size: 20px
- Font color: rgb(101, 167, 24)
- Row 2: Create this row if you will be showing variation options
- Add the ‘Select Variation’ element, set Display type: Radio buttons for all elements
- Row 3:
- Add the ‘Quantity’ element
- Add the ‘Button’ element. Settings for Button element:
- Set the Link: Add to cart via AJAX
- Style settings:
- Font size: 16px
- Font color: rgb(255, 255, 255)
- Font weight: Bold
- Background: rgb(116, 191, 29)
- Background hover: rgb(139, 205, 62)
- Border radius: 4px
- Padding: 8px 20px 8px 20px
- Margin top: 8px
- Row 1: Add the ‘Price’ element. Style:
- Create 3 rows in this column:
Phone columns
- Create 2 columns
- Column 1: Create 2 rows
- Row 1: Create a ‘Product Image’ element, set its width to 145px
- Row 2: If you created the ‘Food filter’ attribute in Laptop Columns, then duplicate it and place it here.
- Column 2: Create 5 rows
- Row 1: Duplicate the Veg/Non-veg attribute and place it here. Add a ‘Title’ element as well.
- Row 2: Add a ‘Price’ element. Style settings:
- Font size: 20px
- Font color: rgb(101, 167, 24)
- Row 3: Create a ‘Select Variation’ element and select Display type: Dropdown with all variations
- Row 4:
- Add a ‘Quantity’ element
- Add a ‘Button’ element. Set its Link: Add to cart via AJAX.
- Style settings for button:
- Font size: 16px
- Font color: rgb(255, 255, 255)
- Font weight: Bold
- Letter spacing: 1px
- Background: rgb(116, 191, 29)
- Background hover: rgb(139, 205, 62)
- Border radius: 4px
- Padding: 8px 20px 8px 20px
- Margin top: 8px
- Style settings for button:
- Row 5: Create a ‘Tooltip’ element to show the description
- Tooltip Label: Add these 2 elements:
- ‘Icon’ element, with icon name: info
- ‘Text’ element, text: Info
- Tooltip Content: Add an ‘Excerpt’ element
- Style settings for Tooltip:
- Tooltip Label:
- Font color: rgb(139, 139, 139)
- Background: rgb(255, 255, 255)
- Tooltip Content:
- Width: 200px
- Font color: rgb(0, 0, 0)
- Background: rgb(242, 242, 242)
- Padding: 15px 15px 15px 15px
- Tooltip Label:
- Tooltip Label: Add these 2 elements:
- Column 1: Create 2 rows