Streamline Theme - Sold Out Image Transparency

Highlighted
Excursionist
59 0 7

Hi,

I'm using the Streamline theme. They recently updated to have sold out products appear transparent, which is great.
However, when "Hover To Preview Product Images" is active, the transparency is lost when hovering the product.
How can I keep sold out products transparent? Here is an example collection of sold out products from my store: https://www.killyourgod.net/collections/hats
I'd want to affect sold out products globally across the whole theme, so they'd be transparent on the home page/collections/product page.
It seems like the Hover feature is what's causing them to revert to full opacity. 

The CSS that styles sold out products is:

.grid-product__link--disabled .grid-product__image,.grid-product__link--disabled:focus .grid-product__image,.grid-product__link--disabled:hover .grid-product__image{
    opacity:0.3
}


This is the code for the hover feature from the theme.js file:

/*
    Hover to enable slideshow of product images.
    On mobile slideshow starts as item is in view.
    Destroy on mouseout/out of view.
   */
  
  theme.HoverProductGrid = (function() {
    var selectors = {
      product: '.grid-product',
      slider: '.product-slider',
    };
  
    function HoverProductGrid($container) {
      this.$container = $container;
      this.sectionId = this.$container.attr('data-section-id');
      this.namespace = '.product-image-slider-' + this.sectionId;
      this.activeIds = [];
  
      if (!theme.settings.hoverProductGrid) {
        return;
      }
  
      this.$products = $container.find(selectors.product);
      this.slidersMobile = $container.data('product-sliders-mobile');
  
      // No products means no sliders
      if (this.$products.length === 0) {
        return;
      }
  
      theme.utils.promiseStylesheet().then(function() {
        this.init();
      }.bind(this));
    }
  
    HoverProductGrid.prototype = $.extend({}, HoverProductGrid.prototype, {
      init: function() {
        this.destroyAllSliders();
        this.setupEventType();
        this.listnerSetup();
      },
  
      setupEventType: function() {
        this.$products.off('mouseenter mouseout');
        $(window).off('scroll' + this.namespace);
  
        if (theme.config.bpSmall) {
          if (this.slidersMobile) {
            $(window).on('scroll' + this.namespace, $.throttle(120, this.inViewSliderInit.bind(this)));
            $(window).trigger('scroll' + this.namespace);
          }
        } else {
          this.mouseSliderInit();
        }
      },
  
      listnerSetup: function() {
        $('body').on('matchSmall matchLarge', function() {
          this.destroyAllSliders();
          this.setupEventType();
        }.bind(this));
      },
  
      inViewSliderInit: function() {
        this.$products.find(selectors.slider).each(function(i, el) {
          if(theme.isElementVisible($(el), -400)) {
            this.initSlider($(el));
          } else {
            this.destroySlider($(el));
          }
        }.bind(this));
      },
  
      mouseSliderInit: function() {
        this.$products.on('mouseenter', function(evt) {
          var $slider = $(evt.currentTarget).find(selectors.slider);
          this.initSlider($slider);
        }.bind(this));
  
        this.$products.on('mouseleave', function(evt) {
          var $slider = $(evt.currentTarget).find(selectors.slider);
          this.destroySlider($slider);
        }.bind(this));
      },
  
      initSlider: function($slider) {
        if ($slider.data('image-count') < 2) {
          return;
        }
  
        if (this.activeIds.indexOf($slider.data('id')) !== -1) {
          return;
        }
  
        this.activeIds.push($slider.data('id'));
  
        $slider
          .addClass('product-slider--init')
          .slick({
            autoplay: true,
            infinite: true,
            arrows: false,
            speed: 300,
            fade: true,
            pauseOnHover: false,
            autoplaySpeed: 1050
          });
      },
  
      destroySlider: function($slider) {
        if ($slider.data('image-count') < 2) {
          return;
        }
  
        var alreadyActive = this.activeIds.indexOf($slider.data('id'));
        if (alreadyActive !== -1) {
          this.activeIds.splice(alreadyActive, 1);
          $slider.slick('unslick');
        }
      },
  
      destroyAllSliders: function() {
        this.$products.find(selectors.slider).each(function(i, el) {
          this.destroySlider($(el));
        }.bind(this));
      }
    });
  
    return HoverProductGrid;
  })();

 

 

0 Likes