WooCommerce: FlexSlider добавляет активный класс к элементу <li>вместо элемента <img>

Question

Я хочу переместить класс .flex-active из тега <img> в родительский <li>.

. Для этого я нашел следующий код JS:

//-- Add flexslider active class to li of nav control instead of just on the image
    if($('.woocommerce-product-gallery ol.flex-control-nav').length > 0) {
      // initial check and addition
      $('.woocommerce-product-gallery ol.flex-control-nav li').each(function() {
        if($(this).children('img').hasClass('flex-active')) {
          $(this).addClass('flex-active');
        } else {
          $(this).removeClass('flex-active');
        }
      });
      // bind into flexslider callback and run dynamically
      $('.woocommerce-product-gallery').bind('after', function(event, slider) {
        $('.woocommerce-product-gallery ol.flex-control-nav li').each(function() {
          if($(this).children('img').hasClass('flex-active')) {
            $(this).addClass('flex-active');
          } else {
            $(this).removeClass('flex-active');
          }
        });
      });
    }

Хорошо работает при загрузке страницы, но если я просматриваю изображения, родительский класс не обновляется, и только первый <li> имеет класс .flex-active.

Есть ли что-то, что я пропускаю?