Change font size and color in php echo

Question

I have to change the size and color of the word "PRECIO DIGITAL" and also the price value. The php code is this:

add_action( 'woocommerce_single_product_summary', "show_digital_price", 9 );
function show_digital_price(){
$precio_digital = get_field('precio_digital');
if($precio_digital) {
echo '<b>PRECIO DIGITAL: </b>';
echo $precio_digital;
echo "<br />";
}
}

I've tried adding div style like this:

echo '<div style='font-size:1.25em;font-color:#0e3c68'>PRECIO DIGITAL: </b>';

but it doesn't work. Moreover I don't know how to change the size and color of the price itself.

Take a look to the URL where I want to change it (I'd like have it the same font size and color of the normal price): https://www.editorialufv.es/catalogo/claves-de-seguridad/

Any solution?

Solution

use below code for color and div

<?php
add_action( 'woocommerce_single_product_summary', 'show_digital_price', 9 );
function show_digital_price(){
    $precio_digital = get_field('precio_digital');
    if($precio_digital) {
        echo '<div style="font-size:1.25em;color:#0e3c68;font-weight:bold;">PRECIO DIGITAL: <span style="font-size:1.25em;color:#0e3c68;font-weight:bold;">'.$precio_digital.'</span></div>';
        //echo $precio_digital;
        echo "<br />";
    }
}
?>

Comments

[Stefano]

Yeah it works but it doesn't change the size and color of the price itself. Moreover, is there a way to have the same font style as the normal price? Take a look to this URL: editorialufv.es/catalogo/radio-5

[Stefano]

Great! Now it looks almost perfect? Why the prices don't look the same? How can I add a bold type font? The font-size is the same and also the color... but they look pretty different

[Shital Marakana]

use ' font-weight:bold; ' . please check updated answer.

[Stefano]

Great! Perfect! In order to have the same size the font is 1.05em and also the word "precio digital" should be bold. Please update the answer and I'll approve.