Cómo dar formato a los precios de WooCommerce

Por motivos de diseño, presentación o para ser coherentes con la tienda o el tema de la marca, es posible que a menudo queramos mostrar nuestros precios en diferentes formatos. En esta publicación, aprenderá cómo dar formato a los precios de WooCommerce utilizando la opción Configuración y el Editor de código.

La publicación cubre los siguientes tres puntos:

1. Sustitución de separadores decimales
2. Sustitución de mil separadores
3. Dar formato a los precios para aplicar estilos como negrita, cursiva o subrayado

1. Sustitución de separadores decimales:

A menudo, puede tener valores decimales en los precios de sus productos. Esto es bastante común en el caso de una tienda de comestibles en línea donde los precios están determinados por el peso de las verduras:

En muchos países, el separador decimal se representa con un punto (.). Sin embargo, esto no es cierto para muchos otros países como España, Sudáfrica, Brasil, Suecia, China y otros 70 países donde el separador decimal es una coma.

Países como Brasil usan el punto (.) a veces para separar miles. Por ejemplo, doce mil quinientos no se escribe como “12 500” sino como “12 500” o incluso “12 500”.

Por lo tanto, los precios deben mostrarse de manera diferente al diseñar una tienda para una audiencia o nacionalidad en particular. Veremos cómo podemos reemplazar los puntos decimales por comas o espacios en WooCommerce.

Hay dos formas de hacerlo, ya sea directamente a través de la configuración de WooCommerce o a través del editor de código.
Cambiar el separador decimal a través de la configuración de WooCommerce
Pase el mouse sobre la etiqueta WooCommerce en su panel de WordPress y haga clic en Configuración. En WooCommerce->Configuración, la pestaña General muestra lo siguiente a medida que se desplaza hacia abajo:

Aquí, puede cambiar el valor de "Separador decimal" de "." a ","

Al hacer esto y hacer clic en "Guardar cambios", se mostrará el punto decimal como una coma:

De esta manera, puede utilizar cualquier separador de su elección.
Cambiar el separador decimal a través del editor de código
Si bien WooCommerce proporciona una forma directa de cambiar el separador decimal, es útil aprender a hacerlo a través del código. En este ejemplo, demostraremos cómo reemplazar el punto decimal con un espacio usando el editor de código.

Hay un pequeño fragmento de código que puede insertar en el archivo functions.php de su tema secundario para hacer precisamente esto. (Para saber por qué editamos las funciones.php del tema secundario y no directamente el archivo functions.php, lea esta publicación).

Fragmento de código:

 add_filter('precio_wc', 'woo_hide_punto_decimal', 10, 4);
function woo_hide_decimal_point( $retorno, $precio, $argumentos, $precio_sin formato) {
$unidad = intval( $precio );
$decimal = sprintf( '%02d', ( $precio-$unidad ) * 100 );
return sprintf('%s %d %s', get_woocommerce_currency_symbol(), $unidad, $decimal);
}

Y el resultado es que el punto decimal se elimina y se reemplaza por un espacio:

Nota: El código funcionará solo después de configurar el separador decimal en "." en WooCommerce->Configuración.

Puede reemplazar el espacio con una coma de manera similar cambiando el código solo un poco.

 add_filter('wc_price', 'woo_replace_decimal_point', 10, 4);
function woo_replace_decimal_point ($return, $price, $args, $unformatted_price) {
$unidad = intval( $precio );
$decimal = sprintf( '%02d', ( $precio-$unidad ) * 100 );
return sprintf('%s %d,%s', get_woocommerce_currency_symbol(), $unidad, $decimal);
} 

Por qué es mejor usar fragmentos de código en lugar de WooCommerce->Configuraciones para reemplazar el separador decimal:

Usar el editor de código en lugar de WooCommerce->Configuración para reemplazar puntos decimales tiene muchas ventajas.

Una es que puede formatear el precio de la manera que desee. Si observa en la imagen de arriba, el precio tiene un espacio después del símbolo de la moneda. Este espacio falta en la primera captura de pantalla de esta publicación donde el punto decimal se reemplazó a través de WooCommerce-> Configuración.

Otra ventaja es cuando desea que estos cambios se realicen solo para un producto específico y no para todos los productos de su tienda. Usar el editor de código le brinda esa flexibilidad.

Mediante el uso de fragmentos de código, también puede mostrar la parte decimal del precio en diferentes estilos insertando etiquetas HTML como <b>,<u>,<i>,<sup>,<sub> y muchas más.

Ejemplo: Agregar un subrayado a la parte decimal del precio.

 add_filter('wc_price', 'woo_format_decimal_value', 10, 4); 
función woo_format_decimal_value ($return, $price, $args, $unformatted_price) { 
$unidad = intval( $precio ); 
$decimal = sprintf( '%02d', ( $precio-$unidad ) * 100 ); 
return sprintf('%s %d.<u>%s</u>', get_woocommerce_currency_symbol(), $unidad, $decimal); 
}

El fragmento de código anterior, cuando se inserta en el archivo functions.php del tema secundario, agrega un subrayado a la parte decimal del precio:

