Сергей Соболь

"writing-mode: tb-lr" для текста, который вертикальный. Ты перевернул с помощью transform: rotate - верно?
writing-mode: tb-lr;

https://developer.mozilla.org/ru/docs/Web/CSS/box-...

Для получения категорий товаров вы можете использовать функцию get_terms(). Для вывода списка категорий можете воспользоваться примером или кастомизировать его:

$terms = get_terms( 'product_cat' );

if( $terms && !is_wp_error($terms) ){
	echo '<ul>';
	foreach( $terms as $term ){
		echo '<li><a href="' . get_term_link( $term ) . '">' . $term->name . '</a></li>';
	}
	echo '</ul>';
}

А на каме есть отличная статья с кучей примеров

$(window).scroll(function(){
    if ($(window).scrollTop() > 100){
       $('.header').addClass('scroll');
    } else {
       $('.header').removeClass('scroll');
    }
 });

Соответственно у класса scroll даёте box-shadow
А так чтобы пропадал стоя на месте это думаю добавлять класс только на событие скролла

Там где ajax выполняется просто пихай fadeout метод первой модалке и fadeIn второй, если jquery юзаешь, если нативно достаточно класса с display block и все, если для отправки axios юзаешь засунь в .then идею которую я выше тебе описал

Да, конечно.
Но, если вы хотите использовать БЭМ по правилам, а не просто писать классы через чёрточку: когда захотите сделать margin-отступ между .row и .notations, это следует описывать не в классе блока, т. к. «у блока не должно быть внешней геометрии». Можно задать элементы у .container и уже между ними описать margin-отступ:

<div class="container">
  <div class="container__main">
    <div class="row">…</div>
  </div>
  <div class="container__aside">
    <div class="notations">…</div>
  </div>
</div>

Нужно! Это стандартная сетка bootstrap:
Сначала идет контейнер (.container), внутри него находятся строки (.row), а внутри строк находятся колонки (.col).
Если внутри колонки требуется создать свою сетку, то добавляете row и внутри него создаете колонки.

<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div class="col">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
      </div>
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
      </div>
    </div>
  </div>
</div>

Да, просто в href указываете туда, куда хотите отправить. Отправляйте хоть на другой сайт

У вас какая-то «солянка» из БЭМа и Бутстрапа, в итоге получилась буквально «каша», поэтому и зашли в тупик.

Это не мини-блоки, это элементы. На минуту забудьте про Бутстрап и прочие обёртки: у вас есть товар; у товара есть страница, где перечислены характеристики (свойства) товара: фотографии, цена, скидка, размеры, возможно — описание и т. д. Так вот — любая самостоятельная сущность (товар, статья, пост блога) — всегда блок. Все свойства, характеристики, признаки этой сущности — всегда элементы этого блока. Ankhena утверждает, что «если цена может переиспользоваться отдельно от блока namely, то это блок» — теоретически да, но на практике цена никогда не будет использоваться отдельно от товара, т. к. всегда «принадлежит» какому-то товару.

Ещё минута «без Бутстрапа» — сначала запишите все свойства товара, как они идут в дизайне (одна строка — одно свойство):

- товар
  - фотография
  - цена
  - старая цена
  - размеры

— вот вам и блок с элементами. Нехватает только вспомогательных блоков, чтобы сгруппировать некоторые элементы (например, объеденить в одной строке «цену» и «старую цену») — добавьте ещё один элемент-обёртку (.namely_prices), который их «объединит»:

<article class="namely">
  <img class="namely__photo" src="...">
  <dl class="namely__prices">
    <div class="namely__price">
      <dt class="visually-hidden">Новая цена</dt>
      <dt class="namely__price-currency">$</dt>
      <dd class="namely__price-value">311</dd>
    </div>
    <div class="namely__price namely__price_old"> <!-- Модификатор «опишет» цвет и «зачёркнутость» -->
      <dt class="visually-hidden">Старая цена</dt>
      <dt class="namely__price-currency">$</dt>
      <dd class="namely__price-value">450</dd>
    </div>
  </dl>
  <div class="namely__sizes">
    <h4 class="namely__sizes-heading">Выберите размер</h4>
    <div class="namely__sizes-list">
      <label class="namely__size">
        S
        <input class="namely__size-control input input_type_radio" type="radio" name="size" value="s">
      </label>
      <label class="namely__size">
        M
        <input class="namely__size-control input input_type_radio" type="radio" name="size" value="m">
      </label>
      <!-- … и т. д. -->
    </div>
  </div>
</article>

Мой код — лишь быстрый пример БЭМификации. В реальном проекте если смотреть на дизайн, можно найти кучу повторяющихся закономерностей и выделить их в блок, элемент или модификатор.

html{
   scroll-behavior: smooth;
}

и будет плавно