Araya

Woocommerce > Настройки > Вкладка "Товары"> На странице магазина показывать выбираем категории и подкатегории, чтобы не было видно количество товаров в категории ставим плагин Jetpack и вот здесь Woocommerce > Настройки >Jetpack > Product > Listings Products ставим галочку "Enable the Product Listings feature" здесь и здесь "Hide categories count on shop page" . Можно в категории поставить "показывать подкатегории" или "показывать товары".
Можно на отдельные категории вывести товары, а на отдельные подкатегории - это делается в настройках самой категории, вкладка Товары > Категории > Ваша категория > Тип отображения.

можно сразу доставать с базы нужное, а можно применить функцию к вашему массиву
php.net/manual/ru/function.array-column.php

Можно так (вроде бы, в этот раз ничего не упустил):

const sections = [
  {
    section: sectionOne,
    button: sectionOneButton
  },
  {
    section: sectionTwo,
    button: sectionTwoButton
  },
  // остальные секции
];

window.addEventListener('scroll', () => {
  const offsets = sections.map(section => {
    const rect = section.section.getBoundingClientRect();
    return {
      top: rect.top - menuFixedHeight,
      bottom: rect.bottom - menuFixedHeight,
    };
  })

  offsets.forEach((offset, key) => {
    if (offset.top <= 0 && (key === 0 || offsets[key - 1].bottom <= 0)) {
      sections[key].button.classList.add('active');
      if (key !== 0) {
        sections[key - 1].button.classList.remove('active');
      }
    }
  })
}

примерно так:

Сделай setInterval с таймингом 150, внутри него добавляй класс только тем элементам у которых его нет, после того как закончатся сделай clearInterval. Типа того

if (el<= 400){
  setTimeout(function(){
      var ti  = setInterval(function(){
              $( 'div:not(.test)' ).addClass('test');
              if ( !$( 'div:not(.test)' ).length ) {
                 clearInterval(ti);
              }
      }, 150);
  }, 1000);

Идея думаю понятна