Как сделать hover эффект для товара?

Там это сделано скриптом. Открываете инспектор и разглядываете что к чему:

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

Nina Kraviz, .catalog-item и .catalog-item.hover и его детям

Не надо так делать:
<a ...>в корзину</a>

Сделайте так:
<span data-text='в корзину'></span>

span[data-text]:before{
...
content: attr('data-text');
...
}

Ankhena, спасибо большое за ответ, но почему-то не получилось применить стили к данным элементам, прописал фон и рамку, ничего не поменялось, применял к .catalog-item

Exploding, большое спасибо, я пока что очень слабо разбираюсь, но так понял, что преимущество span том, что ему задается класс и потом можно css для него прописать?

Exploding, Nina Kraviz ну уж точно не span, а дальше по обстоятельствам
https://habrahabr.ru/post/317728/

Nina Kraviz, сделайте пример на jsfiddle.net

применял к .catalog-item

Я не обнаружила у вас тегов .catalog-item, так что было бы странно, если бы они применились.
Впрочем и не пыталась перелопатить все страницы вашего сайта.

Ankhena, я видимо Вас совсем неправильно понял, Вы просто посоветовали применять к .catalog-item, я так и стал делать, извините за глупые вопросы, просто у меня уровень познаний пока что очень низкий, я обычно либо плагином site origin css определяю название элемента, к которому нужно применить стили либо смотрю через "код страницы", я просто подумал, что вы как-то узнали название элемента, который отвечает за стили вмакета товара, поэтому и стал к нему пытаться применять))

Nina Kraviz, я сказала лишь к каким селекторам применены стили на сайте образце. Вам нужно применить эти же стили к вашим аналогичным селекторам.

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

Nina Kraviz, у вас там

li class="post-216 product type-product status-publish has-post-thumbnail product_cat-whitetea pa_--63 first instock shipping-taxable purchasable product-type-simple"

видимо, .product будет соответствовать .catalog-item

В вашем примере на js добавляется класс. Можно сделать без js, просто по обычному hover.
В примере блоки расставлены флоатами, сейчас актуальнее флексы.
По сути, вам надо сотворить примерно такое: https://jsfiddle.net/Ankhena/yj26prve/

Ankhena, спасибо большое, нужный элемент нашел: ul.products li.product
Хотел прописать появление рамки при наведении, почему-то не работает:
ul.products li.product:hover {
border-width: 1px;
border-color: #000000;
}

Как думаете, в чем может быть дело? другие стили, например, цвет фона, подключаются

Nina Kraviz, ох, вам бы справочник почитать
У border 3 составляющих: цвет, толщина и стиль. Допишете border-style - заработает. Либо сокращенной записью border: 1px solid red;

Ankhena, точно, совсем вылетело из головы, спасибо большое!

Nina Kraviz, Ankhena, Я имел ввиду немного другой нюанс, а именно большое кол-во повторений в контенте слова "В корзину"... А span там будет или что-то другое, это другой вопрос уже...