Return to previous page

Appearance of product in lists - by Fantasia

This topic has 8 replies, 3 voices, and was last updated 8 years, 5 months ago ago by Jack Richardson

Fantasia

Participant

September 22, 2015 at 19:11

Hello,

how can I change the appearance of the product, when they are listed e.g. on homepage or category pages etc.?
Now the category of the product is the first information with bigger font size, and the name is second with a smaller size. It would be better that product name was shown first in big. I’d like to customize what informations should be shown.

Thanks,
Zsu

#88687 Copied Theme version: WooPress 4.2.2. WooCommerce version: 2.4.6.

7 Answers
Jack Richardson

Support staff

September 23, 2015 at 16:52
Hello,

You need edit the file wp-content/themes/woopress/woocommerce/content-product.php (from line 86), find the code
```
<?php if (etheme_get_option('product_page_cats')): ?>
<div class="products-page-cats">
<?php
$size = sizeof( get_the_terms( $post->ID, 'product_cat' ) );
echo $product->get_categories( ', ' );
?>
</div>
<?php endif ?>
```
and
```
<?php if (etheme_get_option('product_page_productname')): ?>
<div class="product-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<?php endif ?>
```
and swap it.

To change font size add this code in Global Custom CSS:
```
.products-page-cats a {
  font-size: 14px;
  font-weight: normal;
}
```
```
.products-grid .product-title {
  font-size: 20px;
  font-weight: 700;
}
```
Best regards,
Jack Richardson.
#88884 Copied
Fantasia

Participant

September 24, 2015 at 10:56

Hello Jack,

thank you, I’ve succesfully edited it.

Regards,
Zsu

#89027 Copied

Robert Hall

Support staff

September 24, 2015 at 11:10

Hello,

You’re welcome!

Regards,
Robert Hall.

#89030 Copied
Fantasia

Participant

November 18, 2015 at 17:31
Hello,

last time succesfully edited the list of product on my Home page, but now I noticed that on the bottom of the single product page there is a list of featured products. The product name there is still smaller than the caategory name. How can I change them?
Here’s an example product page

To change the text on Home page, I used this code in my Custom CSS:
```
.products-page-cats a {
  font-size: 14px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 1px; 
  text-decoration: none;
}
.products-grid .product-title {
  font-size: 20px;
  font-weight: 700;
}
```
I thought this will change texts on all similar places…

Thank you for your help,
Zsu
#100178 Copied
Robert Hall

Support staff

November 18, 2015 at 17:44
Hello,

I’ve added this code in Global Custom CSS. Please check.
```
.products-grid .product-title,
.product-details .product-title{
  font-size: 20px;
  font-weight: 700;
}
```
Regards,
Robert Hall.
#100181 Copied
Fantasia

Participant

November 18, 2015 at 17:49

Hello Robert,

thank you, it’s ok now! 🙂
Is it a global change? I mean: will these texts be right every time in the future, when I insert any kind of product lists with the VC Editor?

Regards,
Zsu

#100184 Copied

Jack Richardson

Support staff

November 19, 2015 at 09:01

Hello,

Yes, that code is used globally.
You shouldn’t worry about it.

Best regards,
Jack Richardson.

#100263 Copied
Viewing 8 results - 1 through 8 (of 8 total)