Shopify buy button on WordPress – 1 click for multiple items

Need only one Shopify Buy button that helps buyers add multiple products to their cart on some blog platforms such as WordPress? Then, I’ll walk you through a quick and easy way to add that button to your site without an application. 

This is a real-life case study I figured out during my whole time working at a Shopify development company.

Client’s requirement

One of our clients is using WordPress and integrates the shopping cart with the Shopify Buy button (if you might not know how to install the Shopify Buy button, here is your reference).

The story is that they are selling some products together with 1 main product and 1 additional product. They wonder whether we can implement a function that allows them to add multiple products into the cart with the Shopify Buy button.

In this case, their logic should be like this:

They have:

(1) 1 main product

(2) 1 free product

And their request is: create a Buy button on their WordPress site so that whenever the buyer clicks to add the main product (1), the free product (2) will be immediately added to the cart. I put the display for this button example at the end of this post, so:

==> Scroll down to the end to see the magic!

How to make a buy button for several products?

So how to add this magical button?

I tried to search for solutions and contact some experts, but it took me a lot of time without luck. Because some solutions were too old and no longer worked, I was in the middle of nowhere.

Fortunately, one day, I came up with a solution as below:

(1) Firstly, implement both 2 buttons on the WordPress website.

(2) Secondly, hide the Add to cart button of the second product.

After adding the first product successfully, your second product is automatically added to cart!

The following is the detail code:

<script src="https://sdks.shopifycdn.com/buy-button/0.2.0/buybutton.js"></script>
<!-- HTML code -->
<div id="product"></div>
<div id="product2"></div>
<style>
    #product2 {display: none;}
</style>
<script>
    var client = ShopifyBuy.buildClient({
  apiKey: '21dea66d3fd7a0ca7bee597f20d9882a',
  domain: 'annahere.myshopify.com',
  appId: 6
});


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
  id: 1378134360182, // the id of the first product
  node: document.getElementById('product'),
  options: {
    product: {
      events: {
          addVariantToCart: function(product) {
            document.getElementById("hidden_prd").click();
            // this call auto add the second product to cart together with the first product
        }
      },
      contents: {
        variantTitle: true,
        quantity: true,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },
      styles: {
        quantity: {
          'margin-top': '0!important',
        },
        quantityInput: {
          'border-radius': 0
        },
        button: {
          'background-color': 'black',
          'border-radius': 0,
        }
      },
      text: {
        button: 'Add to bag'
      },
      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

ui.createComponent('product', {
  id: 1378134556790, // the id of the second product
  node: document.getElementById('product2'),
  options: {
    product: {
      contents: {
        variantTitle: true,
        quantity: true,
      },
      templates: {
        button: '<button id="hidden_prd" class="{{data.classes.product.button}} {{data.buttonClass}}">' +
          '{{data.buttonText}}</button>',
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },
      iframe: false,
      styles: {
        quantity: {
          'margin-top': '0!important',
        },
        quantityInput: {
          'border-radius': 0
        },
        button: {
          'background-color': 'black',
          'border-radius': 0,
        }
      },
      text: {
        button: 'Add to bag'
      },
      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

</script>

Demo of Shopify add to cart button on WordPress

I put the display as below for you:

That’s it! Thank God, it saved my day!

That’s it! You can apply this tip to your store on whatever platform: WordPress, Wix, Squarespace… As you might not know, they’re all the best eCommerce platforms for today.

I do hope my sharing on creating the Shopify buy button for multiple items today will help you optimize your store better. In case you still need help, don’t hesitate to contact me.

If you want to know more about useful customizations like this, feel free to grab the free eBook “Top 12 DIY Shopify customizations to drive sales”