Demo 4

Showing 1 – 8 of 12 results Showing all 12 results Showing the single result No results found
Filters Sort results
Reset Apply
Placeholder
WCPT Food Dish 01
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Gluten free
Pure veg
$20-$30
Max:
Min: 1
Step: 1
ADD
Placeholder
WCPT Food Dish 02
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Non-spicy
Pure veg
$15-$25
Max:
Min: 1
Step: 1
ADD
Placeholder
WCPT Food Dish 03
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Non-spicy
$20-$30
Max:
Min: 1
Step: 1
ADD
Placeholder
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
$5-$15
Max:
Min: 1
Step: 1
ADD
Placeholder
WCPT Food Dish 05
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Gluten free
Pure veg
$5-$15
Max:
Min: 1
Step: 1
ADD
Placeholder
WCPT Food Dish 06
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Gluten free
Non-spicy
$20
Max:
Min: 1
Step: 1
ADD
Placeholder
WCPT Food Dish 07
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Non-spicy
Pure veg
$15-$25
Max:
Min: 1
Step: 1
ADD
Placeholder
WCPT Food Dish 08
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Non-spicy
Pure veg
$10-$20
Max:
Min: 1
Step: 1
ADD
1 2
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.
  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.
  • 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
    • 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
        • 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

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
      • 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