In this article:

- Explanation about hiding product variants

- Instructions for Stencil theme's checkout page

- Instruction for Blueprint theme's checkout page

- Instruction for Stencil or Blueprint Custom Checkout page.

Why do I have to hide product variants by Boost Sales & Checkout Boost apps?

If you create a discount offer in Boost Sales app or free gift offer in Checkout Boost app, new product variants (BKD variants as shown on your back-end) will be created for these products so that we can offer discounted or free products to your customers. These variants need to be hidden from your storefront so that your customers will not see them. This can be completed by adding custom Beeketing scripts to your theme as below:

Instruction for Stencil theme:

Login your BigCommerce admin dashboard (in the case you are using Stencil theme) and follow these steps:

• Go to Storefront Design >> My Themes >> Advanced >> Edit Theme Files:

• Open file content.html by following this path: templates >> components >> cart >> content.html

• Search for {{#if options}}, then add code {{#contains name "(BK "}}style="display: none;"{{/contains}} next to “definitionlist-key” and “definitionlist-value”

This is how the file looks after adding the code:

• Open file input-checkout.html by following this path: templates >> components >> products >> options >> input-checkbox.html

• Add this code into the first div: {{#contains display_name "(BK "}}style="display: none;"{{/contains}}

• Add scripts to checkout page:

Copy the scripts below:

   // Beeketing hide order bk attributes
       var isBKHide = false;
       setTimeout(function() {
           document.addEventListener('DOMNodeInserted', function () {
               if (document.getElementsByClassName('productList').length && !isBKHide) {
                 var hideOrderAttributes = function ($orderItemOptions) {
                   if ($orderItemOptions.length) {
                     isBKHide = true;
                     for (var i = 0; i <= $orderItemOptions.length; i++) {
                       if ($orderItemOptions[i] && $orderItemOptions[i].textContent.indexOf('(BK ') !== -1) {
                         $orderItemOptions[i].remove();
                       }
                     }
                   }
                 };
                 setTimeout(function() {
                   hideOrderAttributes(document.querySelectorAll('.productList .product-option'));
                 }, 500);
               }

               if (document.querySelectorAll('.cart-modal-body .productList').length) {
                 isBKHide = false;
               }
           }, false);
       }, 500);

• Open file checkout.html by following this path: templates >> pages >> checkout.html and add script below to position `4` under `window.language = {{{langJson 'optimized_checkout'}}};`

Instruction for Blueprint theme:

• Open Storefront >> My Themes >> Current Theme >> Edit HTML/CSS:

• Copy this code:

<script>
// Beeketing hide BK variants
jQuery(document).ready(function () {
     // Beeketing Remove hidden variant selector
    var isHiddenVariant = function (title) {
       return title.indexOf('(BK ') !== -1
    },
    hideBkAttributes = function () {
      var $container = jQuery('.productAttributeRow, div[data-product-option-change] .form-field');

      jQuery('label', $container).filter(function () {
        var text = jQuery(this).text();
        return isHiddenVariant(text);
      }).closest($container).remove();
    };

    hideBkAttributes();

    // Hide on quick view
    jQuery('.QuickViewBtn, .button.quickview').on('click', function () {
      setTimeout(function() {
        hideBkAttributes();
      }, 1000);
    });

    // Hide on cart page
    jQuery('.productAttributes', '.ProductName, .ProductDetails').each(function () {
      var hiddenAttr = 0, hasAttr = 0, changeBtn = null;
      jQuery('label', jQuery(this)).each(function () {
        if (isHiddenVariant(jQuery(this).text())) {
          jQuery(this).closest('tr').hide();

          changeBtn = jQuery(this).closest('.ProductName').find('.CustomizeItemLink');
          hiddenAttr++;
        } else {
          hasAttr++;
        }
      });

      if (hiddenAttr && !hasAttr && changeBtn) {
        changeBtn.remove();
      }
    });
});
</script>

• Open file Panels/Header.html and paste the copied code above at the end of the file, below all existing scripts:

Blueprint or Stencil Themes with Custom Checkout Page:

If your checkout page is custom, BKD variants might still display in the checkout page. Please contact us so we can customize our scripts according to your specific case, so BKD variants can be hidden completely from your checkout page.

Need our help to finish this work for you? No worries, Simply invite us ([email protected]) to your store admin so we can do it for you (We need permission to Storefront Design & Manage Settings), then send us a request to finish your installation.