Docs

[Eric M]

Can you tell me what code is causing one of the upsell items to be longer than the others?

[Eric M]

This reply has been marked as private.

[Eric M]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! To make sure that the upsell items and the related items will be of the same height, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.woocommerce .products.upsells li.product .entry-product,
.woocommerce .products.related li.product .entry-product {
    max-height: 280px;
}

You might need to adjust it if it’s a litle shorter or higher. And on the other page, to make sure that the button is not cut off, please find this css block from your customizer,

.woocommerce .site li .entry-wrap {
    top: 40%;
}

You need to reduce the 40% to at least 30% or lower. Perhaps with code;

.woocommerce .site li .entry-wrap {
    top: 25%;
}

Hope this helps.

[Eric M]

ive tried a few options to add padding above the button. What would add some padding?

[Eric M]

what needs to be added to the code above to isolate the changes to the product store and category pages?

[Friech]

Hi There,

To make the css to apply on your product store and archive page, you can append the class .archive to the .woocommerce selector.

e.g.

.archive.woocommerce .products.upsells li.product .entry-product,
.archive.woocommerce .products.related li.product .entry-product {
    max-height: 280px;
}

Another thing, look for this block on your custom CSS and add the missing closing bracket.

.woocommerce div.product .woocommerce-tabs h2 {
  display: none;

Hope it helps, Cheers!

[Eric M]

This reply has been marked as private.

[Friech]

Hi There,

Please update the code to this

@media (min-width:  980px) {
	.archive.woocommerce li.product .entry-product {
	       max-height: 210px;
	}
}

Thanks.

[Author]

Posts