Woocommerce how to customize product category design?

Question

WordPress

It is necessary to redo the design of the category on the wordpress + woocomerce website, namely:
when hovering, the product characteristics (length, width, height) or a short description + the "add to cart" button and a quick view, as it is done on sofa.ru, should appear

a href="https://www.divan.ru/category/modulnye-gostinye"

http://prntscr.com/mtkmyc
(example with the hovered cursor )
can someone tell me how to implement this or can anyone find a plugin that will do this?

Answer 1

1) Quick view can be implemented using a plugin, for example YITH WooCommerce Quick View, and then style its button (Quick view) as needed:
2) Product characteristics (attributes, etc.) can be displayed through functions.php
For example

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 );

There's pa_model here, where model is the attribute slug you want to display;
3) Regarding the visibility of elements on hover.
You can try to implement it this way:
a) In the normal state, set the elements to be hidden to display: none;
e.g. .product_wrapper .product {display: none} where .product_wrapper is the parent element and .product is the child element (the one inside the block).
b) In the hover state (as you have on the screen), you need to display the necessary elements that were previously hidden :hover {display: block;}
For example, .product_wrapper .product:hover {display: block;}
c) You can also animate the appearance register (there are many articles on this subject on the Internet, see css 3 animation)
I’ll just clarify the .product_wrapper and .product classes I wrote as an example, you may have others)