Woocommerce product loop styling

This topic has 6 replies, 3 voices, and was last updated 7 years by Radu.

Author
September 7, 2017 at 22:03 #172916

bhnash
Participant

Since the woocommerce update, I have had issues with the product pages. I will submit separate tickets. First issue is that pages show each product as a kind of card with a background. If the product has a name that takes up more than one line, it makes the background bigger, and shows bigger than the one next to it. Is there any way to make it show the same? I tried this on anothere theme (2017) and there did not seem to be an issue for that, though the background is white, so maybe it blended in. Is there a way to make the background a set length instead of a margin from the bottom line so that they all end the same place? Adding both samples.

Thank you.

Attachments:
You must be logged in to view attached files.

September 8, 2017 at 14:41 #172953

Laura
Moderator

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
September 8, 2017 at 17:44 #172980

Radu
Moderator
Hi,

Using the next css you will be able to choose equal height for the product title area
COPY CODE
```
@media(min-width:991px){
.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {min-height:110px;}
}
```
To have all products at line also the images should have the same ratio, play with the 110px value and set as you need.

The css will be added to wp-admin -> theme options -> General settings -> Quick CSS

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
September 13, 2017 at 21:08 #173579

bhnash
Participant

I submitted separate tickets, but the admin closed them and told me to add them to this ticket. I have two more issues with woocommerce that seem to only apply to the Kleo theme:

1) The single product page keeps showing differently, and I have issues with images. they show bigger, and the descriptions show to the bottom, and not at the side. I remedied this temporarily by going back to the old template, but I keep getting errors. I tried the 2017 theme and it is showing correctly. The pictures labeled ‘single-sample’ show this.

,2) the images started showing all at once, the main and the first gallery image on top of one another. In the 2017 theme this is not happening, so it is something with the kleo template maybe? It should only display the main image and then if the hover animation is on, the second image, but no animation will do for now. the pictures labeled ‘sample’ show this.

Thank you.

Attachments:
You must be logged in to view attached files.
September 14, 2017 at 18:18 #173675

Radu
Moderator
Hi,

Just add those CSS all products will look the same on desktop
COPY CODE
```
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {

background:transparent;

}

@media(min-width:991px){
.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {min-height:110px;}
.woocommerce ul li .kleo-woo-image.kleo-woo-front-image {min-height:160px}

.kleo-woo-image.kleo-woo-back-image {
    display: none;
}
}
```
For the single product page layout, this surest it’s caused by some wocommerce modifications templates in the child theme? try to de-activate child theme see how it looks, if it’s ok to revert the change in child theme that makes to look like that.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
September 15, 2017 at 19:27 #173827

bhnash
Participant

Thanks for the code for the product loop, it’sfixed. The single page issue still persists, thoug, and is the same when I deactivate my child theme and use regular kleo. It only changes when I use a different theme altoh=gether, like twenty seventeen.

September 18, 2017 at 16:32 #174016

Radu
Moderator

Hi,

You’re welcome,

Regarding to the product single page layout issue, go to wp-admin -> theme options -> woocomemrce -> Woocoemrce Single Product Layout -> Choose Left or Right Sidebar

If even you change that it’s the same provide to me admin credentials to take a closer look

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
Author

Posts