{"id":3817,"date":"2017-09-15T13:45:01","date_gmt":"2017-09-15T13:45:01","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=3817"},"modified":"2019-08-09T13:25:52","modified_gmt":"2019-08-09T13:25:52","slug":"add-woocommerce-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/add-woocommerce-amp\/","title":{"rendered":"Getting started WooCommerce Pro in AMP"},"content":{"rendered":"<div class=\"hkb-article__content\">\n<p>You can integrate WooCommerce Compatibility in AMP with the help of an extension called <a href=\"https:\/\/ampforwp.com\/woocommerce\/\">WooCommerce Pro for AMP<\/a>.<\/p>\n<p>In this article, we\u2019ll explain how to add Woocommerce in AMP.<\/p>\n<p>It\u2019s pretty easy for you to set up because it works out of the box.<\/p>\n<p><strong>Here are the steps:<\/strong><\/p>\n<ol>\n<li>Download and Install from the <a href=\"https:\/\/ampforwp.com\/my-account\/\">accounts area<\/a>.<\/li>\n<li>Go to <strong>Plugins<\/strong>&nbsp;&gt;&nbsp;<strong>Add New<\/strong>&nbsp;then click on&nbsp;<strong>Upload Plugin<\/strong>.<\/li>\n<\/ol>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/Add-Plugins-\u2039-wordpress-\u2014-WordPress-2019-04-10-04-43-26.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6320\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/Add-Plugins-\u2039-wordpress-\u2014-WordPress-2019-04-10-04-43-26.png\" alt=\"\" width=\"760\" height=\"447\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/Add-Plugins-\u2039-wordpress-\u2014-WordPress-2019-04-10-04-43-26.png 760w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/Add-Plugins-\u2039-wordpress-\u2014-WordPress-2019-04-10-04-43-26-300x176.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/Add-Plugins-\u2039-wordpress-\u2014-WordPress-2019-04-10-04-43-26-50x29.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/Add-Plugins-\u2039-wordpress-\u2014-WordPress-2019-04-10-04-43-26-60x35.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/Add-Plugins-\u2039-wordpress-\u2014-WordPress-2019-04-10-04-43-26-100x59.png 100w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/a><\/p>\n<p>3. <a href=\"https:\/\/ampforwp.com\/advanced-amp-ads\/\">Advanced AMP Ads<\/a> is a Paid Plugin Extension. You won\u2019t find that extension in the WordPress Plugin directory. So you have to upload this plugin after purchasing.<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Click on&nbsp;<strong>Upload Plugin<\/strong><\/li>\n<li>then choose \u201d Advance AMP Ads \u201d Extension from which you already downloaded after purchase.<\/li>\n<li>After that, Click on&nbsp;<strong>Install Now<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/upload-woocommerece.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6322\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/upload-woocommerece.png\" alt=\"\" width=\"944\" height=\"310\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/upload-woocommerece.png 944w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/upload-woocommerece-300x99.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/upload-woocommerece-768x252.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/upload-woocommerece-50x16.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/upload-woocommerece-60x20.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/upload-woocommerece-100x33.png 100w\" sizes=\"(max-width: 944px) 100vw, 944px\" \/><\/a><\/p>\n<p>4. After Uploading the plugin, Click on <strong>Activate Plugin<\/strong><\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/activate-plugin.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6324\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/activate-plugin.png\" alt=\"\" width=\"755\" height=\"243\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/activate-plugin.png 755w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/activate-plugin-300x97.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/activate-plugin-50x16.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/activate-plugin-60x19.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/activate-plugin-100x32.png 100w\" sizes=\"(max-width: 755px) 100vw, 755px\" \/><\/a><\/p>\n<p>5.&nbsp;That\u2019s all, you have successfully installed your Woocommerce extension.<\/p>\n<h4><strong>How to select products custom post type from AMP setting panel.<\/strong><\/h4>\n<p>First, navigate to <strong>AMP option panel<\/strong><strong> -\u203a Settings&nbsp; -&gt; General in<\/strong>&nbsp;your WordPress dashboard.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/custom-post-type.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6340\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/custom-post-type.png\" alt=\"\" width=\"946\" height=\"497\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/custom-post-type.png 946w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/custom-post-type-300x158.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/custom-post-type-768x403.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/custom-post-type-50x26.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/custom-post-type-60x32.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/custom-post-type-100x53.png 100w\" sizes=\"(max-width: 946px) 100vw, 946px\" \/><\/a><\/p>\n<p><strong>Custom post types:<\/strong> Once you select products custom post type amp support will enable for all your products. After that click on the save change button.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/archives.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6346\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/archives.png\" alt=\"\" width=\"896\" height=\"81\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/archives.png 896w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/archives-300x27.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/archives-768x69.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/archives-50x5.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/archives-60x5.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/archives-100x9.png 100w\" sizes=\"(max-width: 896px) 100vw, 896px\" \/><\/a><\/p>\n<\/div>\n<p>Done! The WooCommerce pages such as Shop, Products pages, and archive pages will be visible on the AMP version of your site.<\/p>\n<div class=\"hkb-article__content\">\n<p style=\"background-color: #ffdddd; border-left: 2px solid #f44336; padding:10px;\"><strong>Note:<\/strong> This extension requires WooCommerce, which is a free and an open source plugin.<\/p>\n<div class=\"hkb-article__content\">\n<div class=\"hkb-article__content\">\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\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>\n<\/div>\n<\/div>\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>You can integrate WooCommerce Compatibility in AMP with the help of an extension called WooCommerce Pro for AMP. In this article, we\u2019ll explain how to add Woocommerce in AMP. It\u2019s pretty easy for you to set up because it works out of the box. Here are the steps: Download and&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[91],"ht-kb-tag":[78,94],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3817"}],"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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=3817"}],"version-history":[{"count":15,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3817\/revisions"}],"predecessor-version":[{"id":13609,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3817\/revisions\/13609"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=3817"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=3817"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=3817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}