Артур

проименную картинки. Пример, как в комментах: size_color.png [small_purple.png с фото в вопросе например]
через jquery меняй attr у картинки.

// предположительно получены по кликам выбора
let color = "purple",
size = "small";

function newImggen(){
//var whatNow = $(".blockImg").attr('src'),
gen = "/img/"+size+"_"+color+".png";

$(".blockImg").attr('src', gen);

}

посмотри что в коде вызывается по кликам на выборные кнопки и в этой части вызови функцию newImggen();

bootstrap col-md-4 col-md-4 col-md-4 - три блока в ряд
на radio checkbox поставь смену центрального блока (ползунок блок или input)
на кнопку - ajax отправку данных + переброску на стр результата

по ползунку для jq есть готовые решения вида ion.rangeSlider.js