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


If you create 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:


How to hide product variants by Boost Sales & Checkout Boost from storefront?


Find below separate instructions for Stencil and Blueprint themes. Or simply CONTACT US for support.


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 Google Analytics settings:


Copy the scripts below:


<script>
       // 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);
   </script>



From your BigCommerce admin: Advanced Settings >> Web Analytics >> Google Analytics, then paste Beeketing scripts in the Settings box:






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 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 (hi@beeketing.com) 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.