Porcentaje de descuento del producto en vez del texto de «Oferta» en Divi

Las rebajas son una gran estrategia de marketing. Al ofrecer un descuento, a menudo puntual, las rebajas animan a los clientes a tomar decisiones de compra rápidas.

Si tienes una tienda WooCommerce, sabrás que la insignia de oferta de WooCommerce es fácil de configurar. Todo lo que tienes que hacer es introducir un precio de venta en la configuración del producto, y se mostrará automáticamente una insignia que diga «¡Oferta!».

La insignia de oferta de WooCommerce es eficaz para alertar a los clientes sobre un descuento, pero como es el ajuste por defecto de WooCommerce, se ve un poco recargado y trillado.

¿No sería mejor sustituir completamente el texto de «¡Oferta!» por un valor del porcentaje de descuento de cada producto?. Así cada producto tendrá su propio valor de oferta, se distinguirá entre los demás y serán más llamativos los descuentos.

Para este tutorial para Divi, tendrás que añadir unas pocas líneas de código a los archivos functions.php y style.css. Este fragmento de código es rápido y fácil de configurar; tendrás una insignia de descuento de aspecto elegante en tus productos de WooCommerce en poco tiempo.

Sustituir texto de oferta por el porcentaje

Para la primera parte tenemos que crear una función en PHP que sustituya los manidos textos de oferta por el porcentaje de descuento de cada producto. El código sería este:

/* REEMPLAZAR TEXTO DE OFERTA CON PORCENTAJE */
add_filter( 'woocommerce_sale_flash', 'ayudawp_porcentaje_oferta' );
function ayudawp_porcentaje_oferta($text) {
global $product; 
$stock = $product->get_stock_status();
$product_type = $product->get_type();
$sale_price = 0;
$regular_price = 0;
if($product_type == 'variable'){
$product_variations = $product->get_available_variations();
foreach ($product_variations as $kay => $value){
if($value['display_price'] < $value['display_regular_price']){
$sale_price = $value['display_price'];
$regular_price = $value['display_regular_price'];
}
}
if($regular_price > $sale_price && $stock != 'outofstock') {
$product_sale = intval(((intval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
if ($product_sale > 5 ) {
return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe017;"></span> ' . esc_html($product_sale) . '% DESCUENTO</span>';
}
if ($product_sale <= 5 ) {
return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe017;"></span>Sale!</span>';
}
}else{
return '';
}
}else{
$regular_price = get_post_meta( get_the_ID(), '_regular_price', true);
$sale_price = get_post_meta( get_the_ID(), '_sale_price', true);
if($regular_price > 5) {
$product_sale = intval(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe017;"></span> ' . esc_html($product_sale) . '% DESCUENTO</span>';
}
if($regular_price >= 0 && $regular_price <= 5 ) {
$product_sale = intval(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe017;"></span>¡REBAJADO!</span>';
}
else{
return '';
}
}
}

Este código debes añadirlo al final del archivo functions.php del tema hijo de Divi.

Cuando guardes los cambios tus textos de oferta habrán cambiado, y ahora se mostrará el porcentaje de descuento de cada producto en particular.

¡Fantástico! ¿verdad?

Esto funcionará en todas partes, tanto en la página del catálogo de productos como en los módulos de tienda de Divi e incluso en la página de cada producto individual.

Así estaría conseguido el resultado, pero podemos mejorarlo aún más si añadimos algo de estilos a las ofertas ¿te animas?

Añadir estilos al porcentaje de descuento

Un modo sencillo de mejorar el aspecto de la insignia de descuento en porcentaje, sin complicarnos, es aprovechar los iconos que ya trae Divi y añadir alguno a nuestra insignia de descuento para hacer que destaque aún más.

De hecho el código PHP anterior ya viene preparado para ello, cuando definimos el valor data-icon, que mostrará por defecto el icono de la típica etiqueta de precios, solo falta crear un poco de CSS que lo muestre con estilo, por ejemplo:

/* Iconos en insignias de descuento */
.sale-icon[data-icon]:before {
font-family: 'ETmodules';
content: attr(data-icon);
speak: none;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

Este código puedes añadirlo a la sección de CSS personalizado de las opciones del tema Divi, en la administración de tu sitio, o si lo prefieres en Apariencia → Personalizar → CSS adicional. Funcionará en cualquier de estos sitios. De hecho si lo añades en uno se ve en el otro.

Lo que obtenemos es lo siguiente:

Cambiando el icono

Ahora ¿no te gusta ese icono o prefieres poner otro? ¡No hay problema!

El CSS lo dejas igual, solo tienes que modificar los valores de data-icon del primer código, del PHP. Solo tienes que buscar en el código las 4 ocasiones en que aparece lo siguiente: data-icon="" y sustituir el valor del icono por otro, que puedes encontrar en la página oficial de los iconos de Divi. Es muy fácil de usar, buscas el icono que te guste y copias el unicode que hay justo debajo del icono.

Por ejemplo, para sustituir el icono de la etiqueta que hemos puesto en el código  ( por el icono del corazón () habría que cambiar un código Unicode por el otro que elijas, quedando así en las 4 ocasiones en que aparece en el código: data-icon="".

El código PHP completo resultante (con los unicode cambiados en rojo, para que los identifiques rápido) quedaría así:

/* REEMPLAZAR TEXTO DE OFERTA CON PORCENTAJE */
add_filter( 'woocommerce_sale_flash', 'ayudawp_porcentaje_oferta' );

function ayudawp_porcentaje_oferta($text) {
global $product; 
$stock = $product->get_stock_status();
$product_type = $product->get_type();
$sale_price = 0;
$regular_price = 0;
if($product_type == 'variable'){
$product_variations = $product->get_available_variations();
foreach ($product_variations as $kay => $value){
if($value['display_price'] < $value['display_regular_price']){
$sale_price = $value['display_price'];
$regular_price = $value['display_regular_price'];
}
}
if($regular_price > $sale_price && $stock != 'outofstock') {
$product_sale = intval(((intval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
if ($product_sale > 5 ) {
return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe089;"></span> ' . esc_html($product_sale) . '% DESCUENTO</span>';
}
if ($product_sale <= 5 ) {
return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe089;"></span>Sale!</span>';
}
}else{
return '';
}
}else{
$regular_price = get_post_meta( get_the_ID(), '_regular_price', true);
$sale_price = get_post_meta( get_the_ID(), '_sale_price', true);
if($regular_price > 5) {
$product_sale = intval(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe089;"></span> ' . esc_html($product_sale) . '% DESCUENTO</span>';
}
if($regular_price >= 0 && $regular_price <= 5 ) {
$product_sale = intval(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe089;"></span>¡REBAJADO!</span>';
}
else{
return '';
}
}
}

Y el resultado visible así de mono…