Shop thumbnail sizes

[DistantLands]

We have the Shop Element included on the home page, showing all 5 of our products. Is there a way via CSS or other, to change the size of the div/space for the primary product image? We want larger images, and perhaps the ability to modify the margin between each Product. Thanks-

[Rui Guerreiro – SUPPORT]

Hi,

You can reduce the margin with this code, it shouldn’t be 0 or the product title will be together with the other product.

@media only screen and (min-width: 1200px){
.woocommerce ul.products li.product {
    margin-left: 10px!important;
}
}
.woocommerce ul.products li.product {
    margin-left: 10px!important;
}

regarding your images, the problem is in the format. you should use a square format(without that transparency at the sides) maybe zooming part of the products.

-Rui

[DistantLands]

This reply has been marked as private.

[David Martin – Support]

Hi,

You change the image sizes here: WooCommerce > Settings > Products > Display

After you need to use this plugin to rebuild your thumbnails: https://wordpress.org/plugins/regenerate-thumbnails/.

The images will only fit the container they reside in. The margins can be adjusted using this:

@media only screen and (min-width: 1200px) {
.woocommerce ul.products li.product {
    margin-left: 10px!important;
    margin-right: 10px!important;
}
}
.woocommerce ul.products li.product {
    margin-left: 10px;
    margin-right: 10px!important;
}

[DistantLands]

This reply has been marked as private.

[David Martin – Support]

Increasing the margins will cause your products to drop onto a new line if the products cannot fit within the Row. How many products per row are you wanting, 3 right?

To change the products per row please read this and implement via a child theme: https://docs.woocommerce.com/document/change-number-of-products-per-row/

[DistantLands]

This reply has been marked as private.

[David Martin – Support]

Changing the margins can cause this to happen as you increasing the total width of all products + margins to a greater sum than that of the container they reside in. We use the Bootstrap grid layout/jQuery masonry to layout the products: https://getbootstrap.com/examples/grid/.

To show 5 products in a single row on the shop page:

1) In the theme locate this file: /neigborhood/woocommerce/archive-product.php and copy it.

2) Please install and activate the supplied child theme.

3) Inside the child theme file structure, paste in archive-product.php to override the parent theme.

4) Open the child theme file archive-product.php and locate this:

				if ($sidebars == "no-sidebars") {
					$woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );
				} else if ($sidebars == "both-sidebars") {
					$woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 2 );
					$columns = 2;
				} else {
					$woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 3 );
					$columns = 3;
				}

Change to this:

				if ($sidebars == "no-sidebars") {
					$woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 5 );
				} else if ($sidebars == "both-sidebars") {
					$woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 2 );
					$columns = 2;
				} else {
					$woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 3 );
					$columns = 3;
				}

I would strongly suggest you remove your margin modifications unless you fully understand the bootstrap grid system.

[DistantLands]

OK, thanks for that. I did that as best I could, but I’m still seeing only 4 columns. I’ve removed the margins from the extra CSS, copied over and modified the archive-product.php page to the child and made the changes (though the verbiage in the code wasn’t identical). Can you see if you can find something else that might be conflicting??? I get that the issue is somehow related to spacing of the product divs in it’s container, but I simply don’t know where the bootstrap or theme-specific CSS is that’s confounding the issue!

[David Martin – Support]

Hi,

You still have a bit of CSS setting the width also:

That is overriding the defaults here and in places where you use the Page Builder: http://www.alumbrecoffee.com/shop/

Maybe add your FTP details so I can see your child theme edits further.

[DistantLands]

This reply has been marked as private.

[David Martin – Support]

Hi,

I’ve made a couple of changes, please now add this CSS and re-test:

@media only screen and (min-width: 1200px) {
body.woocommerce .has-no-sidebar ul.products li.product, 
body.woocommerce .has-no-sidebar .upsells.products ul.products li.product {
    width: 20%;
    margin-left: 0px;
}
}

body.woocommerce .has-no-sidebar ul.products li.product {
    width: 15%;
    margin-left: 5%;
}
body.woocommerce .has-no-sidebar ul.products li.product:first-of-type {
    margin-left: 0;
}

[DistantLands]

Thank you, this works GREAT on the shop page! Unfortunately, I also need it to work on the Shop element used on the Home page. Thoughts?

[David Martin – Support]

Well, you would need to edit the page builder elements for that. A developer would be required to help with something on that scale.

An easy tweak via CSS that could help you for the homepage:

@media only screen and (min-width: 1200px) {
.home .woocommerce ul.products li.product {
     width: 210px;
    margin-left: 10px!important;
    margin-right: 10px!important;
}
}
.home .woocommerce ul.products li.product {
  width: 200px;
    margin-left: 10px;
    margin-right: 10px!important;
}
.home .woocommerce ul.products li.first,
.woocommerce ul.products li.last{
  clear: none;
}

[DistantLands]

This works great. Thanks so much to you and your team. This can be marked Resolved.