[Support request] Woocomerce Single Product Picture

[hhinojosa]

Hi Everyone, yesterday I got this template (premium) because I read a lot from it well and I started a e-commerce website, but I’m trying to know how to fix the picture size for the products, because my website it’s just about Beer. I already tried with plugins, because I don’t know what is happening to be honest, I have been trying a lot of things and the web keep doing the same, so it’s not the size of the image.

If someone could give ona hand, I will be really Thanksfull.

Have a beautiful day.

PD: And I hope you could understand my post, I’m not english speaker but I do my best <3.

[Tom]

Hi there,

The next version of GPP has an option to set the width of the single product image.

For now, you can try this CSS:

.woocommerce #content div.product div.images, 
.woocommerce div.product div.images, 
.woocommerce-page #content div.product div.images, 
.woocommerce-page div.product div.images {
    width: 20%;
}

.woocommerce #content div.product div.summary, 
.woocommerce div.product div.summary, 
.woocommerce-page #content div.product div.summary, 
.woocommerce-page div.product div.summary {
    width: 70%;
}

Let me know 🙂

[hhinojosa]

Hey Tom, Thank you so much, works perfectly.

but I have another question, because the Shop is really awfull because the same, the pictures, the tittles, etc.. I don’t know if can i use a CSS to edit the pictures from the shop as well as the tittles and letters, the add to cart button, generating padding or this kind of things.. because my website is focalized in thi shop so the most important pages that I need to edit are Shop/Single Product and widget to show them anywhere.

but the problem is basically that I don’t have any control in that for now.

Thanks so much for your time, I just need to take full control of my shop, because now it’s all what I gonna do.. upload products.

[Tom]

The main issue I’m seeing there is you have your images aligned left. What happens if you center align them in Customize > Layout > WooCommerce?

[hhinojosa]

Nice, I didn’t saw that and was everything for that, perfect.

Do you have a CSS to edit the pictures from the store?, because they are quite big still and I would like to reduce the size from the store and from the related products in the single product page, because how you can see, there are still big and one of them (that has the same exportation), kept huge, and i don’t know why.

PD: I started this website from a template called Wordsmith, I dont know if that can helps.

And well, it would be everything for now, I’m really thanksfull for your help Tom. <3

[Tom]

Give this a shot as well:

.woocommerce ul.products li.product a img {
    height: 200px;
    width: auto;
}

Let me know 🙂

[hhinojosa]

Thanks Tom, I’m really thanksfull everything is fixed.

Before to close this topic, I’m doing something with the tittle products, to make the difference in the store, to have all the product boxes aligned.

I’m writting the tittle like that : <span style=”color: #d97d2d;”>Delirium</span> Tremens

Instead to write: Delirium Tremens

My question?,

is there a better way to do that instead to write every tittle with code… because after in the single product page the tittle appears the same.

The description color of the single product page as well kept a color that I couldn’t find the option to change it in customize.

And again, thank you so much <3

[Tom]

Since you’re only wanting to color one word out of the title, I don’t believe there’s a better way without using javascript.

What you might want to do though is replace:

<span style="color: #d97d2d;">

With:

<span class="title-highlight">

This means you can write CSS for the color and change it whenver you want without having to change it inside every single product:

.title-highlight {
    color: #d97d2d;
}

[Author]

Posts