Как сделать весь попап кликабельным?

Задача: чтобы можно было кликнуть в любое место попап и перейти по ссылке на сайт.

Решается достаточно просто, нам нужно растянуть область клика ссылки или кнопки на весь попап.

Если мы используем кнопку-шорткод, например [mypopup_button tag="a" href="https://wpshop.ru/"]Перейти[/mypopup_button], тогда код будет выглядеть так:

/* Растягиваем область кнопки на весь попап, чтобы можно было кликнуть */
#{{id}} .mypopup-button:hover {-webkit-transform: none; transform: none; }
#{{id}} .mypopup-button:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; }
#{{id}} .mypopup-modal-close { z-index: 200; }

Если у нас другая кнопка или просто ссылка в тексте, мы можем задать ей любой класс и прописать такие же стили, только заменить .mypopup-button на ваше название класса.

Например, вы создаете попап, где в контенте указываете только одну ссылку, без кнопок:

<a href="https://wpshop.ru/" class="mypopup-custom-link">Текст попап окна, по которому можно кликнуть</a>

Для этой ссылки мы добавили класс mypopup-custom-link. Теперь стили для этой ссылки будут выглядеть так:

/* Растягиваем область кнопки на весь попап, чтобы можно было кликнуть */
#{{id}} .mypopup-custom-link:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; }
#{{id}} .mypopup-modal-close { z-index: 200; }

/* Убираем подчеркивание у ссылки */
#{{id}} .mypopup-custom-link { text-decoration: none; }

Дополнительно в последней строчке мы убрали подчеркивание у ссылки. Если это не требуется — строчку можно удалить.