[Support request] Modify – Product Catalog of Prime – Site Library template

[Sergio]

Hi,
I’m going to use “Prime” template from your site-library, but before of all i would like to know if it’s possible only to apply the shadow in the pic of the product when i put “hover” the cursor over each product.
I mean i would like the text of each product be separated of the div that contains the picture and the text with the same “shadow-hover” effect, and only keep that effect in the picture of each product.
Thanks for everything.

Sigreo

[David]

Hi there,

yes, Prime uses some CSS to create that effect. After installing the site go to Customizer > Additional CSS and replace this CSS:

/* Product archives and product blocks styles */
.woocommerce ul.products li.product,
.wp-block-columns.contact .wp-block-column {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
		border: 1px solid #ddd;
    transition: all 0.1s ease-in;
    border-radius: 3px;
		box-sizing: border-box;
}

.woocommerce ul.products li.product:hover, 
.wp-block-columns.contact .wp-block-column:hover {
    box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.1);
}

with this:

/* Product archives and product blocks styles */
.woocommerce ul.products li.product img,
.wp-block-columns.contact .wp-block-column img {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
		border: 1px solid #ddd;
    transition: all 0.1s ease-in;
    border-radius: 3px;
		box-sizing: border-box;
}

.woocommerce ul.products li.product:hover img, 
.wp-block-columns.contact .wp-block-column:hover img {
    box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.1);
}

[Author]

Posts