{"id":136,"date":"2020-04-19T11:01:23","date_gmt":"2020-04-19T08:01:23","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=136"},"modified":"2025-06-05T17:36:17","modified_gmt":"2025-06-05T14:36:17","slug":"custom-add-to-cart-pro","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/","title":{"rendered":"Custom Add To Cart widget"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Custom Add To Cart (Pro)<\/h1>\n\n\n\n<p>Add an add to cart button, linked dynamically to a specific product, anywhere on your site by dragging the <strong>Custom Add to Cart <\/strong>widget wherever you need it.<\/p>\n\n\n\n<p>[callout type=&#8221;note&#8221;]You must have WooCommerce installed in order to use its features, including products and WooCommerce widgets.[\/callout]<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Content<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Product<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/01\/Add-To-Cart-1.png\" alt=\"\" class=\"wp-image-28382\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Product: Select the product to be added to the cart<\/li>\n\n\n\n<li>Show Quantity: Set to Yes to allow the user to change the quantity\n<ol class=\"wp-block-list\">\n<li>Quantity: If Show Quantity is set to No, this option becomes available so that you can pre-determine the number of items to add to the cart.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Button<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/01\/add-to-cart-2.png\" alt=\"\" class=\"wp-image-28384\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Type: Select the type of button to use, choosing from Default, Info, Success, Warning, and Danger<\/li>\n\n\n\n<li>Text: Enter the text to be displayed on the button<\/li>\n\n\n\n<li>Alignment: Align the [widget] to the left, right, center, or justified<\/li>\n\n\n\n<li>Size: Select the preset button sizes, from Extra Small to Extra Large<\/li>\n\n\n\n<li>Icon: Select a Font Awesome icon to display on the button<\/li>\n\n\n\n<li>Icon Position: Choose to display the Icon Before or After the button text<\/li>\n\n\n\n<li>Icon Spacing: Set the amount of space between the Icon and the button text<\/li>\n\n\n\n<li>Button ID: (Optional) Assign a unique button ID to use for situations such as Google Analytics events<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Layout<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/01\/add-to-cart-3.png\" alt=\"\" class=\"wp-image-28385\"\/><\/figure>\n\n\n\n<p>From the dropdown selector, choose your desired layout. The default layout is Inline (flex); however, this may need to be adjusted for integration. Stacked layout is ideal for online stores that allow Apple Pay. Auto layout will adjust the button to the other components available in the widget. The responsive control options can be adjusted by breakpoint by ticking on the breakpoint icon.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Style<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Button<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Typography Options<\/h4>\n\n\n\n<p>Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options<\/p>\n\n\n\n<p>These options may be set independently for both the normal and hover states.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Text Color: Choose the color of the button text<\/li>\n\n\n\n<li>Background Color: Choose the background color of the button<\/li>\n\n\n\n<li>Hover Animation: Choose an animation effect when hovering over the icon, such as Grow, Pulse, Skew, etc.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Borders<\/h4>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved<\/li>\n\n\n\n<li>Border Radius: Control border roundness of the button<\/li>\n\n\n\n<li>Box Shadow: Adjust box shadow options<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Padding<\/h4>\n\n\n\n<ol start=\"7\" class=\"wp-block-list\">\n<li>Padding: Set the padding within the button<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting<\/h2>\n\n\n\n<p>Note: The \u201cEnable AJAX add to basket buttons on archives\u201d must be enabled in WooCommerce Settings &gt; Products in order for this feature to properly function.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/01\/add-to-cart-4.png\" alt=\"\" class=\"wp-image-28386\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Add an Add to Cart button to a specific product anywhere on your site<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65a3ea2369386d0d4d8bc891"],"footnotes":""},"categories":[1440],"tags":[1389,1388,1382,1390,1398],"class_list":["post-136","post","type-post","status-publish","format-standard","hentry","category-advanced-functionality","tag-advanced","tag-agency","tag-ecommerce","tag-expert","tag-legacy-essential"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Custom Add To Cart widget | How to create an &#039;Add to Cart&#039; Button in Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Custom Add To Cart widget in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Add To Cart widget | How to create an &#039;Add to Cart&#039; Button in Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Custom Add To Cart widget in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-19T08:01:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-05T14:36:17+00:00\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Custom Add To Cart widget\",\"datePublished\":\"2020-04-19T08:01:23+00:00\",\"dateModified\":\"2025-06-05T14:36:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/\"},\"wordCount\":422,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/01\/Add-To-Cart-1.png\",\"keywords\":[\"Advanced\",\"Agency\",\"eCommerce\",\"Expert\",\"Legacy Essential\"],\"articleSection\":[\"Advanced functionality\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/\",\"url\":\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/\",\"name\":\"Custom Add To Cart widget | How to create an 'Add to Cart' Button in Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/01\/Add-To-Cart-1.png\",\"datePublished\":\"2020-04-19T08:01:23+00:00\",\"dateModified\":\"2025-06-05T14:36:17+00:00\",\"description\":\"Learn everything about Custom Add To Cart widget in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Advanced functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Custom Add To Cart widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Add To Cart widget | How to create an 'Add to Cart' Button in Elementor","description":"Learn everything about Custom Add To Cart widget in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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:\/\/elementor.com\/help\/custom-add-to-cart-pro\/","og_locale":"en_US","og_type":"article","og_title":"Custom Add To Cart widget | How to create an 'Add to Cart' Button in Elementor","og_description":"Learn everything about Custom Add To Cart widget in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/","og_site_name":"Help","article_published_time":"2020-04-19T08:01:23+00:00","article_modified_time":"2025-06-05T14:36:17+00:00","author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Custom Add To Cart widget","datePublished":"2020-04-19T08:01:23+00:00","dateModified":"2025-06-05T14:36:17+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/"},"wordCount":422,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/01\/Add-To-Cart-1.png","keywords":["Advanced","Agency","eCommerce","Expert","Legacy Essential"],"articleSection":["Advanced functionality"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/","url":"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/","name":"Custom Add To Cart widget | How to create an 'Add to Cart' Button in Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/01\/Add-To-Cart-1.png","datePublished":"2020-04-19T08:01:23+00:00","dateModified":"2025-06-05T14:36:17+00:00","description":"Learn everything about Custom Add To Cart widget in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/custom-add-to-cart-pro\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Advanced functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/"},{"@type":"ListItem","position":5,"name":"Custom Add To Cart widget"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=136"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/136\/revisions"}],"predecessor-version":[{"id":58582,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/136\/revisions\/58582"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}