{"id":14616,"date":"2019-10-17T11:04:17","date_gmt":"2019-10-17T11:04:17","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=14616"},"modified":"2019-10-17T13:28:58","modified_gmt":"2019-10-17T13:28:58","slug":"what-is-layout-engine-option-and-how-to-use-it-in-amp-woocommerce","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/what-is-layout-engine-option-and-how-to-use-it-in-amp-woocommerce\/","title":{"rendered":"What is layout Engine option and how to use it in AMP Woocommerce"},"content":{"rendered":"\n<p>If you want to change all woo-commerce pages architecture in AMP then first you need to purchase and install <a href=\"https:\/\/ampforwp.com\/woocommerce\/\">AMP for WooCommerce<\/a> plugin.<\/p>\n\n\n\n<p><strong>Follow these simple steps:<\/strong><br><\/p>\n\n\n\n<p>You will find this option in the <strong>WordPress Dashboard<\/strong> -> Navigate to <strong>AMP Option Panel<\/strong>\u00a0  -> <strong>Woocommerce <\/strong>-> <strong>Settings<\/strong> -> In this Layout Engin option select &#8220;<strong>V3 Layout(Beta)<\/strong>&#8221; option and then click on the &#8220;<strong>Save Changes<\/strong>&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"430\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4-3-1024x430.png\" alt=\"\" class=\"wp-image-14617\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4-3-1024x430.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4-3-300x126.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4-3-768x322.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4-3-50x21.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4-3-60x25.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4-3-100x42.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4-3.png 1316w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li><strong>V3 Layout(Beta):<\/strong> Once you select this option it will change all woo-commerce pages architecture in AMP.  <\/li><\/ul>\n\n\n\n<h4>V2 Layout option<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"503\" height=\"1024\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_45_39-503x1024.png\" alt=\"\" class=\"wp-image-14633\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_45_39-503x1024.png 503w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_45_39-147x300.png 147w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_45_39-768x1564.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_45_39-25x50.png 25w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_45_39-29x60.png 29w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_45_39-49x100.png 49w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_45_39.png 1366w\" sizes=\"(max-width: 503px) 100vw, 503px\" \/><\/figure>\n\n\n\n<h4>After Selecting V3 Layout Option <\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"570\" height=\"1024\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_48_13-570x1024.png\" alt=\"\" class=\"wp-image-14635\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_48_13-570x1024.png 570w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_48_13-167x300.png 167w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_48_13-768x1379.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_48_13-28x50.png 28w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_48_13-33x60.png 33w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_48_13-56x100.png 56w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-shop-page-amp-2019-10-17-18_48_13.png 1366w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><\/figure>\n\n\n\n<h4>The output of Single Page V3 Layout <\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"676\" height=\"1024\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-product-boult-audio-probass-curve-neckband-bluetooth-headset-with-mic-blue-black-grey-in-the-ear-amp-2019-10-17-18_04_09-676x1024.png\" alt=\"\" class=\"wp-image-14624\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-product-boult-audio-probass-curve-neckband-bluetooth-headset-with-mic-blue-black-grey-in-the-ear-amp-2019-10-17-18_04_09-676x1024.png 676w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-product-boult-audio-probass-curve-neckband-bluetooth-headset-with-mic-blue-black-grey-in-the-ear-amp-2019-10-17-18_04_09-198x300.png 198w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-product-boult-audio-probass-curve-neckband-bluetooth-headset-with-mic-blue-black-grey-in-the-ear-amp-2019-10-17-18_04_09-768x1163.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-product-boult-audio-probass-curve-neckband-bluetooth-headset-with-mic-blue-black-grey-in-the-ear-amp-2019-10-17-18_04_09-33x50.png 33w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-product-boult-audio-probass-curve-neckband-bluetooth-headset-with-mic-blue-black-grey-in-the-ear-amp-2019-10-17-18_04_09-40x60.png 40w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-product-boult-audio-probass-curve-neckband-bluetooth-headset-with-mic-blue-black-grey-in-the-ear-amp-2019-10-17-18_04_09-66x100.png 66w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-product-boult-audio-probass-curve-neckband-bluetooth-headset-with-mic-blue-black-grey-in-the-ear-amp-2019-10-17-18_04_09.png 1366w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>If you want to change all woo-commerce pages architecture in AMP then first you need to purchase and install AMP for WooCommerce plugin. Follow these simple steps: You will find this option in the WordPress Dashboard -> Navigate to AMP Option Panel\u00a0 -> Woocommerce -> Settings -> In this Layout&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[91],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14616"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=14616"}],"version-history":[{"count":14,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14616\/revisions"}],"predecessor-version":[{"id":14638,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14616\/revisions\/14638"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=14616"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=14616"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=14616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}