1) Быстрый просмотр можно реализовать с помощью плагина, например YITH WooCommerce Quick View, а потом стилизировать его кнопку(Быстрый просмотр), как надо:
2) Характеристики товара (атрибуты и т.д), можно вывести через functions.php
Например
function my_template_loop_product_title(){
global $product;
echo '<h3 itemprop="name" class="product_title entry-title">';
$versionvalues = get_the_terms( $product->id, 'pa_model');
foreach ( $versionvalues as $versionvalue ) {
echo $versionvalue->name;
}
echo '</h3>';
}
add_action( 'woocommerce_shop_loop_item_title', 'my_template_loop_product_title', 10 );
Здесь есть pa_model, где model - слаг вашего атрибута, который вы хотите вывести;
3) По поводу видимости элементов при наведении.
Можно попробовать реализовать таким образом:
а) В обычном состоянии элементам, которые надо скрыть пропишите display: none;
например, .product_wrapper .product {display: none}, где .product_wrapper - родительский элемент, а .product - дочерний (тот, который находится внутри блока).
б) В состоянии наведения (как у вас на скрине) надо отобразить нужные элементы, которые ранее были скрыты :hover {display: block;}
Например, .product_wrapper .product:hover {display: block;}
в) Можно еще и анимацию появления прописать (в инете много статей по этому поводу есть, смотрите css 3 анимация)
Уточню только что классы .product_wrapper и .product я написал для примера, у вас могут быть другие)
Средний
Простой