Making "related products" area smaller on product page

Support
#1

Hi there,
I am trying to make the “related products” part of my product page smaller. I would like it to be about 30% of what it is now. Can you help me?
alisonglass.com/shop-woo

Thanks!
Jessica

#2

Hi there,

I am not sure how you want to make it 30% smaller, I guess you meant the image sizes. I suggest that you add the CSS code below to X > Launch > Options > CSS:

.woocommerce li.product .entry-featured img {
    max-height: 220px;
    object-fit: contain;
}

Feel free to change 220 to whatever size you think it’s suitable for you.

Thank you.

#3

Thank you for the tip! I can not add CSS that way. When I go to X>Launch the screen goes white. (I have looked at it in both Firefox and Safari. Is there something wrong here? Can you get it to launch X?

I am going to try to add the CSS via Cornerstone.

If you know why this other way isn’t working I am very curious. Thanks! My site is alisonglass.com
-Jessica

#4

I figured out my issue with X not loading. I am trying to make the “related products” part of the page entirely smaller and more subtle. How do I change the size of the type as well as the pictures? I am trying to emulate this layout.

#5

Hi Jessica,

Glad you have figure out the loading issue. The custom CSS now to decrease the size of related product image is working. This is what I am seeing right now:

To adjust the size of the text below it, please use this custom CSS:

  .related.products .entry-header h3 a, .woocommerce li.product .entry-header .price>.amount {
     font-size: 12px;  /* Change to your preferred font size*/
  }

Hope this helps.

1 Like
#6

that was awesome! Thanks!
I am just trying to figure out how to align the text to the left side of the picture now. And I am having a hard time making the “related products” header smaller, 15px, maybe?

#7

Hi There,

Please also add this CSS:

.woocommerce .upsells h2, 
.woocommerce .related h2, 
.woocommerce .cross-sells h2 {
    font-size: 15px;
}

Hope it helps :slight_smile: