February 27, 2020

cm-mini

Thinking Magento

Magento - Remove the ugly radio buttons from checkout

The onepage checkout in Magento is already quite slow in lots of respects and the last thing you want to do is over complicate it further. What we've done here is replaced the ugly and irritating radio buttons that require you to make a selection and then press continue, with nice instant action buttons. In order to do this, you'll need to do the following;
In template\checkout\onepagelogin.phtml remove the radio buttons and replace with the following.
 
<ul class="form-list">
getQuote()->isAllowedGuestCheckout() ): ?>
<li>
<button type="radio" class="button" onclick="checkout.setMethod('guest');");"><span><span>__('Continue') ?></span></span></button>
</li><li>
<label for="login:guest">__('Checkout as Guest') ?>

<button type="radio" class="button" onclick="checkout.setMethod('register');"><span><span>Register</span></span></button>
<label for="login:register"><?php echo $this->__('Register') ?></label>
</li>
</ul>
In the opcheckout.js file in the skins folder, replace the setmthod function with this one.
 
setMethod: function(methodtype){
if (methodtype=='guest') {
this.method = 'guest';
var request = new Ajax.Request(
this.saveMethodUrl,
{method: 'post', onFailure: this.ajaxFailure.bind(this), parameters: {method:'guest'}}
);
Element.hide('register-customer-password');
this.gotoSection('billing');
}
else if(methodtype=='register') {
this.method = 'register';
var request = new Ajax.Request(
this.saveMethodUrl,
{method: 'post', onFailure: this.ajaxFailure.bind(this), parameters: {method:'register'}}
);
Element.show('register-customer-password');
this.gotoSection('billing');
}
else{
alert(Translator.translate('Please choose to register or to checkout as a guest'));
return false;
}
},
 
Now, once that's all in place you should be able to hit the continue button for each selection and it will bring up the related section. You may not think that it makes much of a difference, but what we've seen over time is that removing the number of clicks in the checkout process is always beneficial.