Productbox Size - Support | Kriesi.at - Premium WordPress Themes

Tagged: Productbox Size

Viewing 19 posts - 1 through 19 (of 19 total)

Author

Posts
November 9, 2023 at 11:55 pm #1425177

Chrisxx1982
Participant

Hi,

I don’t know if I can adjust my problem using the options in the theme.

My problem: Unfortunately, the product boxes in the product categories are not the same size. How can I make the boxes all the same size? Is there any setting?

All product categories look very wild with all the different sized product boxes.

I would be very happy about help.

Best regards
Christian

November 10, 2023 at 2:39 pm #1425232
Rikard
Keymaster
Hey Chrisxx1982,

Please try the following in Quick CSS under Enfold->General Styling:
```
ul.products .woocommerce-loop-category__title {
    height: 70px;
    min-height: 70px;
}
```
Best regards,
Rikard
November 10, 2023 at 6:14 pm #1425251

Chrisxx1982
Participant

Hi Rikard,

First of all, thank you very much for your help.

I tried it out, but unfortunately it doesn’t work.

Here is an example of what it looks like when I incorporate your code -> https://postimg.cc/9r3DM2Lw

https://www.sarisgarage.shop/palettenkissen-palettenpolster/

The boxes are all different sizes. The problem is of course the product title. If the product title is very long and needs 2-4 lines to display everything, the size of the boxes will also change. Unfortunately, I can’t always adjust all the titles so that everything is the same :)

Do you perhaps have another idea?

Thank you very much for your help.

Best regards
Christian

November 11, 2023 at 11:59 am #1425286
Rikard
Keymaster
Hi,

Please try this CSS as well:
```
.product .av-product-class-minimal {
    height: 480px;
    min-height: 480px !important;
}
```
Best regards,
Rikard
November 11, 2023 at 2:14 pm #1425300

Chrisxx1982
Participant

Hi Rikard,

thank you very much for your help. It works with both codes, thank you very much.

So the boxes for the products and the product categories are now all the same size, as there is now enough space in the box for the sometimes long product titles.

What I would like to change, because it unfortunately looks very confusing and difficult to read, is to highlight the title of the products in color or put a frame. Do you know how I can customize the product boxes even further?

Many thanks in advance for your help.

Best regards
Christian

November 11, 2023 at 2:42 pm #1425302

Chrisxx1982
Participant

Small addendum to my previous answer:

Unfortunately, I saw that the sizes are not the same for these product categories.

See this link on our wooden boxes page: https://www.sarisgarage.shop/holzkisten/

Is the code you sent me for the product boxes also available for the product categories?

Best regards
Christian

November 12, 2023 at 11:14 am #1425323
Rikard
Keymaster
Hi,

Please try this CSS as well:
```
ul.products li a img {
    height: 200px;
}
```
I’m not sure what you mean by this:

What I would like to change, because it unfortunately looks very confusing and difficult to read, is to highlight the title of the products in color or put a frame. Do you know how I can customize the product boxes even further?

Could you post a screenshot highlighting your intentions please?

Best regards,
Rikard
November 12, 2023 at 12:38 pm #1425329

Chrisxx1982
Participant

Hello Rikard,
thank you very much first of all. That’s very nice of you.

If I add the code additionally, the product category boxes are the same size everywhere, but then the images are unfortunately distorted. The pictures then look strange because the proportions are no longer correct.

Can the product category boxes be enlarged or adjusted so that it does not affect the size of the images? Please look at the picture link here: https://postimg.cc/wyFRyn1K

Also a frame around the product title so that the title doesn’t look so lost

Best Regards
Christian

November 13, 2023 at 7:39 pm #1425484
Rikard
Keymaster
Hi,

Please try this CSS as well:
```
div .product a {
    text-decoration: none;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
```
Best regards,
Rikard
November 13, 2023 at 8:52 pm #1425497

Chrisxx1982
Participant

Hi Rikard,
Thank you.

Unfortunately the last code didn’t work. Then there is a display error, like this: https://postimg.cc/JDz6gX5K

In my previous message I wrote that the boxes of the product categories are still different sizes. The size of the product category boxes is calculated based on the size of the image – see here: https://postimg.cc/t1F0NFCc

You got the product boxes of the individual products right so that it is independent of the images.

With this code:

ul.products .woocommerce-loop-category__title {
height: 60px;
min-height: 60px;
}

The only thing that actually gets bigger is the box at the bottom where the name of the product category is written, but as you can see, the product categories are still different sizes depending on the size of the image -> https://postimg.cc/t1F0NFCc

Can you adapt the codeo so that it is independent of the images and you still don’t change the images so that the proportions of the images are not changed, so that the images suddenly no longer look good. Is there a possibility?

I hope I expressed myself somewhat understandably. I write using Google translate :)

Thank you very much for your help.

Best Regards
Christian

