{"id":360,"date":"2020-01-14T13:31:56","date_gmt":"2020-01-14T13:31:56","guid":{"rendered":"https:\/\/getbowtied.com\/?post_type=helpkit&#038;p=360"},"modified":"2020-01-21T09:30:44","modified_gmt":"2020-01-21T09:30:44","slug":"how-to-change-the-color-of-the-add-to-cart-button","status":"publish","type":"helpkit","link":"https:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/","title":{"rendered":"How to change the color of the Add to Cart button"},"content":{"rendered":"\n<p>The color of the Add to Cart button on the single product page is black by default. Since it follows the global color scheme set in the Theme Options panel, there isn&#8217;t any option to change this button specifically.<\/p>\n\n\n\n<p>However, to get there, you can use the following bit of Custom CSS. Paste it in The Retailer &gt; Customize &gt; Custom Code, in the Custom CSS box:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {<br> background-color: #8A8A8A !important;<br>}<\/pre>\n\n\n\n<p>It will change the color of all action buttons such as Add to Cart, Checkout, etc.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The color of the Add to Cart button on the single product page is black by default. Since it follows the global color scheme set in the Theme Options panel, there isn&#8217;t any option to change this button specifically. However, to get there, you can use the following bit of Custom CSS. Paste it in\u2026<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","helpkit-category":[124],"helpkit-tag":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to change the color of the Add to Cart button - Get Bowtied<\/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:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-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=\"How to change the color of the Add to Cart button - Get Bowtied\" \/>\n<meta property=\"og:description\" content=\"The color of the Add to Cart button on the single product page is black by default. Since it follows the global color scheme set in the Theme Options panel, there isn&#8217;t any option to change this button specifically. However, to get there, you can use the following bit of Custom CSS. Paste it in\u2026\" \/>\n<meta property=\"og:url\" content=\"https:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/\" \/>\n<meta property=\"og:site_name\" content=\"Get Bowtied\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GetBowtied\/\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-21T09:30:44+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@getbowtied\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/\",\"url\":\"https:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/\",\"name\":\"How to change the color of the Add to Cart button - Get Bowtied\",\"isPartOf\":{\"@id\":\"https:\/\/getbowtied.com\/#website\"},\"datePublished\":\"2020-01-14T13:31:56+00:00\",\"dateModified\":\"2020-01-21T09:30:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/getbowtied.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Help Articles\",\"item\":\"https:\/\/getbowtied.com\/documentation\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to change the color of the Add to Cart button\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/getbowtied.com\/#website\",\"url\":\"https:\/\/getbowtied.com\/\",\"name\":\"Get Bowtied\",\"description\":\"Hassle-free themes, plugins &amp; support for WordPress and WooCommerce\",\"publisher\":{\"@id\":\"https:\/\/getbowtied.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/getbowtied.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/getbowtied.com\/#organization\",\"name\":\"Get Bowtied\",\"url\":\"https:\/\/getbowtied.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/getbowtied.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.getbowtied.com\/wp-content\/uploads\/2020\/02\/getbowtied-logo-alt.png\",\"contentUrl\":\"https:\/\/www.getbowtied.com\/wp-content\/uploads\/2020\/02\/getbowtied-logo-alt.png\",\"width\":512,\"height\":512,\"caption\":\"Get Bowtied\"},\"image\":{\"@id\":\"https:\/\/getbowtied.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/GetBowtied\/\",\"https:\/\/twitter.com\/getbowtied\",\"https:\/\/www.instagram.com\/getbowtied\/\",\"https:\/\/www.linkedin.com\/company\/get-bowtied\",\"https:\/\/pinterest.com\/getbowtied\/\",\"https:\/\/www.youtube.com\/c\/Getbowtied\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to change the color of the Add to Cart button - Get Bowtied","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:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/","og_locale":"en_US","og_type":"article","og_title":"How to change the color of the Add to Cart button - Get Bowtied","og_description":"The color of the Add to Cart button on the single product page is black by default. Since it follows the global color scheme set in the Theme Options panel, there isn&#8217;t any option to change this button specifically. However, to get there, you can use the following bit of Custom CSS. Paste it in\u2026","og_url":"https:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/","og_site_name":"Get Bowtied","article_publisher":"https:\/\/www.facebook.com\/GetBowtied\/","article_modified_time":"2020-01-21T09:30:44+00:00","twitter_card":"summary_large_image","twitter_site":"@getbowtied","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/","url":"https:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/","name":"How to change the color of the Add to Cart button - Get Bowtied","isPartOf":{"@id":"https:\/\/getbowtied.com\/#website"},"datePublished":"2020-01-14T13:31:56+00:00","dateModified":"2020-01-21T09:30:44+00:00","breadcrumb":{"@id":"https:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/getbowtied.com\/documentation\/the-retailer\/the-shop-the-retailer\/how-to-change-the-color-of-the-add-to-cart-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/getbowtied.com\/"},{"@type":"ListItem","position":2,"name":"Help Articles","item":"https:\/\/getbowtied.com\/documentation\/"},{"@type":"ListItem","position":3,"name":"How to change the color of the Add to Cart button"}]},{"@type":"WebSite","@id":"https:\/\/getbowtied.com\/#website","url":"https:\/\/getbowtied.com\/","name":"Get Bowtied","description":"Hassle-free themes, plugins &amp; support for WordPress and WooCommerce","publisher":{"@id":"https:\/\/getbowtied.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/getbowtied.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/getbowtied.com\/#organization","name":"Get Bowtied","url":"https:\/\/getbowtied.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/getbowtied.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.getbowtied.com\/wp-content\/uploads\/2020\/02\/getbowtied-logo-alt.png","contentUrl":"https:\/\/www.getbowtied.com\/wp-content\/uploads\/2020\/02\/getbowtied-logo-alt.png","width":512,"height":512,"caption":"Get Bowtied"},"image":{"@id":"https:\/\/getbowtied.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/GetBowtied\/","https:\/\/twitter.com\/getbowtied","https:\/\/www.instagram.com\/getbowtied\/","https:\/\/www.linkedin.com\/company\/get-bowtied","https:\/\/pinterest.com\/getbowtied\/","https:\/\/www.youtube.com\/c\/Getbowtied"]}]}},"_links":{"self":[{"href":"https:\/\/getbowtied.com\/wp-json\/wp\/v2\/helpkit\/360"}],"collection":[{"href":"https:\/\/getbowtied.com\/wp-json\/wp\/v2\/helpkit"}],"about":[{"href":"https:\/\/getbowtied.com\/wp-json\/wp\/v2\/types\/helpkit"}],"author":[{"embeddable":true,"href":"https:\/\/getbowtied.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/getbowtied.com\/wp-json\/wp\/v2\/comments?post=360"}],"version-history":[{"count":0,"href":"https:\/\/getbowtied.com\/wp-json\/wp\/v2\/helpkit\/360\/revisions"}],"wp:attachment":[{"href":"https:\/\/getbowtied.com\/wp-json\/wp\/v2\/media?parent=360"}],"wp:term":[{"taxonomy":"helpkit-category","embeddable":true,"href":"https:\/\/getbowtied.com\/wp-json\/wp\/v2\/helpkit-category?post=360"},{"taxonomy":"helpkit-tag","embeddable":true,"href":"https:\/\/getbowtied.com\/wp-json\/wp\/v2\/helpkit-tag?post=360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}