Павел

В чем может быть проблема?

В том, что вы не отправляете ничего на сервер. Или мне показалось?

Вот секция

Вывод товара

она где у вас? в шаблоне страницы? Тогда чему вы удивляетесь? у вас там прямой вызов функции ajax_form();

ААА, я понял.. это вы пытаетесь в такой извращенной форме ответ из ajax запроса закинуть в уже отработанный php скрипт и отрендеренный HTML документ на клиенте, и сразу реактивно на пхп отрендерить новые товары? У меня для вас плохие новости. если коротко - это так не работает.

Вывод JS кода через PHP никак не защитит ваш код от воровства. Т.к. JS код все-равно попадает клиенту в браузер в явном виде. Если вы переживаете, что код своруют, смотрите в сторону Uglify

Потому что на элементы созданные уже после загрузки страницы не вешаются ваши ивенты, которые вы цепляете по document ready. После создания элемента на него нужно вешать ивент (change, click и пр.).

Смотрите Window.matchMedia()

Не ясно о чем вы. Ширина вьпорта на яблоках ничем не отличается от других мониторов/планшетов/телефонов.
Если же вас интересуют медиа запросы для ретины на аймаках и макбуках , то используйте что-то вроде такого

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    /* CSS правила для retina */
}

https://css-tricks.com/snippets/css/retina-display...

Вы если меню выводите через wp_nav_menu то там и так все нужные классы добавляются

prevenDefault не хватает

Проблема в том, что сайт у вас не адаптивный. Fancybox работает как надо.

Такой вариант вам подойдет? могу скинуть готовый код.

UPD. Вам нужно переопределить шаблон quantity-input.php (скопируйте себе в тему)... и вот такой код в него вставить

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}
$post_type = get_post_type( $post_id );
if ($post_type=='product') {
global $product;
?>
<div class="quantity">
    Количество: <button type="button" id="remove_one">-</button><input type="text" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" /><button type="button" id="add_one">+</button>
    <div class="order-summ">Сумма: <span id="orderSumm"><?php echo $product->get_price();?></span> грн.</div>
</div>
<script>
    var price = jQuery('#orderSumm').html();
    var quantity;
    var summ;
    jQuery('#remove_one').on('click',function(){
        quantity = jQuery('input.qty').val();
        if (quantity <= 1) {
            summ = price*quantity;
            jQuery('input.qty').val(quantity);
            jQuery('#orderSumm').html(summ);
        } else {
            quantity--;
            summ = price*quantity;
            jQuery('input.qty').val(quantity);
            jQuery('#orderSumm').html(summ);
        }
    });
    jQuery('#add_one').on('click',function(){
        quantity = jQuery('input.qty').val();
        quantity++;
        summ = price*quantity;
        jQuery('input.qty').val(quantity);
        jQuery('#orderSumm').html(summ);
    });
    jQuery('input.qty').keyup(function(){
        var removedText = $(this).val().replace(/\D/, '');
        jQuery(this).val(removedText);
        quantity = jQuery(this).val();
        summ = price*quantity;
        jQuery('input.qty').val(quantity);
        jQuery('#orderSumm').html(summ);
    });

</script>
<?php } else {?>
    <div class="quantity">
        <input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
    </div>
<?php }?>

А в чем проблема?
Делаете блок шириной на весь экран, закрашиваете нужным цветом. Внутри контейнер нужной ширины и с margin:auto; внутри иконки

прокрутку в блоке списка умений.

Даете ему высоту в экран и overflow-x:scroll;