Alex

Без библиотек прийдется самому щитать.
Я брал за основу для проекта с канвасом вот эту либу https://projects.calebevans.me/jcanvas/
Небольшая, есть ховер ефекты, умеет работать со слоями.
В целом остался доволен выбором.

.div2 {
    width: 100%;
    padding-left: 250px;
    box-sizing: border-box;
}

К padding-left можно прибавить еще пару пикселей, если нужно сделать отступ между блоками.

Там нет никакого плагина. Изменение размера элемента при ховере там сделано на CSS. А при клике данные аяксом с сервака едут.

.content_menu:hover .content_menu__item {
  width: 20%;
  -webkit-transition: width 0.5s 0.1s;
          transition: width 0.5s 0.1s;
}
.content_menu:hover .content_menu__item:hover {
  width: 40%;
  -webkit-transition: width 0.3s;
          transition: width 0.3s;
}

Я перепробовал не одну и остановился на kenwheeler.github.io/slick
Там можно прописать отдельно конфиги для любого разрешения екрана.

Можно просто спрятать скролл-бар за дивкой.

.image-iphone {
   overflow: hidden;
}

.image-iphone iframe {
    margin-right: -20px
}

kenwheeler.github.io/slick Center Mode можно так сверстать. Делал что-то подобное на нем.

Я лично оцениваю время своей работы (почасовой тариф), а пишу я код, или читаю :) это не важно.
И вам так рекомендую сделать.

Не бесполезно, но знать нужно. Без него только Node.js, для большинства (если не для всех) других задач его нужно знать.

На WP это можно сделать через поиск по мета-полям. Ничего сложного нет. Вот довольно детальная статья https://wpmag.ru/2014/rabota-s-proizvolnyimi-polya... поможет сориентироваться что и как.

Переверстывать под бутстрап не обязательно.
Используйте media для разных разрешений екрана и вносите нужные правки. У вас в конце файла design/css/style.css есть такой код:

@media only screen and (max-width: 480px){
	footer p {
		font-size: 5px;
	}
	
}

Это как пример.

.products-third, .products-six {
    margin-right: 0;
}

За такую хрень нужно по руках клавой бить. И очень жестко. Учись пользоваться htmlbook.ru/css/nth-child
А то такие спецы втюхают свою верстку за копейки, а кто-то потом парится и думает как это использовать/натянуть на CMS.

.класс_блока img {
 width: 100%;
 height: 100%
}

Но изображение будет деформироваться.

Все гораздо проще. Продукт имеет свой отдельный шаблон, вы можете в нём перенести сайдбар, изменить HTML ... и изменения затронут только эту страницу.
Смотрите структуру шаблонов Woocommerce.
Шаблон продукта можно поискать в папочке ваша_тема/woocommerce/single-product.php, если папки woocommerce в темен нет, то создайте ее и просто скопируйте содержимое templates из плагина Woocommerce

Не знаю на счет ионика, но для ангулара вот есть хорошая карусель https://github.com/devmark/angular-slick-carousel