{"id":7782,"date":"2023-08-12T12:56:47","date_gmt":"2023-08-12T19:56:47","guid":{"rendered":"https:\/\/membermouse.com\/?post_type=ht_kb&amp;p=7782"},"modified":"2023-08-12T12:56:47","modified_gmt":"2023-08-12T19:56:47","slug":"personalizar-botoes-na-pagina-de-checkout","status":"publish","type":"ht_kb","link":"https:\/\/membermouse.com\/pt\/documentos-3-2\/personalizar-botoes-na-pagina-de-checkout\/","title":{"rendered":"Personalizar bot\u00f5es na p\u00e1gina de checkout"},"content":{"rendered":"<h5 class=\"wp-block-heading\">Estilos de bot\u00e3o padr\u00e3o<\/h5>\n\n\n\n<p>No modelo de p\u00e1gina de checkout padr\u00e3o do MemberMouse, inclu\u00edmos uma SmartTag\u2122 que renderiza automaticamente um bot\u00e3o para cada m\u00e9todo de pagamento ativo. Aqui est\u00e1 a SmartTag\u2122 respons\u00e1vel por isso:<\/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>[MM_Form_Button type='all']<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:10px\" 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\/10\/21f67f00-170294.png\"><img decoding=\"async\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/10\/21f67f00-170294.png\" alt=\"\" class=\"wp-image-10844\"\/><\/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 voc\u00ea pode fazer por meio dos atributos SmartTag\u2122. Por exemplo, voc\u00ea pode alterar a cor e o texto do bot\u00e3o da seguinte forma:<\/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>[MM_Form_Button type='all' label='Buy Now' color='green']<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:10px\" 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\/10\/8f90614d-170300.png\"><img decoding=\"async\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/10\/8f90614d-170300.png\" alt=\"\" class=\"wp-image-10850\"\/><\/a><\/figure>\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\">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 no local quanto para o gateway de pagamento externo. <br><br>Para fazer isso, voc\u00ea precisa remover o MM_Form_Button type='all' do seu c\u00f3digo e adicionar um bot\u00e3o espec\u00edfico para cada gateway de pagamento. <\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Use 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\/10\/0ae17ff5-9094.png\"><img decoding=\"async\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/10\/0ae17ff5-9094.png\" alt=\"\" class=\"wp-image-10848\"\/><\/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:20px\" 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\"><img decoding=\"async\" src=\"https:\/\/www.dropbox.com\/s\/x0bduhdutkbae6u\/9095.png?raw=1\" alt=\"\"\/><\/figure>\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:20px\" 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\"><img decoding=\"async\" src=\"https:\/\/www.dropbox.com\/s\/q62ek017rer46su\/9096.png?raw=1\" alt=\"\"\/><\/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:10px\" 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 do SmartTag\u2122:<\/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><code>[MM_Form_Button type='submit' paymentMethod='paypal']<\/code><\/code><\/pre>\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 especificado no atributo paymentMethod. Como ele gera apenas um link, &eacute; sua responsabilidade determinar como ele ser&aacute; exibido na tela usando a SmartTag&trade; 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:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Observa\u00e7\u00e3o:<\/strong>\u00a0Depois que voc\u00ea parar de usar a SmartTag [MM_Form_Button type='all'], que cria automaticamente um bot\u00e3o para cada m\u00e9todo de pagamento ativo, voc\u00ea ser\u00e1 respons\u00e1vel por criar cada bot\u00e3o que deseja incluir na p\u00e1gina de checkout usando a configura\u00e7\u00e3o da SmartTag [MM_Form_Button type='submit' paymentMethod=\"].<\/p>\n\n\n\n<p>Leia este artigo para\u00a0<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 MM_Form_Button<\/a>\u2122.<\/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>","protected":false},"excerpt":{"rendered":"<p>Estilos de bot\u00e3o padr\u00e3o No modelo de p\u00e1gina de checkout padr\u00e3o do MemberMouse, inclu\u00edmos uma SmartTag\u2122 que renderiza automaticamente um bot\u00e3o para cada m\u00e9todo de pagamento ativo. Aqui est\u00e1 a SmartTag\u2122 respons\u00e1vel por isso: Em...<\/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":[167],"ht-kb-tag":[],"class_list":["post-7782","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-smarttags-usage"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb\/7782","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=7782"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb\/7782\/revisions"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/media?parent=7782"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb-category?post=7782"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb-tag?post=7782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}