Add to Cart URLs

Query string parameters can be appended to Bigcommerce product and /cart.php urls in order to pre-select an SKU or add a product to cart. These parameters make it possible to build custom add to cart links and forms for use on BigCommerce storefronts and remote sites (such as WordPress, blog posts, and social media).

URLs constructed with these parameters allow you to:

• Pre-select a specific SKU on a product detail page
• Add a specific product or SKU to the cart
• Add a specific SKU to the cart and go directly to checkout.
• Attach a source for marketing and analytics purposes

Parameters

Common usage

Below is a table of common scenarios and example URLs.

Once constructed, a URL can be inserted directly as text or as an HTML link:

<a href="https://example.com/cart.php?action=buy&product_id=123&source=blogpost">Purchase Our New Product Now!</a>

Adding multiple products

The sku and product_id parameters accept a single value; you can only use the first value of a comma-separated list of values. In other words, only one product can be added for each request made to an add to cart URL. However, it’s possible to combine several HTTP requests into a single button click using front-end JavaScript, as long as your code waits to receive the response of your first request before it makes a second.

The following gives a very basic example using jQuery. You can also use async/await syntax to make a series of calls from within a for loop.

<button type="button" id="addToCart">Add Bundle to Cart</button>

<script>
// when #addToCart is clicked...
$("button#addToCart").click(function() {

	// add product id 123
    return $.get("/cart.php?action=add&product_id=123")
	.done(function(data, status, xhr) {
		console.log('first item complete with status ' + status);
	})
	.then(function() {
		// add product id 456
		return $.get("/cart.php?action=add&product_id=456");
	})
	.done(function(data, status, xhr) {
		console.log('second item complete with status ' + status);
	})
	// chain more async GET requests using .then & .done
	.fail(function(xhr, status, error) {
		console.log('oh noes, error with status ' + status + ' and error: ');
		console.error(error);
		return xhr.done();
	})
	.always(function() {
		// go to cart
		return window.location = "/cart.php";
	});

});
</script>