Bonjour,
La méthode utilisée dans votre exemple est particulière à ce site et ne s’applique certainement pas au vôtre. De toute façon, sans voir votre site on ne peut vous donner qu’un principe de base:
- Pour les produits, en CSS, positionner l’image de façon à ce qu’elle se superpose aux autres éléments (titre, prix, etc.) et lui donner un z-index supérieur à celui des autres éléments.
- Au survol réduire l’opacité de l’image qui laissera alors apparaître les textes.
Dans le cas d’une page d’archives purement woocommerce (non modifiée par le thème) cela pourrait donner:
.product .imgwrap{
position:relative;
top:100px;
z-index:2;
}
.product .imgwrap:hover{opacity:0.3;
}
Cela sera différent si le thème ou un constructeur de page modifie le design de cette page archive (comme c’est le cas dans votre exemple).