Multiple Add to Cart buttons in OpenCart product page

How to Add Multiple Add to Cart Buttons for Each Option to OpenCart Product Page

Recently I had a huge headache while working with one project – I needed to add several Add to Cart buttons to a single OpenCart product page. After hours of Google searches and reading of various resources I managed to get it done and this method works both simply to add buttons in the product page and in the tabs of the product page. I will add a tutorial on how to do this later on, but now let’s get started and let’s multiply these Add to Cart buttons, shall we?

This is fairly simple method, but it is also a tricky one. I did not manage to find a way how to pass several quantities of the options (though I’ve seen some paid modules, but I don’t think that they will do the job) so these multiple Add to Cart buttons will be of limited functionality – will only add 1 item per click, though you can add one Quantity text box on top or the bottom of the button div box but it looks quite confusing. Anyway, at the end of this tutorial, there will be a part dedicated for the quantity input. If anybody has some ideas how to make this work perfectly, please share your knowledge in the comments!

Files to edit:

catalog/view/theme/yourtheme/template/product.tpl

Steps to take:

Open file catalog/view/theme/yourtheme/template/product.tpl and scroll all the way to the bottom to find this script:

<script type="text/javascript">// <![CDATA[
$('select[name="profile_id"], input[name="quantity"]').change(function(){
    $.ajax({
		url: 'index.php?route=product/product/getRecurringDescription',
		type: 'post',
		data: $('input[name="product_id"], input[name="quantity"], select[name="profile_id"]'),
		dataType: 'json',
        beforeSend: function() {
            $('#profile-description').html('');
        },
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();

			if (json['success']) {
                $('#profile-description').html(json['success']);
			}	
		}
	});
});

$('#button-cart').bind('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();

			if (json['error']) {
				if (json['error']['option']) {
					for (i in json['error']['option']) {
						$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
					}
				}

                if (json['error']['profile']) {
                    $('select[name="profile_id"]').after('<span class="error">' + json['error']['profile'] + '</span>');
                }
			} 

			if (json['success']) {
				$('#notification').html('

<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>

');

				$('.success').fadeIn('slow');

				$('#cart-total').html(json['total']);

				$('html, body').animate({ scrollTop: 0 }, 'slow'); 
			}	
		}
	});
});
// ]]></script>

This script is meant to make one Add to Cart button work. By the way, don’t forget to check my tutorial on how to add a redirect to the Add to Cart button, which involves the same code here.

What you want to do here is make as many copies of this script as Add to Cart buttons you wish to have. If you want three buttons, you will have to have three similar scripts and so on and so forth.

But it is not completely copying and pasting, you need to change the name of the button div and name of the div that the cart information is coming from. By default button’s div is named #button-cart and information is gathered from .product-info class. So, you will need to change the names to, for example, #button-cart1, #button-cart2, etc. What I did to make sure that my method works is ditch the .product-info class and instead put a div called #button1, #button2, etc. So, finally, if I am going to have three Add to Cart buttons my code will look like this (this code should go afther the one that is written above):

<script type="text/javascript">// <![CDATA[
$('div#button1 select[name="profile_id"], div#button1 input[name="quantity"]').change(function(){
    $.ajax({
		url: 'index.php?route=product/product/getRecurringDescription',
		type: 'post',
		data: $('div#button1 input[name="product_id"], div#button1 input[name="quantity"], div#button1 select[name="profile_id"]'),
		dataType: 'json',
        beforeSend: function() {
            $('#profile-description').html('');
        },
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();

			if (json['success']) {
                $('#profile-description').html(json['success']);
			}	
		}
	});
});

