Sn0wSky

if(is_product_category(){
   // category
} 

if(is_product()){
   // product
}

https://docs.woocommerce.com/document/conditional-tags/

Там стандартная бутстраповская ширина контейнера - 1170px (в том числе 30 на padding-left/padding-right)
И самая обычная 12-колонная разметка

contactform7.com/selectable-recipient-with-pipes

А если кратко, создаете select

[select your-recipient "CEO|ceo@example.com"
                    "Sales|sales@example.com"
                    "Support|support@example.com"]

И дальше [your-recipient] в получателя

:before и :after тут не при чём. Просто на :hover зачем-то их добавляют, но сути не меняет

Просто есть overlay с position: absolute, которой появляется на hover, без всякого js

https://jsfiddle.net/e0drh965/

$(".menu-item-search").click(function(e){
    e.preventDefault();
});

Дак открыли бы devTools и посмотрели

Составить диапазоны и условия
для красного что-нибудь из разряда

if ($r > 200 && $g<100 && $b<100 && abs($g-$b)<30){
    echo 'red';
}

Ну и подвигать в зависимости от того, что для Вас красный

Можете добавить кастомные поля на отдельную страничку с настройками темы, гайд здесь

И потом использовать где угодно
echo get_option("my_custom_field");

Что надо-то, желтую часть тоже красным залить?

Ну для начала, почему ивентлисенер скролла висит на самом .bullets-container?

Нажмите правой кнопкой по панели, зайдите в настройки, промотайте в самый низ, там будут настройки для нескольких мониторов. Не помню, как по-русски, но в первом select'e будет возможность показывать открытые окна только для текущего монитора

codepen.io/anon/pen/amywAk