Archived topic

Woocommerce image size (created with shortcodes)

16 replies · Started by roadlink on February 14, 2021

Viewing posts 1–15 of 17

February 14, 2021 at 6:58 am #1657880

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.

February 14, 2021 at 7:25 am #1657911

Hi there,

try this CSS:

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

Adjust the 10px to suit.

February 14, 2021 at 11:41 am #1658136

Hi David,

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

February 14, 2021 at 11:55 am #1658143

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

February 14, 2021 at 2:05 pm #1658241

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 :)

February 14, 2021 at 10:01 pm #1658471

Hello Ying,

Worked well, thanks.

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

February 15, 2021 at 12:12 pm #1659491

No problem :)

February 16, 2021 at 12:41 pm #1660853

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

https://prnt.sc/zrp8v8

February 16, 2021 at 2:09 pm #1660943

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

February 16, 2021 at 2:35 pm #1660968

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.

February 16, 2021 at 3:00 pm #1660990

Haha I'm actually quite busy :P

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.

February 17, 2021 at 5:36 am #1661589

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

February 17, 2021 at 8:13 am #1661958

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;
    }
}

February 17, 2021 at 10:54 am #1662205

Hello David,

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

I tried to put arrows regarding the issue.

regards

February 17, 2021 at 11:17 am #1662225

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

This archived topic is closed to new replies.

Start building better websites today.