Docs

[194roc]

Home

X child theme renew on 4.4.2
woocommerce 2.5.5

Hello there.

On my website, I decided to make the related product visible but in my opinion the size of the image is too big.

How could I reduce this size and have these images, 3 or 4 I haven’t decided yet, centered in the page.

One more thing, how can I rename the heading “Related Product” to the Italian ” Prodotti correlati” or similar ?

Thank you very much for your help.

Best regards,

Roberto

[Rahul]

Hey there,

Thanks for writing in!

Please add the following custom CSS :

.woocommerce li.product .entry-featured img {
    width: 80%;
}

Hope that helps.

Thanks

[194roc]

Hello there,

I tried what you suggested but I didn’t get any result. The images doesn’t change their size and I don’t know how to change the heading to italian.

While I was modifying the css a weird page, never seen before show up….
I attached a screen-shot below:
http://prntscr.com/b688vf

It is in italian but it sounds like:
“Are you trying to cheat ?
You do not have the permission to modify this site”

Do you have any idea from where is coming that page and what does it mean ?

Thanks for your help.

Best regards,

Roberto

[194roc]

This reply has been marked as private.

[Rue Nel]

Hello Roberto,

To change the image sizes in your related products section, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.woocommerce .related.products {
    text-align: center;
}

.woocommerce .related.products ul.products {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

Feel free to adjust the maximum width. And to fully translate your site to Italian, please check out our knowledge base here: https://community.theme.co/kb/translation/

Hope this helps.

[194roc]

Thanks for the answer.

I have to apologies, but I found out that the proper tag are defined as up-sell product.

I tried both option but still it didn’t work, I can’t reduce the size of the images.

.woocommerce .related.products {
    text-align: center;
}

.woocommerce .related.products ul.products {
    margin-left: auto;
    margin-right: auto;
    max-width: 200px;
}

and

.woocommerce .upsell.products {
    text-align: center;
}

.woocommerce .upsell.products ul.products {
    margin-left: auto;
    margin-right: auto;
    max-width: 200px;
}

Now I left them set to 200px but the image doesn’t resize.

Thanks,
Roberto

[Joao]

Hi Roberto,

If you are trying to re-size the related product image, those one that say under the main image you can use this code:

.woocommerce div.product .images .thumbnails > a {
    margin-left: auto;
    margin-right: auto;
    max-width: 75px;
}

If I misunderstood you, please let us know with more details which image you are trying to re-size.

Thanks,

Joao

[194roc]

Hello Joao,

I tried what you suggested but npc luck.

You’ll find the link of the page where I took the screenshot to show the images I am talking about.

Link of the page: http://www.castello.it/prodotto/collana-colpo-di-fulmine-pomellato

Link of the screenshot: http://prntscr.com/b6puri

By the way following your guide I managed to change the language to the “Potrebbero interessarti anche questi articoli…” but how to reduce the text size ?

Thanks for your help.

Best regards,

Roberto

[Thai]

Hi There,

Please try with this CSS instead:

.woocommerce .upsells li.product {
    text-align: center;
}
.woocommerce .upsells h2 {
    font-size: 20px;
}
.woocommerce .upsells li.product .entry-featured img {
    max-width: 130px;
    min-width: auto;
    margin: 0 auto;
    display: block;
}

Hope it helps 🙂

[194roc]

Helle there,

unfortunately it seems that even this css doesn’t solve the issue.
Actually the parameter are the following:

.woocommerce .upsells li.product {
    text-align: center;
}
.woocommerce .upsells h2 {
    font-size: 10px;
}
.woocommerce .upsells li.product .entry-featured img {

    max-width: 50px;
    min-width: auto;
    margin: 0 auto;
    display: block;
}

but the screenshot reveal that it doesn’t work:

http://prntscr.com/b9sfo0

Any advice ?

Thanks for the support and sorry for the delay in answering your suggestion.

Best regards,

Roberto

[Christopher]

Hi there,

The image has became very small, see the attachment.
Please increase the value, clear cache and check again.

Hope it helps.

[194roc]

Hello there,

I clear the cache but no result on my side. The images are loaded with the same size as before.

I tryed a different computer and browsing the page the images doesn’t have the size as your screenshot …????

Then I try a different browser than Safari, Chrome, and voilà I got your same result….

How van be avoided this browser difference ?

Thanks,

Roberto

[Christopher]

Hi there,

Now I see you’ve fixed it, see the attachment. I can see the changes in different browsers.

Thanks.

[Author]

Posts