{"id":2295,"date":"2023-08-21T13:35:51","date_gmt":"2023-08-21T13:35:51","guid":{"rendered":"https:\/\/addify.store\/documentation\/?page_id=2295"},"modified":"2023-08-21T13:35:51","modified_gmt":"2023-08-21T13:35:51","slug":"setting-up-custom-add-to-cart-button","status":"publish","type":"page","link":"https:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/setting-up-custom-add-to-cart-button\/","title":{"rendered":"Setting Up Custom Add to Cart Button"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Customizing the Add to Cart Button<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Displaying Options for Add to Cart Button<\/h3>\n\n\n\n<p>Configure the general settings by choosing the display options for the Add to Cart button on pages.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Button Options:<\/strong> Choose from the options in the dropdown for the button display:\n<ul class=\"wp-block-list\">\n<li>Only show a text<\/li>\n\n\n\n<li>Only show a cart icon<\/li>\n\n\n\n<li>Show both<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Select Icon:<\/strong> Choose from multiple cart icon designs or set a custom icon<\/li>\n\n\n\n<li><strong>Display On:<\/strong> Select the page on which you want to display the custom add to cart button:\n<ul class=\"wp-block-list\">\n<li>Show on both<\/li>\n\n\n\n<li>Show on shop page<\/li>\n\n\n\n<li>Show on product page<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/nhIfP1keAWfl7LHvtd5dBEj5CyReiuue0saQ9qJNsEnH1NDhoQG7M0tEqd7KTFeDvYoit9v1L9fDCRHuz-ZveMtaUnXb8UY_VnoDMd8PohDeW5mfs636u8dbkeXDvII9p7JYQyF8EFoV8G6V1i0N0Ks\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Styling Options for Add to Cart Button<\/h3>\n\n\n\n<p>The Custom Add to Cart Button plugin offers the flexibility to personalize the traditional Add to Cart button by implementing various customizations:<\/p>\n\n\n\n<p><strong>Use Custom Color:<\/strong> Checkmark to allow custom color for the Add to Cart button<\/p>\n\n\n\n<p>Change the color for the WooCommerce Add to Cart Button:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text Color&nbsp;<\/li>\n\n\n\n<li>Background Color&nbsp;<\/li>\n\n\n\n<li>Border Color&nbsp;<\/li>\n\n\n\n<li>Hover Background Color<\/li>\n\n\n\n<li>Hover Text Color<\/li>\n<\/ul>\n\n\n\n<p><strong>Font Size:<\/strong> Change the font size of Add to Cart button in pixels&nbsp;<\/p>\n\n\n\n<p><strong>Custom CSS:<\/strong> Add a CSS to customize the button<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/KB2H2zcOTHDbhpByCLLcOWoV2n7wy6lfc-KKv8fyzuMG5Npbv5-vRzB-h7hehFr0MZNnIWxJDMb6LwlahyF2JUjlqen3lO1RShsoSDCUqhZ6NyywJ1mIwclRjCFlkvoOQBiFriZMzsbiOUfB-soJiOQ\" alt=\"\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Customizing the Add to Cart Button Displaying Options for Add to Cart Button Configure the general settings by choosing the display options for the Add to Cart button on pages. Styling Options for Add to Cart Button The Custom Add to Cart Button plugin offers the flexibility to personalize the traditional Add to Cart button [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1753,"parent":2287,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"template-parts\/documentation-template.php","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-2295","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Setting Up Custom Add to Cart Button - Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/setting-up-custom-add-to-cart-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Setting Up Custom Add to Cart Button - Documentation\" \/>\n<meta property=\"og:description\" content=\"Customizing the Add to Cart Button Displaying Options for Add to Cart Button Configure the general settings by choosing the display options for the Add to Cart button on pages. Styling Options for Add to Cart Button The Custom Add to Cart Button plugin offers the flexibility to personalize the traditional Add to Cart button [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/setting-up-custom-add-to-cart-button\/\" \/>\n<meta property=\"og:site_name\" content=\"Documentation\" \/>\n<meta property=\"og:image\" content=\"https:\/\/addify.store\/documentation\/wp-content\/uploads\/2023\/06\/database-usage.png\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/custom-add-to-cart-button-for-woocommerce\\\/setting-up-custom-add-to-cart-button\\\/\",\"url\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/custom-add-to-cart-button-for-woocommerce\\\/setting-up-custom-add-to-cart-button\\\/\",\"name\":\"Setting Up Custom Add to Cart Button - Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/custom-add-to-cart-button-for-woocommerce\\\/setting-up-custom-add-to-cart-button\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/custom-add-to-cart-button-for-woocommerce\\\/setting-up-custom-add-to-cart-button\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/addify.store\\\/documentation\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/database-usage.png\",\"datePublished\":\"2023-08-21T13:35:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/custom-add-to-cart-button-for-woocommerce\\\/setting-up-custom-add-to-cart-button\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/custom-add-to-cart-button-for-woocommerce\\\/setting-up-custom-add-to-cart-button\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/custom-add-to-cart-button-for-woocommerce\\\/setting-up-custom-add-to-cart-button\\\/#primaryimage\",\"url\":\"https:\\\/\\\/addify.store\\\/documentation\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/database-usage.png\",\"contentUrl\":\"https:\\\/\\\/addify.store\\\/documentation\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/database-usage.png\",\"width\":512,\"height\":512},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/custom-add-to-cart-button-for-woocommerce\\\/setting-up-custom-add-to-cart-button\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/addify.store\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce\",\"item\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Custom Add To Cart Button For WooCommerce\",\"item\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/custom-add-to-cart-button-for-woocommerce\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Setting Up Custom Add to Cart Button\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/addify.store\\\/documentation\\\/\",\"name\":\"Documentation\",\"description\":\"Documentation for Addify Extensions\",\"publisher\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/addify.store\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#organization\",\"name\":\"Documentation\",\"url\":\"https:\\\/\\\/addify.store\\\/documentation\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/addify.store\\\/documentation\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/Asset-21-2x.png\",\"contentUrl\":\"https:\\\/\\\/addify.store\\\/documentation\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/Asset-21-2x.png\",\"width\":6761,\"height\":1853,\"caption\":\"Documentation\"},\"image\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Setting Up Custom Add to Cart Button - Documentation","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:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/setting-up-custom-add-to-cart-button\/","og_locale":"en_US","og_type":"article","og_title":"Setting Up Custom Add to Cart Button - Documentation","og_description":"Customizing the Add to Cart Button Displaying Options for Add to Cart Button Configure the general settings by choosing the display options for the Add to Cart button on pages. Styling Options for Add to Cart Button The Custom Add to Cart Button plugin offers the flexibility to personalize the traditional Add to Cart button [&hellip;]","og_url":"https:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/setting-up-custom-add-to-cart-button\/","og_site_name":"Documentation","og_image":[{"width":512,"height":512,"url":"https:\/\/addify.store\/documentation\/wp-content\/uploads\/2023\/06\/database-usage.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/setting-up-custom-add-to-cart-button\/","url":"https:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/setting-up-custom-add-to-cart-button\/","name":"Setting Up Custom Add to Cart Button - Documentation","isPartOf":{"@id":"https:\/\/addify.store\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/setting-up-custom-add-to-cart-button\/#primaryimage"},"image":{"@id":"https:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/setting-up-custom-add-to-cart-button\/#primaryimage"},"thumbnailUrl":"https:\/\/addify.store\/documentation\/wp-content\/uploads\/2023\/06\/database-usage.png","datePublished":"2023-08-21T13:35:51+00:00","breadcrumb":{"@id":"https:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/setting-up-custom-add-to-cart-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/setting-up-custom-add-to-cart-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/setting-up-custom-add-to-cart-button\/#primaryimage","url":"https:\/\/addify.store\/documentation\/wp-content\/uploads\/2023\/06\/database-usage.png","contentUrl":"https:\/\/addify.store\/documentation\/wp-content\/uploads\/2023\/06\/database-usage.png","width":512,"height":512},{"@type":"BreadcrumbList","@id":"https:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/setting-up-custom-add-to-cart-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/addify.store\/documentation\/"},{"@type":"ListItem","position":2,"name":"WooCommerce","item":"https:\/\/addify.store\/documentation\/woocommerce\/"},{"@type":"ListItem","position":3,"name":"Custom Add To Cart Button For WooCommerce","item":"https:\/\/addify.store\/documentation\/woocommerce\/custom-add-to-cart-button-for-woocommerce\/"},{"@type":"ListItem","position":4,"name":"Setting Up Custom Add to Cart Button"}]},{"@type":"WebSite","@id":"https:\/\/addify.store\/documentation\/#website","url":"https:\/\/addify.store\/documentation\/","name":"Documentation","description":"Documentation for Addify Extensions","publisher":{"@id":"https:\/\/addify.store\/documentation\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/addify.store\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/addify.store\/documentation\/#organization","name":"Documentation","url":"https:\/\/addify.store\/documentation\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/addify.store\/documentation\/#\/schema\/logo\/image\/","url":"https:\/\/addify.store\/documentation\/wp-content\/uploads\/2023\/11\/Asset-21-2x.png","contentUrl":"https:\/\/addify.store\/documentation\/wp-content\/uploads\/2023\/11\/Asset-21-2x.png","width":6761,"height":1853,"caption":"Documentation"},"image":{"@id":"https:\/\/addify.store\/documentation\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages\/2295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/comments?post=2295"}],"version-history":[{"count":1,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages\/2295\/revisions"}],"predecessor-version":[{"id":2296,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages\/2295\/revisions\/2296"}],"up":[{"embeddable":true,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages\/2287"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/media\/1753"}],"wp:attachment":[{"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/media?parent=2295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}