wordpress woocommerce Cómo cambiar el tamaño de las imágenes de los productos de WooCommerce

Let's see how to resize images WooCommerce products for the aspect of our online store more attractive.

We saw once how to change the number of products to be displayed per row and in doing so it may be we need to resize images to fit better the appearance of our staff.

As we can see on this website, now has set the online store to display 4 products per row. If we want to change it to 2 products per row for example we must follow the steps in Changing the number of products per row in WooCommerce.

Once done the above change, we find the new size that will have the images of the products. We playing with Firebug discovered that the width reserved for products in the central area (site-main) is 620px, and that each image is 137px most 23px having right margin for the product of his right not sticking to he.

WooCommerce Cambiar Tamano Imagenes Productos 01 1024x723 Cómo cambiar el tamaño de las imágenes de los productos de WooCommerce

As we can see in WooCommerce settings, defined for images size it is 180px. To show 2 products per row need to be about 290px. So just be enough to change the size in WooCommerce settings for new products that we have the size and the 2 products per row occupy all the space they have available.

WooCommerce Cambiar Tamano Imagenes Productos 02 Cómo cambiar el tamaño de las imágenes de los productos de WooCommerce

It may be necessary once you have modified the size adjustments, we have to make use of the plugin Regenerate thumbails so that the thumbnails of already created products to be rebuilt with the new size you have defined.

personalized support

If you need help to perform as described in the article on your personal web write me (Contact) Explaining what you need and without commitment, I can give you personalized quote.

I'll be happy to help you!

Advertisements

Use of cookies

This site uses cookies for you to have the best user experience. If you continue to browse you are giving your consent to the acceptance of the above cookies and acceptance of our cookies policy, Click the link for more information.

OK
Notice of cookies

Pin it on Pinterest

Share This

Share

Share this with your friends!