Download 'WCPT Food Demo 2' 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 Coffee) and import them.
- Download the demo table and import it to your site (reference image).
Demo notes:
- When adding a product to cart in this demo, a modal form opens up with product options (Toppings, Sparkles, etc). These product options are being generated with the official WooCommerce product addons plugin. This is the only product addons plugin compatible with WCPT PRO right now.
- The Hot and Cold 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-10 and the right column shows remaining products 11-20. To re-create this layout please check FAQs > Styling > How do I print my product table across multiple columns?
- The Tall / Grande / Venti variation selection options are being generated from the Select Variation element using the ‘Single radio button’ option. You may reduce / increase the number of variations you display in the columns.
- 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 uses only 1 column and 3 rows inside that 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.
- In this demo, while adding products to cart, extra product options (Toppings & Sprinkles) are displayed in a modal box. These options are created using the official WooCommerce Product Addons plugin. It is the only product add-ons plugin compatible with WCPT PRO right now.
- The ‘Select Variation’ element is being used to generate radio buttons for standard variation options for the coffees. Each radio button is placed in a separate column. Read more in the Setup Notes tab.
Laptop Columns
- Create 5 columns:
- Column 1: Relabel attribute for Temperature to appear as hot / cold image. Add title next to it.
- Column 2, 3 & 4: Use ‘Select Variation’ to create 3 separate variation radio buttons. Set heading for each column accordion to variation.
- Column 5: Create a Button element with Link: Add to cart via AJAX.
- 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 (table 1: products 1-10 & table 2: products 11-20):
- In the table settings, turn pagination off. Set the product limit to 10. Now the first table will list products 1-10.
- 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=”10″
- In this way the first table lists product 1-10 and the second table can be made to list products 11-20
Phone Columns
- Create only 1 column, and 3 rows in it
- 1st Row: Relabel attribute for Temperature to appear as hot / cold image. Add title next to it.
- 2nd Row: Use ‘Select Variation’ to create 3 separate variation radio buttons.
- 3rd Row: Create a Button element with Link: Add to cart via AJAX.