[Resolved] Woocommerce image size (created with shortcodes)

[roadlink]

Hello,

I set 300px as image size in customize > woocommerce. https://prnt.sc/zhjln1
It is working very well in shop pages, categories and also Related/Upsell Columns. Here

But I have an issue in main page.
I create columns in main page by woocommerce shortcodes. Like this.
[products limit="4" columns="4" orderby="id" order="DESC"]
But the product images are not exactly 300px and there is gap between them.
https://prnt.sc/zhju0j

Any suggestion to fix it?

Can I use category design in main page? like this.

[David]

Hi there,

try this CSS:

.home .woocommerce ul.products li.product {
  margin-right: 10px;
  width: calc(25% - 10px);
}

Adjust the 10px to suit.

[roadlink]

Hi David,

Thank you.
Great in desktop.
But mobile become weird. https://prnt.sc/zidnbr

[roadlink]

the weird thing is, woocommerce use 300pcs images but resize them to 272px.
I don’t understand why.

[Ying]

Hi Tertas,

We could add a media query to limit the CSS only works for desktop.

@media (min-width: 769px) {
    .home .woocommerce ul.products li.product{
         width: calc(25% - 15px);
    }
    .home .woocommerce ul.products li.product:not(.last) {
         margin-right: 15px;
    }
    .woocommerce ul.products {
        margin-left: 7px;
        margin-right: -7px;
    }
}

Let me know 🙂

[roadlink]

Hello Ying,

Worked well, thanks.

It is weird that it is not working out of the box.

[Ying]

No problem 🙂

[roadlink]

I just realized that this CSS makes right space 25px.
15px from container + 10px from css code.

https://prnt.sc/zrp8v8

[Ying]

Do you need us to help with anything? Let me know 🙂

[roadlink]

Hi Ying,
If you have time sure need help 🙂

This code add 10px margin for last product too. “margin-right: 10px;”
Which means last product have total 25px margin to container.
But it should be 15px like left product.

[Ying]

Haha I’m actually quite busy 😛

We could modify the selector so that the last product won’t be targeted, edited CSS here:
https://generatepress.com/forums/topic/woocommerce-image-size-created-with-shortcodes/#post-1658241

Let me know if it works.

[roadlink]

Have a nice day. Sorry to keep you more busy 🙁
Btw, Latest code makes the last product smaller. https://prnt.sc/zuwl1i

[David]

Lets keep the margin gap to 15px then you can do this:

@media (min-width: 769px) {
    .home .woocommerce ul.products li.product{
         width: calc(25% - 15px);
    }
    .home .woocommerce ul.products li.product:not(.last) {
         margin-right: 15px;
    }
}

[roadlink]

Hello David,

Thanks for the code, but result is similar.
https://prnt.sc/zvw465

I tried to put arrows regarding the issue.

regards

[Ying]

Hi Tertas,

I edited my pervious CSS here, try this one instead:
https://generatepress.com/forums/topic/woocommerce-image-size-created-with-shortcodes/#post-1658241

[Author]

Posts