November 13, 2023 at 11:55 pm #1425506
Nikko
Inactive Moderator
Hi Christian,

Please try to remove this CSS code:
```
.product .av-product-class-minimal {
    height: 470px;
    min-height: 470px!important;
}
```
and replace it with:
```
#top ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

#top ul.products .product {
    clear: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    float: none;
    margin: 0;
    width: 100%;
}
```
Hope it helps.

Best regards,
Nikko
November 14, 2023 at 10:45 am #1425548

Chrisxx1982
Participant

Hi Nikko,
thank you very much for your help.

I tried your code. Unfortunately it looks like this:

Once the product category boxes: https://postimg.cc/YvKHfp1W

Once the product boxes: https://postimg.cc/kR60KZGs

Some of them are the same, but in the product category boxes they are pulled up and it sometimes looks very strange.

With the product boxes it is always the same at the bottom of the boxes but often different at the top.

Can the product boxes and product category boxes be made larger without changing the images?

I hope I don’t have to adjust the size of all the product images :) I also see many other shops that also have different sized product images and still have everything the same size for the product boxes and product category boxes everywhere.

Best regards
Christian

November 15, 2023 at 3:07 am #1425617

Nikko
Inactive Moderator

Hi Christian,

The other option would be to align it to top but it would not look good as well.
Can you give us a link of the shop you mentioned? at the moment I could not think of a solution without some trade-off like stretching .

Best regards,
Nikko

November 15, 2023 at 10:22 am #1425662

Chrisxx1982
Participant

Hi Nikko,

Thank you for your efforts. Yes, here is a category https://www.sarisgarage.shop/holzkisten/

You can see it there with the product categories and product boxes.

I’m currently using this code in Quich CSS:

.product .av-product-class-minimal {
height: 470px;
min-height: 470px !important;
}
ul.products .woocommerce-loop-category__title {
height: 60px;
min-height: 60px;
}

But unfortunately the product boxes look so long. Things no longer look good on the mobile view.

In addition, the product category boxes are still unequal in box size.

Can’t you do anything about it?

Best regards
Christian

November 15, 2023 at 3:58 pm #1425693
Nikko
Inactive Moderator
Hi Christian,

I think the layout is hard to really hard to fix because there are basically 2 layouts, image sizes varies from small and very tall images, and the varying length of the titles.
The complexity might be solved with some javascript but I’m not an expert on that, so I can only give you some CSS codes to try to help make it look better, please try to remove
```
.product .av-product-class-minimal {
height: 470px;
min-height: 470px !important;
}
```
and replace it with:
```
@media only screen and (max-width:767px) {
  #top ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  #top ul.products .product {
    clear: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    float: none;
    margin: 0;
    width: 100%;
  }

  #top ul.products .product-category a {
    display: block;
    position: static !important;
  }

  #top ul.products .product-category a .woocommerce-loop-category__title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  #top ul.products .type-product .thumbnail_container {
    min-height: 270px;
  }

  #top ul.products .type-product .thumbnail_container img {
    max-height: 240px;
    width: auto !important;
    margin-left: auto;
    margin-right: auto;
  }
}
```
Best regards,
Nikko
November 15, 2023 at 4:59 pm #1425702

Chrisxx1982
Participant

Hi Nikko,

Thank you very much for your efforts. Unfortunately, when I use your code in quick css, nothing changes. So unfortunately I can’t see any changes.

The product boxes and product category boxes are all mixed up or not the same size.

I just used your code 1:1.

Best regards
Christian

November 16, 2023 at 6:36 am #1425730
Nikko
Inactive Moderator
Hi Christian,

I apologize, there’s something wrong with my code, please replace this part of the code:
```
@media only screen and (max-width:767px) {
```
with:
```
@media only screen and (min-width:768px) {
```
Best regards,
Nikko
November 17, 2023 at 9:38 am #1425813

Chrisxx1982
Participant

Hi Nikko,
thank you very much for your help.

The solution looks better and cleaner overall, but unfortunately there are a few problems with the product category titles if they are in 2 lines. And some product images are slightly cropped.

I tried your entire code once on a test environment.

Here are a few example pictures of what it looks like:

– https://postimg.cc/zyqCBfC9

– https://postimg.cc/wtpjHtDm

– https://postimg.cc/0b7gvVnV

Do you think you can adapt your solution somehow so that the product categories with 2 lines look normal? And if it is possible that some product images are not cropped like this, so make the space in the boxes a little larger.

Thank you.

Best regards
Christian

November 17, 2023 at 4:42 pm #1425853

Nikko
Inactive Moderator

Hi Christian,

I’m actually aware of that issue but can’t really find a workaround it, except adjusting/cropping the image on a uniform height and width using image editors like photoshop, or other similar platforms. For titles, having two different things one with background and one with none, and some are one line, two lines, or more, adds more complexity to it.

Best regards,
Nikko
Author

Posts

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.