Docs

[tahaabbasi]

Hello,

On my single product page, I want to replace the main image when a thumbnail image is clicked.

See here:
https://modestyle.com/product/alexa-ruffled-blouse/

I am a bit familiar with CSS, jQuery, HTML and php, but am having a hard time pinpointing exactly what needs to be updated for this. Could you help me out by giving some guidance? or pointing me in the right direction on how to accomplish this?

[tahaabbasi]

On a related issue, please also advise on this problem if you can:

Hello,

I am having a problem trying to change the crop ratio of product thumbnail images. I have used this code:

add_action( 'init', 'x_image_set_settings', 99 );
function x_image_set_settings () {
remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings', 10 );
}

To enable the image crop settings in WooCommerce, over there I have changed the image ratio for Product Thumbnails to 0.78 as my images are not square.

http://imgur.com/Na2cimP

After this I regenerated the images for one product to test:

http://imgur.com/6fDbjxQ

but As you can see here on my product page, the thumbnail images are still square and are still cropped. Any suggestions on how to fix this? I need my thumbnails to be 0.78 ratio not 1:1

[Nabeel A]

Hi there,

Replace your code with this one:

function remove_product_settings_filter() {
   remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings' );
}

add_filter('init', 'remove_product_settings_filter');

Let us know how this goes!

[tahaabbasi]

Hi Nabeel,

I don’t think that did anything. Just to clarify, there are two problems:

First:

On my single product page, If a user clicks on a thumbnail image it opens a lightbox. Instead, I want to replace the main image with the image that is in a thumbnail when a thumbnail image is clicked.

The closest I’ve gotten to this is getting the image hover plugin, but all that does is on image hover it puts the cropped thumbnail image on the main product image area, but it disappears when the hover is over.

Can you advise on how to do this.

Second:

I am having a problem trying to change the crop ratio of product thumbnail images. I have placed this code in my child themes functions.php file to enable product image size settings in WooCommerce settings area:

add_action( 'init', 'x_image_set_settings', 99 );
function x_image_set_settings () {
remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings', 10 );
}

I think your answer was to replace the above code with:

function remove_product_settings_filter() {
   remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings' );
}

add_filter('init', 'remove_product_settings_filter');

I did so, but it did not do anything to the cropped images. Would I need to regenerate images after doing this?

[Rue Nel]

Hello There,

1] The default WooCommerce effect with the thumbnails is either with the lightbox or no lightbox alone. You can achieve what you have in mind by using a 3rd party plugin. Perhaps this plugin might help: https://wordpress.org/plugins/woocommerce-better-thumbnail-navigation/

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

2] After reseting the product images, you should always regenerate the thumbnails before you can see the changes in the image size.

Please let us know how it goes.

[Author]

Posts