$('#button-cart1').bind('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('div#button1 input[type=\'text\'], div#button1 input[type=\'hidden\'], div#button1 input[type=\'radio\']:checked, div#button1 input[type=\'checkbox\']:checked, div#button1 select, div#button1 textarea'),
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();

			if (json['error']) {
				if (json['error']['option']) {
					for (i in json['error']['option']) {
						$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
					}
				}
			} 

			if (json['success']) {
				$('#notification').html('

<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>

');

				$('.success').fadeIn('slow');

				$('#cart-total').html(json['total']);

				$('html, body').animate({ scrollTop: 0 }, 'slow'); 
			}	
		}
	});
});
// ]]></script>
<script type="text/javascript">// <![CDATA[
$('div#button2 select[name="profile_id"], div#button2 input[name="quantity"]').change(function(){
    $.ajax({
		url: 'index.php?route=product/product/getRecurringDescription',
		type: 'post',
		data: $('div#button2 input[name="product_id"], div#button2 input[name="quantity2"], div#button2 select[name="profile_id"]'),
		dataType: 'json',
        beforeSend: function() {
            $('#profile-description').html('');
        },
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();

			if (json['success']) {
                $('#profile-description').html(json['success']);
			}	
		}
	});
});

$('#button-cart2').bind('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('div#button2 input[type=\'text\'], div#button2 input[type=\'hidden\'], div#button2 input[type=\'radio\']:checked, div#button2 input[type=\'checkbox\']:checked, div#button2 select, div#button2 textarea'),
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();

			if (json['error']) {
				if (json['error']['option']) {
					for (i in json['error']['option']) {
						$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
					}
				}
			} 

			if (json['success']) {
				$('#notification').html('

<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>

');

				$('.success').fadeIn('slow');

				$('#cart-total').html(json['total']);

				$('html, body').animate({ scrollTop: 0 }, 'slow'); 
			}	
		}
	});
});
// ]]></script>
<script type="text/javascript">// <![CDATA[
$('div#button3 select[name="profile_id"], div#button3 input[name="quantity"]').change(function(){
    $.ajax({
		url: 'index.php?route=product/product/getRecurringDescription',
		type: 'post',
		data: $('div#button3 input[name="product_id"], div#button3 input[name="quantity2"], div#button3 select[name="profile_id"]'),
		dataType: 'json',
        beforeSend: function() {
            $('#profile-description').html('');
        },
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();

			if (json['success']) {
                $('#profile-description').html(json['success']);
			}	
		}
	});
});

$('#button-cart3').bind('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('div#button3 input[type=\'text\'], div#button3 input[type=\'hidden\'], div#button3 input[type=\'radio\']:checked, div#button3 input[type=\'checkbox\']:checked, div#button3 select, div#button3 textarea'),
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();

			if (json['error']) {
				if (json['error']['option']) {
					for (i in json['error']['option']) {
						$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
					}
				}
			} 

			if (json['success']) {
				$('#notification').html('

<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>

');

				$('.success').fadeIn('slow');

				$('#cart-total').html(json['total']);

				$('html, body').animate({ scrollTop: 0 }, 'slow'); 
			}	
		}
	});
});
// ]]></script>

So, if you want less or more Add to Cart buttons, changes to code have to be made respectively.

Now, I would recommend to use Radio button options for this method, because it will be the most convenient for customers.

In the same file find this line (around line 76):

