Return to previous page

Allow the image as well be a link on thumbnails

This topic has 4 replies, 2 voices, and was last updated 7 years, 10 months ago ago by Rose Tyler

finleydesign

Participant

January 26, 2017 at 11:26

When we have the product selection set to “Mask with information” the image stops being clickable, how can I allow the whole box to be clickable

#153108 Copied

3 Answers
Rose Tyler

Support staff

January 26, 2017 at 13:23
Hello,

Unfortunately, there is no such option in the theme. You can add this code in Custom css:
```
.products-grid .product-image-wrapper.hover-effect-mask .hover-mask {
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
}
```
Regards,
Rose Tyler.
#153113 Copied
finleydesign

Participant

January 26, 2017 at 17:56

No in fact what you do is

.products-grid .product-title > a {
text-transform: uppercase;
color: #fff !Important;
height: 300px;
margin-bottom: -165px;
margin-top: -149px;
}

This way the height of the text block covers the whole block but remains centered, then the whole block is clickable 🙂

#153168 Copied
Rose Tyler

Support staff

January 27, 2017 at 08:26
Hello,

Also, you can edit the file wp-content/themes/woopress/woocommerce/content-product.php and add this code
http://prntscr.com/e0x0ce <a class="hover-mask-link" href="<?php the_permalink(); ?>"></a>
Make your changes in the child theme to prevent losing them after theme update.
In this case, add this code in custom css:
```
.hover-mask-link {
    width: 100%;
    height: 100%;
    display: block;
}
```
Regards,
Rose Tyler.
#153196 Copied
Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder

Restaurant – WordPress Theme

lazy-placeholder

Man Store – WooCommerce Theme

lazy-placeholder

Headphone Store – WordPress WooCommerce Theme

lazy-placeholder

Hemp & CDB – WordPress WooCommerce Theme

lazy-placeholder

Minimal Fashion 03 Store – WordPress WooCommerce Theme

lazy-placeholder

Meeting – WordPress Theme

lazy-placeholder

Marseille 02 – WordPress WooCommerce Theme

lazy-placeholder

Organic Cosmetics Store – WordPress WooCommerce Theme

lazy-placeholder

Transport – WooCommerce Theme

lazy-placeholder

Pizza Store – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.