Puede usar otras etiquetas HTML de la misma manera. Si desea saber cómo puede mostrar el valor decimal como superíndice o subíndice, lea esta publicación.

2. Sustitución de mil separadores:

Al igual que los separadores decimales se muestran de manera diferente en algunos países, lo mismo ocurre con los separadores de miles.

Por ejemplo, en países como Brasil, Sudáfrica o España, los separadores de miles se indican con un espacio o un punto/punto. En estos países, trece mil quinientos podría escribirse como 13 500 o 13 500

Cuando diseñe su tienda para esta audiencia, debe asegurarse de editar el separador de miles en consecuencia.

Al igual que los separadores decimales, hay dos formas de hacerlo, ya sea a través de WooCommerce->Configuración o mediante el editor de código.
Cambiar el separador de mil a través de la configuración de WooCommerce
Pase el mouse sobre la etiqueta WooCommerce en su panel de WordPress y haga clic en Configuración. En WooCommerce->Configuración, la pestaña General muestra lo siguiente a medida que se desplaza hacia abajo:

Cambiar el valor en el cuadro de texto del separador de miles a un espacio en lugar de una coma (","), cambiará la forma en que se muestra el separador de miles. Tenga en cuenta que debe ingresar un espacio en este cuadro. Simplemente borrar la coma no dará como resultado que el separador de miles cambie a un espacio.

Haga clic en "Guardar cambios" y visualice el producto:

Puede ver que ahora hay un espacio en lugar del separador de mil.

Para evitar cualquier confusión, puede establecer los lugares decimales como "0" a través de WooCommerce->Configuración de precios en los que no hay valor decimal:

Después de ingresar el número de decimales aquí como "0", haga clic en "Guardar cambios" y vea el producto nuevamente:

Cambiar el separador de mil a través del editor de código

De manera similar, podemos cambiar el separador de miles usando fragmentos de código. Como se mencionó anteriormente en la sección de separadores decimales, usar el editor de código siempre tiene más ventajas, ya que podemos personalizar o diseñar el precio de la manera que queramos, e incluso para un producto específico, si no para toda la tienda.

Intentemos ahora cambiar el separador de miles a un punto (.) usando un fragmento de código.

Nota: un requisito previo para esto es que debe dejar el cuadro de separación de miles en blanco en WooCommerce-> Configuración. Tampoco espacios.

 add_filter('wc_price', 'woo_format_thousand_separator', 10, 4); 
función woo_format_thousand_separator ($return, $price, $args, $unformatted_price) 
{ 
  $formatted_price=number_format($price,0,' ','.'); 
  return sprintf('%s %s', get_woocommerce_currency_symbol(), $formatted_price); 
}

La función number_format es una función PHP incorporada que acepta 4 argumentos:

1. El número o en nuestro caso, el precio.
2. Número de lugares decimales. Lo hemos establecido en 0 porque no deseamos mostrar ningún valor decimal.
3. El separador decimal que desea utilizar. Hemos establecido esto en un valor en blanco.
4. El separador de mil. Hemos establecido esto en un punto (.).

Este fragmento de código, cuando se agrega al archivo functions.php de su tema secundario, mostrará el separador de miles como un punto o punto (.) como se ilustra en la siguiente captura de pantalla:

3. Dar formato a los precios de WooCommerce:

Ahora que sabe cómo formatear valores decimales y separadores de miles, lo mismo se aplica a los precios en general. Si bien no puede formatear directamente estos valores usando la opción Configuración, puede hacerlo usando el Editor de código haciendo ligeras modificaciones al código anterior.

Ejemplo: Escribir el precio del producto en cursiva.

En circunstancias predeterminadas, el precio del producto se muestra de la siguiente manera:

¿Qué sucede si desea agregar un estilo a esto, por ejemplo, escribirlo en cursiva?

Puede lograr esto haciendo ligeras modificaciones a los fragmentos de código anteriores.

Simplemente copie este código en el archivo functions.php de su tema hijo:

 add_filter('wc_price', 'woo_format_price_italics', 10, 4); 
función woo_format_price_cursiva ($return, $price, $args, $unformatted_price) { 
$unidad = intval( $precio ); 
$decimal = sprintf( '%02d', ( $precio-$unidad ) * 100 ); 
return sprintf( '<i>%s %d.%s</i>', get_woocommerce_currency_symbol(), $unidad, $decimal); 
}

Al hacer esto, se mostrará el precio, junto con el punto decimal, en cursiva:

Un ligero cambio en el fragmento de código también evitará que se muestre la parte decimal:

 add_filter('wc_price', 'woo_format_price_italics', 10, 4); 
función woo_format_price_cursiva ($return, $price, $args, $unformatted_price) { 
$unidad = intval( $precio ); 
return sprintf( '<i>%s %d</i>', get_woocommerce_currency_symbol(), $unidad); 
}

Como puede ver, puede ver el precio en cursiva aquí, sin la parte decimal:

Estudiar el fragmento le permitirá formatear fácilmente los precios de WooCommerce a su manera.