Nevermind this reply. I finally did it.
I added the following code through snippets.
The only problem now is that the frame is still visible when passing the mouse on top of it (it is highlighted). I will keep working on it. If anyone knows a more “elegant” way to do this, I am all ears. I am quite new at this, so happy to learn from others.
I also used display:unset to hide the container. It worked very well, but the Vendor’s page gets messed up.
add_action( 'wp_head', function () { ?>
<style>
.hp-vendor--view-block .hp-vendor__footer {
display: none; /*removes line with info and clicking area to send message*/
}
.hp-vendor--view-block .hp-vendor__details--primary, .hp-vendor--view-page .hp-vendor__details--primary {
display: none;/*removes Member Since area*/
}
.hp-vendor--view-block .hp-vendor__header {
padding: 0;
} /*makes container just as tall as picture*/
.hp-vendor--view-block .hp-vendor__content{
display:none;
} /*hides name under picture & bottom part of the container*/
.hp-vendor--view-block, .hp-vendor--view-page .hp-vendor__summary {
box-shadow: 0 0px 0px rgb(0 0 0 / 0%);
background-color: #fff;
border-radius: 4px;
position: relative;*/
}/* turns shadow into white but visible (highlighted when mouse pases on top) */
</style>
<?php } );
