How to edit Woocommerce products appearance on Travelify?

Hello all,

I am using the Travelify theme with a child theme, here’s my website: www.chocolatesimportados.com

How can I edit the appearance of the products on display on the HOME page? I would like to make the spacing of the texts under the pictures smaller, change font sizes, and things like this.

I have been doing some research, and experimenting changing things at the woocommerce.css and woocommerce.less files, but no success. I also tried to add pieces of code I read about on the style.css of the child theme, but nothing helped (maybe I didn’t have the write code). I don’t know what loads first and overwrites what, I am a bit confused.

Also, once you click on the product, the picture (featured picture on the product page) is so microscopic I almost can´t see it (looks like a dot, really), and only once I click on it, it shows.

I am relatively new to all this, so please take this into consideration :slight_smile:

Many thanks in advance for your help,

Monica

Most of these changes should be done via WooCommerce control panel. YOu can change thumbnail size, button color, lightbox and other.

Check WooCommerce - Settings.

If it doesn’t help you can add you changes to Child Theme style.css and all these changes will overwrite original WooCommerce stylesheet because Child Theme has a higher priority.

Let me know if this helps.

It seems that I cannot change the text spacing for the products in the front page with the Woocommerce Control Panel, I could find no such option. Unfortunately I have not figured out how the code for alterations in the text would look like. Would you be able to provide me an example so I can put it on the style.css page from my child theme and play with it, please?

For the pictures sizes, I just found out that I accidentally had inserted the picture (just one per product) in the “Product Gallery” (Galeria de Produtos - my Woocommerce is now in Portuguese and I don´t know remember the translation - I mean the bottom place where you can insert pictures), instead of the “Product Image”. It turns out the picture will be normally displayed in the page where you have all your products together, but not in the product page itself. Tricky to figure out the mistake!

Thanks a lot for the help!

Monica

I still don’t quite get it what you are trying to achieve but here is an example how to change letter spacing and line height if you need that.

.woocommerce h3 {
    letter-spacing: 2px;
    line-height: 30px;
}
.woocommerce ul.products li.product .price {
letter-spacing: 2px;
    line-height: 30px;
}

If this is not what you were trying to achieve please post screenshot with more information.

You can paste above given code inside Child Theme style.css or inside Theme Options - Other - Custom CSS.

That was exactly what I was looking for, many thanks!!

Hi Aigars,
actually i made a webcoommerce based on your template but i have a problem with sidebars.
I’ve installed woosidebars and i can see the sidebar in the product page, not in the product page (act. is /product/my-product/)
How i can show the sidebar in the product page?
Thanks in advance.
Fabio