font size product price

[sukiya]

hi everybody,

this question concerns the font size of the product prices.

I looked at the demo of the neighborhood theme – see the attachment.
I like the price font sizes on this page.

1.) is it possible to change the font sizes or even to put 2 different sizes like it occurs in the neighborhood theme page?

2.) in my case the font of the reduced price seems to be bold instead of regular.
is it possible to change the bold into a regular style?

thanks a lot and best wishes,
Lisa

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,
Add this code below to your custom css.

.product span.amount:first-child {
font-size: 14px!important;
}
.product span.amount:nth-child(2) {
font-weight: normal;
}

-Rui

[sukiya]

Hi Rui,

thanks for your help!

I added those codes.
please look at the attachments how it looks like now.

there are some more questions about this issue, which I wrote in the attachments.

thanks a lot for your advices.
I am looking forward to hear from you.

best wishes,
Lisa

Attachments:

You must be logged in to view attached files.

[sukiya]

Hi Rui,

something else which I saw right now is, that after those changes also
the font size of a normal single product now is much to small.

please see the attachment.

best wishes, Lisa

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Remove Rui’s previous code and add this:

.product .price del {
  font-size: 0.7em;
  margin-bottom: 6px;
}
.woocommerce div.product span.price ins, .woocommerce div.product p.price ins {
  font-weight: normal;
}

To change the variation price format to ‘from price’ then add this to your functions.php file

<?php
// Use WC 2.0 variable price format
add_filter( 'woocommerce_variable_sale_price_html', 'wc_wc20_variation_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wc_wc20_variation_price_format', 10, 2 );
function wc_wc20_variation_price_format( $price, $product ) {
$min_price = $product->get_variation_price( 'min', true );
$max_price = $product->get_variation_price( 'max', true );
if ($min_price != $max_price){
$price = sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $min_price ) );
return $price;
} else {
$price = sprintf( __( '%1$s', 'woocommerce' ), wc_price( $min_price ) );
return $price;
}
}
?>

– Kyle

[sukiya]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

It seems discounted variations were not considered in that code, you’ll have to leave it out for now until they update the code.

– Kyle

[sukiya]

Hi Kyle,

are you talking about a woocommerce update?

do you also see no possibility to accommodate those font sizes (see the attachment)?

best wishes,
Lisa

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Sure, add this:

.woocommerce ul.products li.product .price del {
  font-size: 13px;
}
.product .single_variation .price del {
  font-size: 1em;
}

– Kyle

[sukiya]

Hi Kyle,

thanks a lot.

it looks better now.

in the end I removed the codes in the functions.php again – because of your advice.
maybe in the future it will work better. (after an update)

so one last question concerning this theme.
how can I change this font size (see the attachment)?

best wishes,
Lisa

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

No problem, add this:

.product .single_variation .price del {
  font-size: 22px;
}
.product .single_variation .price ins {
  font-size: 27px;
}

– Kyle

[sukiya]

Hi Kyle,

thanks a lo! great!

of course there is one more question:

I added this to my CSS:
.product_price {font-size: 10px !important;}

I thought its to change the font size in the product overview. but nothing happens.

so I don’t know how to change those font sizes and font weight of the products in the product overview page (see the attachment).

thanks a lot and
best wishes,
Lisa

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Add this:

.woocommerce ul.products li.product .price ins {
  font-weight: 400;
  font-size: 17px;
}

Hopefully that is all..

– Kyle

[sukiya]

Hi Kyle,

thanks!
this works for the new price, but not for the normal standard price.
I would like to change both.

thanks a lot and best wishes,
Lisa

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

ins = discounted price
del = old price

So add:

.woocommerce ul.products li.product .price del {
  font-weight: 400;
  font-size: 17px;
}