Return to previous page

Product zoom effect and modal box - by michaelh

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

michaelh

Participant

September 30, 2016 at 11:11

Hi,

I want customers to be able to purchase products as seen on the website link. I don’t want them to go to the actual product page. Is there anyway to disable the link when you hover over the title or product image?

I also want to have the zoom effect on the image instead of the product link, is this possible?

I’ve also added a modal box button next to the product (also see website link), but this doesn’t seem to work the way I set it up, it only seems to work on the actual product page, is there anyway of making this work in my scenario?

Hope I’m being clear, thanks!

Please, contact administrator
for this information.

#141184 Copied Theme version: 2.9.2 WooCommerce version: 2.6.4

17 Answers
Eva Kemp

Support staff

September 30, 2016 at 13:31
Hello,

To disable links try to use this code in child theme functions.php file:
```
remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
```
How to create child theme read here https://codex.wordpress.org/Child_Themes .
As for zoom option, there is no such feature in the theme. Sorry.

Concerning modal box please provide WP admin credentials in Private Content.

Regards,
Eva Kemp.
#141207 Copied
michaelh

Participant

September 30, 2016 at 14:24

I don’t know what code this is, but once I used it in the child theme functions.php the website gave an error and I couldn’t get to my dashboard. So I removed it via ftp and now my site is working again, luckily. Is this the right code?

Yes there is a zoom effect in the theme options (single product page). I just wanted to know if there was a way of using the same effect on the product images, the way I set it up.

Please, contact administrator
for this information.

#141219 Copied

Eva Kemp

Support staff

September 30, 2016 at 17:29

Hello,

Unfortunately zoom effect can’t be made for products on Shop page.
Please give full access to WP Dashboard as now I can’t see editor in Appearance section or provide FTP credentials.

Regards,
Eva Kemp.

#141235 Copied

michaelh

Participant

October 4, 2016 at 12:21

See Private Content

Please, contact administrator
for this information.

#141468 Copied

Eva Kemp

Support staff

October 4, 2016 at 12:42

Hello,

I don’t see those option in the left top corner:
http://storage8.static.itmages.com/i/16/1004/h_1475581379_6172133_8e51dd4dde.jpeg

Please provide FTP credentials.

Regards,
Eva Kemp.

#141473 Copied

michaelh

Participant

October 4, 2016 at 12:44

Forgot to tick a box, you should be able to see it now!

#141476 Copied

Eva Kemp

Support staff

October 4, 2016 at 13:05

Hello,

Thank you, it’s showing now, but we still need FTP access to remove products links on Shop page.

Regards,
Eva Kemp.

#141480 Copied

michaelh

Participant

October 24, 2016 at 10:43

Just to recap again:

I want customers to be able to purchase products as seen on the website link. I don’t want them to go to the actual product page. Is there anyway to disable the link when you hover over the title or product image?

I’ve also added a modal box button next to the product (also see website link), but this doesn’t seem to work the way I set it up, it only seems to work on the actual product page, is there anyway of making this work in my scenario? So customers aren’t able to click on the product link or image.

Please, contact administrator
for this information.

#143719 Copied
Jack Richardson

Support staff

October 24, 2016 at 13:36
Hello,

I’ve added this code in Global Custom CSS:
```
a.product-content-image, .products-grid .product-title > a, .products-list .product .product-details .product-title a,  {
    pointer-events: none;
}
```
and enabled the option “Include styles from “Ultimate Addons for Visual Composer” on every page” in Theme Options > General.

Check your site now.

Best regards,
Jack Richardson.
#143733 Copied
michaelh

Participant

October 25, 2016 at 10:59

Thanks, this worked perfectly! Exactly what I wanted.

Only one thing though. The product images are being resized now and appear way too large, especially on the mobile. How can this be fixed?

#143847 Copied

Rose Tyler

Support staff

October 25, 2016 at 12:12

Hello,

Fixed. Please check it now.

Regards,
Rose Tyler.

#143856 Copied

michaelh

Participant

October 25, 2016 at 17:22

Thanks, perfect! One last question, is there an option to make the image larger when you click on it? Is this possible within the current scenario or is there an other solution for this?

#143910 Copied

Rose Tyler

Support staff

October 26, 2016 at 10:36

Hello,

The credentials are incorrect. Please check them.
If you mean zoom effect, unfortunately, it can’t be made for products on Shop page.

Regards,
Rose Tyler.

#143982 Copied

michaelh

Participant

October 26, 2016 at 10:38

Hi,

I don’t know how the credentials could be incorrect, I haven’t changed anything? See below.
I want the product image to enlarge when you click on it.

Please, contact administrator
for this information.

#143984 Copied
Rose Tyler

Support staff

October 26, 2016 at 11:24
Hello,

Unfortunately there is no such option. You can use some 3rd-party plugins, but we don’t guarantee full compatibility with our theme.
This query requires additional customization which is beyond our basic support scope.
If you wish you can contact our customization service https://www.8theme.com/customization-services/
Also, you can to try enable quick view and replace this code
```
.footer-product {
    display: none !important;
}
```
with this one
```
.quick-view-popup .product-images, .quick-view-popup .product-images-slider{
 width: 100%;
}
.quick-view-popup .product-information{
 display: none !important;
}
.wishlist-disabled .show-quickly{
 color: #fff;
}
```
Regards,
Rose Tyler.
#143989 Copied
michaelh

Participant

October 26, 2016 at 11:46

Thanks for your answer. Where can I find this code to replace?

#143993 Copied
Rose Tyler

Support staff

October 26, 2016 at 11:58
Hello,

You can find it in your Custom CSS http://prntscr.com/cz4j25 and also add:
```
.content-product .footer-product {
    display: block !important;
}
.quick-view-popup .product-images img, .quick-view-popup .product-images-slider img{
    width: 100%;
}
```
Regards,
Rose Tyler.
#143997 Copied
Viewing 18 results - 1 through 18 (of 18 total)