{"id":8166,"date":"2020-03-01T18:16:30","date_gmt":"2020-03-01T18:16:30","guid":{"rendered":"https:\/\/wcproducttable.com\/?p=8166"},"modified":"2024-11-25T14:03:44","modified_gmt":"2024-11-25T14:03:44","slug":"form-mode","status":"publish","type":"post","link":"https:\/\/wcproducttable.com\/documentation\/form-mode","title":{"rendered":"Form mode \u2014 show table navigation as a form on separate page"},"content":{"rendered":"\n<p>This PRO exclusive facility is useful when you want to place a WCPT table navigation form anywhere on your site (for eg: on the homepage), and make its results appear on the Shop page when the form is submitted.<\/p>\n\n\n\n<p>Please note this is only possible when you have replaced the product grid on your shop page with a product table using the&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/wcproducttable.com\/documentation\/enable-archive-override\" target=\"_blank\">archive override facility<\/a>.<\/p>\n\n\n\n<p>Using <strong>form_mode=&#8221;true&#8221;<\/strong> on any WCPT table shortcode will hide the product table, leaving just the navigation section visible. To complete its form look, you can also add the &#8216;Apply \/ Reset&#8217; element in the table navigation section.<\/p>\n\n\n\n<p>When the visitor selects values in this form and submits it, they will be redirected to the shop page where the product table will show results based on options they selected in the form.<\/p>\n\n\n\n<p>Please remember that the filters in the form should be a subset of the filters on the shop page. If the site visitor selects filters in the form that are not available on the shop page, then those filters will not be applied to the results on the shop page. So while you can have <em>more<\/em> filter options on the shop table, you should not have <em>less<\/em> filters on the Shop page than on the form. For example, if you have a Price range filter in the form, then you need to have a Price range filter in the Shop table as well, otherwise the price range will not be applied when the user tries to select a price range in the form.<\/p>\n\n\n\n<p>  <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"793\" height=\"647\" src=\"https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_00-25-35-3.png\" alt=\"\" class=\"wp-image-8199\" srcset=\"https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_00-25-35-3.png 793w, https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_00-25-35-3-300x245.png 300w, https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_00-25-35-3-768x627.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><figcaption>In the above screenshot, the form shortcode is placed on a page where we want the table navigation to appear without the table.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"829\" height=\"344\" src=\"https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_00-26-28.png\" alt=\"\" class=\"wp-image-8175\" srcset=\"https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_00-26-28.png 829w, https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_00-26-28-300x124.png 300w, https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_00-26-28-768x319.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><figcaption><em>This screenshot is from wp admin &gt; product tables &gt; settings &gt; archive override. It shows that a table shortcode is being used to generate a table for the shop page. This table will override the default product grid on the shop page.<\/em><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"975\" height=\"306\" src=\"https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_04-01-24.png\" alt=\"\" class=\"wp-image-8177\" srcset=\"https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_04-01-24.png 975w, https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_04-01-24-300x94.png 300w, https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_04-01-24-768x241.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption><em>Here you can see the form generated by the shortcode in the first screenshot. You can also see in this screenshot that a range value has been selected for the &#8216;Range test&#8217; filter in this form. It is then submitted.<\/em><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_04-02-11-2-1024x467.png\" alt=\"\" class=\"wp-image-8181\" width=\"630\" height=\"287\" srcset=\"https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_04-02-11-2-1024x467.png 1024w, https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_04-02-11-2-300x137.png 300w, https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_04-02-11-2-768x350.png 768w, https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_04-02-11-2-1200x547.png 1200w, https:\/\/wcproducttable.com\/wp-content\/uploads\/2020\/03\/2020-03-02_04-02-11-2.png 1531w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><figcaption><em>When the above form is submitted it leads the visitor to the Shop page where the &#8216;Range test&#8217; filter is applied on the table on the Shop page. It was possible for the filter to be applied here only because the same filter also exists in this table as well.<\/em><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can create a form on any page where visitors can select navigation filter values. When they submit the form, the will be redirected to the shop page where the filters will be applied. <\/p>\n","protected":false},"author":1,"featured_media":8183,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[135],"tags":[],"class_list":["post-8166","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-documentation"],"_links":{"self":[{"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/posts\/8166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/comments?post=8166"}],"version-history":[{"count":25,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/posts\/8166\/revisions"}],"predecessor-version":[{"id":9982,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/posts\/8166\/revisions\/9982"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/media\/8183"}],"wp:attachment":[{"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/media?parent=8166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/categories?post=8166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/tags?post=8166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}