{"id":16161,"date":"2023-08-26T07:00:57","date_gmt":"2023-08-26T14:00:57","guid":{"rendered":"https:\/\/membermouse.com\/?post_type=ht_kb&amp;p=8602"},"modified":"2023-08-26T07:00:57","modified_gmt":"2023-08-26T14:00:57","slug":"personalizar-botoes-na-pagina-de-checkout-2","status":"publish","type":"ht_kb","link":"https:\/\/membermouse.com\/pt\/documentos-3-2\/personalizar-botoes-na-pagina-de-checkout-2\/","title":{"rendered":"Personalizar bot\u00f5es na p\u00e1gina de checkout"},"content":{"rendered":"<p>No modelo de p\u00e1gina de checkout padr\u00e3o do MemberMouse, inclu\u00edmos uma SmartTag que renderiza automaticamente um bot\u00e3o para cada m\u00e9todo de pagamento ativo. Aqui est\u00e1 a SmartTag respons\u00e1vel por isso:  <\/p>\n\n\n\n<p><code>[MM_Form_Button type='all']<\/code><\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/2be20493-170294.png\"><img decoding=\"async\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/2be20493-170294.png\" alt=\"\" class=\"wp-image-9333\"\/><\/a><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Para fornecer essa funcionalidade, \u00e9 necess\u00e1rio controlar os estilos dos bot\u00f5es. H\u00e1 algumas pequenas personaliza\u00e7\u00f5es que podem ser feitas por meio de atributos SmartTag. Por exemplo, voc\u00ea pode alterar a cor e o texto do bot\u00e3o da seguinte forma:<\/p>\n\n\n\n<p><code>[MM_Form_Button type='all' label='Buy Now' color='green']<\/code><\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/88da932a-170300.png\"><img decoding=\"async\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/88da932a-170300.png\" alt=\"\" class=\"wp-image-9334\"\/><\/a><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Ter 2 bot\u00f5es separados em uma p\u00e1gina de checkout<\/h5>\n\n\n\n<p>Muitas vezes, voc\u00ea desejar\u00e1 ter um bot\u00e3o exclusivo em seu site tanto para o gateway de pagamento local quanto para o gateway de pagamento externo. Para fazer isso, voc\u00ea precisa remover o bot\u00e3o\u00a0<code>[MM_Form_Button type='all']<\/code>\u00a0de seu c\u00f3digo e adicione um bot\u00e3o espec\u00edfico para cada gateway de pagamento. <\/p>\n\n\n\n<p>Voc\u00ea pode usar esse c\u00f3digo para o Onsite Payment Gateway:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/01dc6fb1-9094.png\"><img decoding=\"async\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/01dc6fb1-9094.png\" alt=\"\" class=\"wp-image-9335\"\/><\/a><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=&quot;\/pt\/[MM_Form_Button type=&#039;submit&#039; paymentMethod=&#039;default&#039;]\/&quot;&nbsp;\n\nclass=&quot;mm-button blue large rounded&quot;&gt;Registre-se com o Stripe&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>E isso para o gateway de pagamento externo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/3c506ca9-9095.png\"><img decoding=\"async\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/3c506ca9-9095.png\" alt=\"\" class=\"wp-image-9336\"\/><\/a><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=&quot;\/pt\/[MM_Form_Button type=&#039;submit&#039; paymentMethod=&#039;paypal&#039;]\/&quot;\n\nclass=&quot;mm-button green large&quot;&gt;Cadastre-se com o PayPal&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Voc\u00ea tamb\u00e9m pode usar uma imagem para o bot\u00e3o, usando um c\u00f3digo como este:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/dc365452-9096.png\"><img decoding=\"async\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/dc365452-9096.png\" alt=\"\" class=\"wp-image-9337\"\/><\/a><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=&quot;\/pt\/[MM_Form_Button type=&#039;submit&#039; paymentMethod=&#039;paypal&#039;]\/&quot;&gt;\n\n&lt;img src=&quot;http:\/\/www.paypalobjects.com\/en_US\/i\/btn\/x-click-but5.gif&quot;&gt;&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Use esses snippets se quiser que os dois bot\u00f5es fiquem em locais diferentes na p\u00e1gina de checkout ou se quiser ter mais controle sobre a apar\u00eancia e a posi\u00e7\u00e3o dos bot\u00f5es.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Controle total sobre os estilos de bot\u00f5es<\/h5>\n\n\n\n<p>Se quiser ter controle total sobre os estilos e o layout dos bot\u00f5es, poder\u00e1 usar a seguinte configura\u00e7\u00e3o de SmartTag:<\/p>\n\n\n\n<p><code>[MM_Form_Button type='submit' paymentMethod='paypal']<\/code><\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Isso simplesmente produzir&aacute; um link que envia o formul&aacute;rio para o m&eacute;todo de pagamento que voc&ecirc; especificou no atributo paymentMethod. Como ele gera apenas um link, &eacute; sua responsabilidade determinar como ele ser&aacute; exibido na tela usando a SmartTag com um atributo&nbsp;&lt;a&gt;&nbsp;tag ou&nbsp;&lt;button&gt;&nbsp;tag. Por exemplo, voc&ecirc; poderia fazer o seguinte:<\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=&quot;\/pt\/[MM_Form_Button type=&#039;submit&#039; paymentMethod=&#039;paypal&#039;]\/&quot;&gt;Fazer checkout com o PayPal&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Observa\u00e7\u00e3o:<\/strong>\u00a0Quando voc\u00ea parar de usar o<code>\u00a0[MM_Form_Button type='all']\u00a0<\/code>SmartTag que cria automaticamente um bot\u00e3o para cada m\u00e9todo de pagamento ativo, voc\u00ea \u00e9 respons\u00e1vel por criar cada bot\u00e3o que deseja incluir na p\u00e1gina de checkout usando o\u00a0<code>[MM_Form_Button type='submit' paymentMethod='']<\/code>\u00a0Configura\u00e7\u00e3o do SmartTag.<\/p>\n\n\n\n<p>Leia este artigo para&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/membermouse.com\/pt\/documentos-3-2\/botao-de-formulario-smarttag-mm_form_button\/\" target=\"_blank\">Documenta\u00e7\u00e3o completa sobre o SmartTag Form_Button<\/a>.<\/p>\n\n\n\n<p>Este artigo detalha os atributos que voc\u00ea pode usar para&nbsp;<a href=\"https:\/\/membermouse.com\/pt\/documentos-3-2\/estilos-de-botoes-mm\/\" target=\"_blank\" rel=\"noreferrer noopener\">estilizar os bot\u00f5es<\/a>&nbsp;na p\u00e1gina Checkout.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code><\/code><\/pre>","protected":false},"excerpt":{"rendered":"<p>No modelo de p\u00e1gina de checkout padr\u00e3o do MemberMouse, inclu\u00edmos uma SmartTag que renderiza automaticamente um bot\u00e3o para cada m\u00e9todo de pagamento ativo. Aqui est\u00e1 a SmartTag respons\u00e1vel por isso: [MM_Form_Button type='all'] Para...<\/p>","protected":false},"author":9645,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_strive_editorial_status":"not-started","_strive_copy_of":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"ht-kb-category":[226],"ht-kb-tag":[],"class_list":["post-16161","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-customize-checkout"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb\/16161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/users\/9645"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/comments?post=16161"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb\/16161\/revisions"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/media?parent=16161"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb-category?post=16161"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb-tag?post=16161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}