{"id":51,"date":"2020-02-28T15:58:21","date_gmt":"2020-02-28T15:58:21","guid":{"rendered":"http:\/\/wiki2.plumserver.com\/knowledge-base\/magento-2-ajax-cart-v2-x-configuration"},"modified":"2021-11-18T03:25:28","modified_gmt":"2021-11-18T08:25:28","slug":"magento-ajax-cart-v2-configuration","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2\/configuration","title":{"rendered":"Magento 2 Ajax Cart v2.x Configuration"},"content":{"rendered":"\n<h2 id=\"configuring-magento-2-ajax-cart-extension\">Configuring Magento 2 Ajax Cart Extension<\/h2>\n\n\n\n<p>Here you will learn how to correctly configure Plumrocket <a href=\"\/magento-ajax-cart\">Magento 2 Ajax Cart Extension<\/a>. In order to perform this, follow the instructions below.<\/p>\n\n\n\n<p><strong>In the main menu, go to the \u201cPlumrocket\u201d tab &gt; select \u201cAjax Cart\u201d extension &gt; navigate to the \u201cConfiguration\u201d section.<\/strong><\/p>\n\n\n\n<h3>General<\/h3>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-info\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\">Step-by-Step action:<\/p>\n\n\n\n<ol><li>&#8220;<strong>Enable Extension<\/strong>&#8220;: this option allows you to enable or disable this Ajax Cart extension.      <\/li><li>Option &#8220;<strong>Serial Key&#8221;<\/strong>: enter the unique serial key provided after the purchase for the legitimate and proper functioning of your extension. Note: In most cases, this field will be pre-filled with a serial key automatically and the green check mark will be displayed. Otherwise, please read the <a title=\"License Installation\" href=\"\/docs\/general\/magento-license-installation\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Serial Key Activation<\/strong><\/a> article in order to find and paste your serial key manually.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"\/docs\/wp-content\/uploads\/2021\/03\/magento2-ajax-cart-extension-7.png\" alt=\"Magento 2 ajax cart extension configuratiom.png\" class=\"wp-image-17870\"\/><\/figure>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-info\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\">Step-by-Step actions:<\/p>\n\n\n\n<ol start=\"3\"><li>&#8220;<strong>Minicart Style<\/strong>&#8220;: choose the Drop Down or Right Sidebar minicart style. Minicart is displayed when you click on the cart icon on the store.<\/li><li>&#8220;<strong>Checkout Button Action<\/strong>&#8220;: allows specifying whether the &#8220;Checkout&#8221; button in Ajax Cart Detailed Popup should lead to &#8220;Shopping Cart Page&#8217; or &#8220;Checkout Page&#8221;.<\/li><li>&#8220;<strong>Continue Shopping Link Action<\/strong>&#8220;: allows you to set the page the &#8220;Continue Shopping&#8221; link will lead to.<\/li><li>&#8220;<strong>Show Related Products &amp; Cross-sells In Ajax Cart Popup<\/strong>&#8220;: lets you display Magento 2 related products and cross-sells in ajax cart popup when customers add &amp; edit the shopping cart contents.<\/li><li>&#8220;<strong>Show Qty of Products in Cart on Product List<\/strong>&#8220;: set to &#8220;Yes&#8221; if you want to output the label on the product list items in order to display the quantity of<strong> <\/strong>each product in the cart.<\/li><li>&#8220;<strong>Qty Label Selector<\/strong>&#8220;: enter this HTML class of the product item where the Qty label should be inserted to. The default class name is &#8220;product-image-wrapper&#8221;. Use this Label Selector if you want to display the label in a different place of the product list item, or you are using third-party themes and the label is not displayed correctly.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"\/docs\/wp-content\/uploads\/2021\/03\/magento2-ajax-cart-extension-1-2.png\" alt=\"2 Magento 2 ajax cart extension configuratiom.png\" class=\"wp-image-17871\"\/><\/figure>\n\n\n\n<h3>Design<\/h3>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-info\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\">Detailed description:<\/p>\n\n\n\n<ol><li>You may customize the appearance of the <strong>Detailed Popup<\/strong> using the following options: <strong>Link Color, Link Color (On Hover), Button Background Color, Button Background Color (on Hover), Button Text Color, Button Text Color (on Hover).<\/strong>\n    <\/li><li>You may customize the design of the <strong>&#8220;Add to Cart Button on Product Page&#8221;<\/strong> using the following options: <strong>Button Text Color, Button Text Color (on Hover), Button Background Color, Button Background Color (On Hover), Button Icon Background Color, Button Icon Background Color (on Hover).<\/strong><\/li><\/ol>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"\/docs\/wp-content\/uploads\/2020\/05\/Magento_2_ajax_cart_extension_config_2.jpg\" alt=\"Magento 2 ajax cart extension config\"\/><\/figure>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-info\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\">Detailed Information:<\/p>\n\n\n\n<ol><li>Customize the design of <strong>&#8220;Add to Cart&#8221; Button on Product List<\/strong> using the following options: <strong>Button Text Color, Button Text Color (on Hover), Button Background Color, Button Background Color (On Hover), Button Icon Background Color, Button Icon Background Color (on Hover).<\/strong>     <\/li><\/ol>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"\/docs\/wp-content\/uploads\/2021\/03\/magento2-ajax-cart-extension-6.png\" alt=\"3 Magento 2 ajax cart extension configuratiom.png\" class=\"wp-image-17872\"\/><\/figure>\n\n\n\n<h3>Additional Configuration<\/h3>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-info\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\">Step-by-Step actions:<\/p>\n\n\n\n<ol><li>&#8220;<strong>Mode<\/strong>&#8220;: select Automatic mode to automatically find all &#8220;Add to Cart&#8221; buttons and apply Ajax Cart functionality to them. Otherwise, select Manual mode and a Button Selector will appear.<\/li><li>&#8220;<strong>Button Selector<\/strong>&#8220;: this option will appear if you select Manual mode in the previous option. Use the existing CSS selector (or specify your own one) to manually apply Ajax Cart functionality to all &#8220;Add to Cart&#8221; buttons with matching HTML class selector.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"\/docs\/wp-content\/uploads\/2021\/03\/magento2-ajax-cart-extension-5.png\" alt=\"5 Magento 2 ajax cart extension configuratiom.png\" class=\"wp-image-17873\"\/><\/figure>\n\n\n\n<p>Here&#8217;s how the aforementioned options will look like on your frontend once enabled.<\/p>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-info\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\">Step-by-Step action:<\/p>\n\n\n\n<ol><li><strong>The view of Ajax Cart Popup on Magento 2 frontend.<\/strong><\/li><li><strong>Related Products In Ajax Cart Popup:<\/strong> the related products in ajax cart popup, if they were configured for the main product the customer tried to add. <strong><\/strong><\/li><\/ol>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"\/docs\/wp-content\/uploads\/2020\/05\/Magento_2_ajax_cart_extension_config_4.jpg\" alt=\"Magento 2 ajax cart extension config\"\/><\/figure>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-info\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\">Detailed Information:<\/p>\n\n\n\n<ol><li>If the <strong>&#8220;Show Detailed Popup&#8221;<\/strong> value is selected for the <strong>&#8220;After Product Added to Cart&#8221;<\/strong> option in extension configuration &#8211; the customers will see this popup after they add the product to their shopping cart.<\/li><li>The <strong>&#8220;Show Related Cross-sells In Ajax Cart Popup&#8221;<\/strong> option will display related products &amp; cross-sells in ajax cart popup, after customers add or edit their shopping cart contents. <strong><\/strong><\/li><\/ol>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"\/docs\/wp-content\/uploads\/2020\/05\/Magento_2_ajax_cart_extension_config_5.jpg\" alt=\"Magento 2 ajax cart extension config\"\/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Configuring Magento 2 Ajax Cart Extension Here you will learn how to correctly configure Plumrocket Magento 2 Ajax Cart Extension. In order to perform this, follow the instructions below. In the main menu, go to the \u201cPlumrocket\u201d tab &gt; select \u201cAjax Cart\u201d extension &gt; navigate to the \u201cConfiguration\u201d section. General Design Additional Configuration Here&#8217;s how &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2\/configuration\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Magento 2 Ajax Cart v2.x Configuration&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[121],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v17.2 (Yoast SEO v17.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Configure Magento 2  Ajax Cart Extension v2.x Magento 2 Ajax Cart v2.x Configuration - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"Configuring Magento 2 Ajax Cart Extension Here you will learn how to correctly configure Plumrocket Magento 2 Ajax Cart Extension. In order to perform\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2\/configuration\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento 2 Ajax Cart v2.x Configuration\" \/>\n<meta property=\"og:description\" content=\"Configuring Magento 2 Ajax Cart Extension Here you will learn how to correctly configure Plumrocket Magento 2 Ajax Cart Extension. In order to perform\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2\/configuration\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-28T15:58:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-18T08:25:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/03\/magento2-ajax-cart-extension-7.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Plumrocket\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Configure Magento 2  Ajax Cart Extension v2.x Magento 2 Ajax Cart v2.x Configuration - Plumrocket Documentation","description":"Configuring Magento 2 Ajax Cart Extension Here you will learn how to correctly configure Plumrocket Magento 2 Ajax Cart Extension. In order to perform","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2\/configuration","og_locale":"en_US","og_type":"article","og_title":"Magento 2 Ajax Cart v2.x Configuration","og_description":"Configuring Magento 2 Ajax Cart Extension Here you will learn how to correctly configure Plumrocket Magento 2 Ajax Cart Extension. In order to perform","og_url":"https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2\/configuration","og_site_name":"Plumrocket Documentation","article_published_time":"2020-02-28T15:58:21+00:00","article_modified_time":"2021-11-18T08:25:28+00:00","og_image":[{"url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/03\/magento2-ajax-cart-extension-7.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Plumrocket","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/plumrocket.com\/docs\/#website","url":"https:\/\/plumrocket.com\/docs\/","name":"Plumrocket Documentation","description":"Extensions docs, troubleshootings etc.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plumrocket.com\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2\/configuration#primaryimage","inLanguage":"en-US","url":"\/docs\/wp-content\/uploads\/2021\/03\/magento2-ajax-cart-extension-7.png","contentUrl":"\/docs\/wp-content\/uploads\/2021\/03\/magento2-ajax-cart-extension-7.png"},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2\/configuration#webpage","url":"https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2\/configuration","name":"Magento 2 Ajax Cart v2.x Configuration - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2\/configuration#primaryimage"},"datePublished":"2020-02-28T15:58:21+00:00","dateModified":"2021-11-18T08:25:28+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/38b360639b934d6c984ee4f3ffce7d20"},"description":"Configuring Magento 2 Ajax Cart Extension Here you will learn how to correctly configure Plumrocket Magento 2 Ajax Cart Extension. In order to perform","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2\/configuration#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2\/configuration"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2\/configuration#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magento 2 Extensions","item":"https:\/\/plumrocket.com\/magento-extensions"},{"@type":"ListItem","position":2,"name":"Magento 2 Ajax Cart","item":"https:\/\/plumrocket.com\/magento-ajax-cart"},{"@type":"ListItem","position":3,"name":"Documentation","item":"https:\/\/plumrocket.com\/docs\/magento-ajax-cart"},{"@type":"ListItem","position":4,"name":"v2","item":"https:\/\/plumrocket.com\/docs\/magento-ajax-cart\/v2"},{"@type":"ListItem","position":5,"name":"Configuration"}]},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/38b360639b934d6c984ee4f3ffce7d20","name":"Plumrocket","image":{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/72392a92ae750c66560be284502b6676?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/72392a92ae750c66560be284502b6676?s=96&d=mm&r=g","caption":"Plumrocket"},"sameAs":["https:\/\/plumrocket.com\/docs"]}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/51"}],"collection":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":3,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":25032,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/51\/revisions\/25032"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}