Hide the Buy Now Checkout Button with Product Options

Overview

Shopify allows your store to offer a 'dynamic' checkout button, which displays to your customers as a "Buy Now" button on product pages, and takes them directly to the checkout when selected.

This button is currently incompatible with Product Options because it skips the proper "add to cart" functionality needed to add options to your products.

We recommend removing this button completely from your product pages, or to hide it specifically on your products with options assigned.

Removing the dynamic checkout button will help ensure that Product Options, and other 3rd-party apps on your store are functioning correctly on your store. 

Most 3rd-party applications that would depend on an add.js call will conflict with this button on product pages only.

To remove this button from your store, please follow these steps:

  1. From Shopify's admin, select Online Store, then Customize.
  2. Select Customize.
  3. Select the dropdown menu at the top and select Product Pages.

    Select Product Pages Option

  4. Uncheck Show dynamic checkout button.

    Uncheck Show dynamic checkout button Option

  5. Select Save.

It is possible to keep the "Buy Now" feature active on your store, but only hide it from your products that have options present.  

To hide the button from products with Options, follow these steps:

  1. From Shopify's admin, select Online Store, then select ActionsEdit code.
  2. Under "Layout", select theme.liquid.

    Theme.Liquid within the side bar

  3. Find the closing </head> tag.

    Theme.Liquid closing tag

  4. Paste the following code before the </head> tag:
    {%- if template.name == “product” -%}
    <script>
    if (window.BOLD && BOLD.common && BOLD.common.eventEmitter){
    BOLD.common.eventEmitter.on('BOLD_OPTIONS_option_products_loaded', function(event){
    var optionsDiv = document.querySelector('.bold_options_loaded');
    if(optionsDiv.children.length != 0){
    var buyItNow = document.querySelector('.shopify-payment-button');
    if(buyItNow){ buyItNow.removeChild();
    }
    }
    });
    }
    </script>
    {% endif %}

    With this code, your store will only display the "Buy Now" buttons on product pages that do not have options loaded.

  5. Select Save.
Was this article helpful?
0 out of 0 found this helpful