вот тут написано. По сути, товар в woo это обычная запись со своими полями. Почитайте как вывести циклом, сделайте и в print_r посмотрите какие данные доступны в массиве.
Это значит что вам нужно верстку HTML + css + Js кароч все что есть прикрутить к шаблону wordpress
Вам нужно знать структуру шаблона, что и как формируется. Где голова, где подвал и т.д. + файл functions.php где собственно и подключаются скрипты, стили, шрифты
ну на каждую точку создавай блок-обёртку, чтобы зацепиться. В этот блок можно вставить всплывашку и по ховеру показывать. Соответственно все будет в position: absolute
в активном шаблоне создаете папку woocommerce туда закидываете нужные файлы или папки с файлами и в них кастомизируете что вам нужно. Они сами подключаться при загрузке каталога
а зачем вам в catalog.element получать каждый товар? Или вы имеете ввиду что вам нужно меню из разделов каталога? Тогда как вариант использовать catalog.section.list
