Как решить проблему с каруселью рекомендуемых товаров в карточке товара?

У тебя там жесткая каша. Две версии jquery (2.1.1 и 3.3.1). Зачем ты пишешь "jQuery" когда можно просто знак "$" писать. Слайдер у тебя видимо раньше был slick-slider, но ты его поменял на owlCarousel, при чем скопировав html уже инициализированного slick-slider с его классами, структурой и т.д. Скрипт инициализации слика изменен с .slick на .click.

$('.sale-slider').<b>click</b>({
        dots: false,
....

Здесь ты инициализируешь owlCarousel и передаешь ей вместо "опций" пустой объект, т.е. все настройки будут по дефолту.

jQuery(document).ready(function() { jQuery("#owl-demo-2").owlCarousel({ }); });

Потом ниже ты делаешь непонятную вещь:

jQuery('#owl-demo-2')({
                                items: 4,
                                autoPlay: false,
                                loop: true,
                                navigation: true,
                                navigationText: ['<div class="prewArrow slick-arrow slick-disabled" aria-disabled="true" style=""> </div>', '<div class="nextArrow slick-arrow" style=""></div>'],
                                pagination: true
                            });

Тут надо после "jQuery('#owl-demo-2')" все что находится в фигурных скобках перенести в фигурные скобки первого скрипта.

И еще у тебя эти скрипты закомментированы html'ьными комментами, а в теге