<!--?php if ($option['type'] == 'radio') { ?-->

Before add (for three buttons, if more or less, edit respectively):

<div id="button1">
<div id="button2">
<div id="button3">

Below find:

<!--?php if ($option['type'] == 'checkbox') { ?-->

Before add (once again for three buttons):


</div>
</div>
</div>

This was made to make sure that information is going passed to cart module.

Now change this code for the radio button options:

<!--?php if ($option['type'] == 'radio') { ?-->
<div class="option" id="option-<?php echo $option['product_option_id']; ?>">
<!--?php if ($option['required']) { ?-->
<span class="required">*</span>
<!--?php } ?-->
<b><!--?php echo $option['name']; ?-->:</b>

<!--?php foreach ($option['option_value'] as $option_value) { ?-->
<input id="option-value-<?php echo $option_value['product_option_value_id']; ?>" type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><!--?php echo $option_value['name']; ?-->
<!--?php if ($option_value['price']) { ?-->
(<!--?php echo $option_value['price_prefix']; ?--><!--?php echo $option_value['price']; ?-->)
<!--?php } ?-->
</label>


<!--?php } ?--></div>
<!--?php } ?-->

To:

<!--?php if ($option['type'] == 'radio') { ?-->
<div class="option" id="option-<?php echo $option['product_option_id']; ?>">
<!--?php if ($option['required']) { ?-->
<span class="required">*</span>
<!--?php } ?-->
<b><!--?php echo $option['name']; ?-->:</b>

<!--?php  $i = 0; ?-->
<!--?php foreach ($option['option_value'] as $option_value) { ?-->
<!--?php $i++; ?-->
<input id="option-value-<?php echo $option_value['product_option_value_id']; ?>" type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><!--?php echo $option_value['name']; ?-->
<!--?php if ($option_value['price']) { ?-->
(<!--?php echo $option_value['price_prefix']; ?--><!--?php echo $option_value['price']; ?-->)
<!--?php } ?-->
</label>
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />

<input class="button" id="button-cart<?php echo $i; ?>" type="button" value="<?php echo $button_cart; ?>" />
<span>  <!--?php echo $text_or; ?-->  </span>
<span class="links">

</span>
<!--?php if ($minimum --> 1) { ?>
<div class="minimum"></div>
<!--?php } ?-->


<!--?php } ?-->

</div>
<!--?php } ?-->
<div class="cart">
<div><!--?php echo $text_qty; ?-->
<input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" />
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />

<input class="button" id="button-cart" type="button" value="<?php echo $button_cart; ?>" />
<span>  <!--?php echo $text_or; ?-->  </span>
<span class="links">

</span></div>
 
<div class="minimum"></div>
 

</div>

This code will add as much Add to Cart button as there are Radio Button options. And an additional Add to Cart button with Quantity text box if a customer wants to add more than one item and to make sure that Add to Cart button works with products without options. If you will not have any products without options use this code:

<!--?php if ($option['type'] == 'radio') { ?-->
<div class="option" id="option-<?php echo $option['product_option_id']; ?>">
<!--?php if ($option['required']) { ?-->
<span class="required">*</span>
<!--?php } ?-->
<b><!--?php echo $option['name']; ?-->:</b>

<!--?php  $i = 0; ?-->
<!--?php foreach ($option['option_value'] as $option_value) { ?-->
<!--?php $i++; ?-->
<input id="option-value-<?php echo $option_value['product_option_value_id']; ?>" type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><!--?php echo $option_value['name']; ?-->
<!--?php if ($option_value['price']) { ?-->
(<!--?php echo $option_value['price_prefix']; ?--><!--?php echo $option_value['price']; ?-->)
<!--?php } ?-->
</label>
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />

<input class="button" id="button-cart<?php echo $i; ?>" type="button" value="<?php echo $button_cart; ?>" />
<span>  <!--?php echo $text_or; ?-->  </span>
<span class="links">

</span>
<!--?php if ($minimum --> 1) { ?>
<div class="minimum"></div>
<!--?php } ?-->


<!--?php } ?-->

</div>
<!--?php } ?-->

Last step is to delete the original Add to Cart button. Find and delete these lines:

<div class="cart">
<div><!--?php echo $text_qty; ?-->
<input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" />
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />

<input class="button" id="button-cart" type="button" value="<?php echo $button_cart; ?>" />
<span>  <!--?php echo $text_or; ?-->  </span>
<span class="links">

</span></div>
 
<div class="minimum"></div>
 

</div>

Save and upload the file. If you’ve done everything right your product page should look like this:

Multiple Add to Cart buttons in OpenCart product page

You can also see a working DEMO HERE.

If your product page looks different it is either you’ve done something wrong, either your product does not have Radio Button options. Make sure they are enabled!

3 thoughts on “How to Add Multiple Add to Cart Buttons for Each Option to OpenCart Product Page”

  1. Any tips on having the “Add to cart” text be the product option text and hiding the radio button and label next to the radio button? So then you just have the add to cart button with custom text for each option?

Leave a Reply

Your email address will not be published. Required fields are marked *


one × 1 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>