Change size product images using woocommerce product category element

[TiiPii]

Hi,

See the screenshot attached. I find the three product images too big, I feel they’re stretched as the quality is now also poor.

I’ve added the woocommerce product category element via the visual composer on our homepage.

Please answer the following questions

1. I want to adjust the size image to 60% off the current size, how many pixels is that?
2. How can I adjust the images to the wanted pixels?
3. How do I delete the mouse over on the images?
4. How do I delete the cart icon with the mouse over?
5. How do I make sure the three products are centre aligned on the page?

Thanks so much,
Jantine

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

You can change the Woo images sizes here: WooCommerce > Settings > Products > Display

You need to use this plugin to rebuild your thumbnails once you change the size: https://wordpress.org/support/plugin/ajax-thumbnail-rebuild.

You can hide the shop buttons using this in Theme Options => Custom CSS

.product figure:hover .cart-overlay {
    opacity: 0;
}

[TiiPii]

Hi David,

Thank you for the reply,

I have added .product figure:hover .cart-overlay {
opacity: 0;
}

to the css, however it is not working. The mouse over is still there. Please give me a correct code.

Thank you,

Jantine

[Rui Guerreiro – SUPPORT]

Try this code below. It will remove the product action buttons.

.product .cart-overlay .shop-actions{
  display:none;
}

hope it helps.

-Rui

[TiiPii]

It’s still not working with this code.

What do I do?

Thanks a mill,

[Rui Guerreiro – SUPPORT]

maybe you have some error in the custom css option.
Can you provide admin access to check if you have any error?

Use the private reply.

-Rui

[TiiPii]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Where? It’s not showing for me when I hover http://d.pr/i/1awoZ/kTogxrhK

– Kyle

[TiiPii]

This reply has been marked as private.

[Kyle – SUPPORT]

Add this to your custom css:

.standard-browser .products .product figure.product-transition-fade:hover .img-wrap.first-image > img {
  opacity: 1;
}
.products .product figure.product-transition-fade .img-wrap.second-image {
  display: none;
}

– Kyle

[TiiPii]

Yay it worked! Thanks Kyle,

the only thing is that the sale button is now also dissappearing but I’ll take that one.

Thanks again

[Kyle – SUPPORT]

No problem

– Kyle