{"id":16161,"date":"2023-08-26T07:00:57","date_gmt":"2023-08-26T14:00:57","guid":{"rendered":"https:\/\/membermouse.com\/?post_type=ht_kb&p=8602"},"modified":"2023-08-26T07:00:57","modified_gmt":"2023-08-26T14:00:57","slug":"personalizar-los-botones-de-la-pagina-de-pago","status":"publish","type":"ht_kb","link":"https:\/\/membermouse.com\/es\/docs\/customize-buttons-on-checkout-page\/","title":{"rendered":"Personalizar los botones de la p\u00e1gina de pago"},"content":{"rendered":"\n

In MemberMouse's default checkout page template we include a SmartTag that automatically renders a button for each active payment method. Here's the SmartTag responsible for this: <\/p>\n\n\n\n

[MM_Form_Button type='all']<\/code><\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
<\/div>\n\n\n\n

In order to provide this functionality it's necessary for us to control the styles of the buttons. There is some minor customization you can do via SmartTag attributes. For example, you can change the color and the button text as follows:<\/p>\n\n\n\n

[MM_Form_Button type='all' label='Buy Now' color='green']<\/code><\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
<\/div>\n\n\n\n
Having 2 Separate Buttons On A Checkout Page<\/h5>\n\n\n\n

Many times, you will want to have a unique button on your site for both your Onsite Payment Gateway as well as your Offsite Payment Gateway. To do that, you need to remove the\u00a0[MM_Form_Button type='all']<\/code>\u00a0from your code, and add a specific button for each payment gateway. <\/p>\n\n\n\n

You can use this code for the Onsite Payment Gateway:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n
<\/div>\n\n\n\n
<a href=\"[MM_Form_Button type='submit' paymentMethod='default']\"\u00a0\n\nclass=\"mm-button blue large rounded\">Sign Up With Stripe<\/a><\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
And this for the Offsite Payment Gateway:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
<\/div>\n\n\n\n
<a href=\"[MM_Form_Button type='submit' paymentMethod='paypal']\"\n\nclass=\"mm-button green large\">Sign Up With PayPal<\/a><\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
You can also use an image for the button as well, using code like this:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
<\/div>\n\n\n\n
<a href=\"[MM_Form_Button type='submit' paymentMethod='paypal']\">\n\n<img src=\"http:\/\/www.paypalobjects.com\/en_US\/i\/btn\/x-click-but5.gif\"><\/a><\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Use these snippets if you are looking to have your two buttons located at different locations on the checkout page, or if you just are looking for more control over the look and position of the buttons.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Complete Control Over Button Styles<\/h5>\n\n\n\n
If you want to have complete control over the button styles and layout you can use the following SmartTag configuration instead:<\/p>\n\n\n\n
[MM_Form_Button type='submit' paymentMethod='paypal']<\/code><\/p>\n\n\n\n
<\/div>\n\n\n\n
This will simply output a link that submits the form to the payment method you specified in the paymentMethod attribute. Since it only outputs a link it is your responsibility to determine how it will be displayed on the screen by using the SmartTag with an <a> tag or <button> tag. For example, you could do the following:<\/p>\n\n\n\n
<\/div>\n\n\n\n
<a href=\"[MM_Form_Button type='submit' paymentMethod='paypal']\">Checkout with PayPal<\/a><\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Note:<\/strong>\u00a0Once you stop using the\u00a0[MM_Form_Button type='all']\u00a0<\/code>SmartTag which automatically creates a button for each active payment method, you're responsible for creating each button you want included on the checkout page by using the\u00a0[MM_Form_Button type='submit' paymentMethod='']<\/code>\u00a0SmartTag configuration.<\/p>\n\n\n\n
Read this article for complete documentation on the Form_Button SmartTag<\/a>.<\/p>\n\n\n\n
This article details the attributes you can use to style the buttons<\/a> on the Checkout page.<\/p>\n\n\n\n
<\/div>\n\n\n\n
<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
In MemberMouse’s default checkout page template we include a SmartTag that automatically renders a button for each active payment method. Here’s the SmartTag responsible for this: [MM_Form_Button type=’all’] In order…<\/p>\n","protected":false},"author":20918,"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\/es\/wp-json\/wp\/v2\/ht-kb\/16161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/users\/20918"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/comments?post=16161"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb\/16161\/revisions"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/media?parent=16161"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb-category?post=16161"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb-tag?post=16161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}