Cómo mostrar "Usted ahorra x%" por debajo de los precios de venta de productos simples y variables en WooCommerce
Publicado: 2019-04-03Todos sabemos cómo los descuentos atraen a los clientes y aumentan las ventas. Pero demostrar que está vendiendo un artículo por un precio menor no es suficiente en estos días, ya que todos los minoristas y sitios web de comercio electrónico ofrecen descuentos al mismo tiempo. Cuando solo se muestran los precios antiguos y nuevos, el cliente debe hacer los cálculos para calcular la cantidad que realmente está ahorrando. Una mejor manera de manejar esto es mostrar el porcentaje de la cantidad que el cliente ahorra cuando realiza esa compra. Esto les da una mejor idea y una manera más fácil de decidir si hacer esa compra. Veamos cómo puede mostrar "Usted ahorra x%" junto a los precios de venta para productos simples y variables en WooCommerce.
Cómo mostrar el % de ahorro por debajo de los precios de venta para productos simples
Mostrar el porcentaje de la cantidad ahorrada es fácil para productos simples una vez que se conoce el precio regular y el de oferta. En casos normales, estos precios para un producto simple se muestran de la siguiente manera:
Al agregar el código a continuación al archivo functions.php de su tema secundario, se mostrará el mensaje "Usted ahorra x%" debajo del precio del producto simple, para que el usuario tenga una idea inmediata de qué tan bueno o malo es el trato.
función ts_you_save() {
$producto global;
if( $producto->es_tipo('simple') || $producto->es_tipo('externo') || $producto->es_tipo('agrupado') ) {
$precio_regular = get_post_meta( $producto->get_id(), '_precio_regular', true);
$precio_de_venta = get_post_meta( $producto->get_id(), '_precio_de_venta', true );
if( !vacío($venta_precio) ) {
$cantidad_ahorrada = $precio_regular - $precio_oferta;
$ símbolo_de_moneda = get_woocommerce_símbolo_de_moneda();
$porcentaje = ronda( ( ( $precio_regular - $precio_oferta ) / $precio_regular ) * 100 );
?>
<p><b>Guardas: <?php echo number_format($porcentaje,0, '', '').'%'; ?></b></p>
<?php
}
}
}
add_action('woocommerce_single_product_summary', 'ts_you_save', 11);En este fragmento de código, hemos agregado una función ts_you_save() al gancho incorporado de WooCommerce woocommerce_single_product_summary , que apunta al área debajo del título del producto. La función ts_you_save() identifica el tipo de producto y calcula el porcentaje de la cantidad ahorrada si el producto está en oferta. Al agregar algo de CSS, puede imprimir esto de la manera que desee:
Si desea mostrar la cantidad ahorrada junto con el porcentaje, puede modificar el mismo fragmento de código solo un poco de la siguiente manera:
función ts_you_save() {
$producto global;
if( $producto->es_tipo('simple') || $producto->es_tipo('externo') || $producto->es_tipo('agrupado') ) {
$precio_regular = get_post_meta( $producto->get_id(), '_precio_regular', true);
$precio_de_venta = get_post_meta( $producto->get_id(), '_precio_de_venta', true );
if( !vacío($venta_precio) ) {
$cantidad_ahorrada = $precio_regular - $precio_oferta;
$ símbolo_de_moneda = get_woocommerce_símbolo_de_moneda();
$porcentaje = ronda( ( ( $precio_regular - $precio_oferta ) / $precio_regular ) * 100 );
?>
<p><b>Usted guarda: <?php echo number_format($cantidad_ahorrada,2, '.', '')." (". number_format($porcentaje,0, '', '')."%)" ; ?></b></p>
<?php
}
}
}
add_action('woocommerce_single_product_summary', 'ts_you_save', 11);La función number_format es una función PHP incorporada que acepta 4 argumentos:
- El número o en nuestro caso, la cantidad ahorrada y el porcentaje respectivamente (la función la hemos usado dos veces).
- Número de lugares decimales. Lo hemos establecido en 2 para la cantidad ahorrada y 0 para el porcentaje, ya que no deseamos mostrar ningún valor decimal para el porcentaje.
- El separador decimal que desea utilizar. Hemos establecido esto en un punto (.) para la cantidad ahorrada y un valor en blanco para el porcentaje.
- El separador de mil. Si la cantidad ahorrada supera los 1000, puede usar este argumento. Lo hemos puesto en blanco en este momento.
La cantidad ahorrada y el porcentaje ahora se mostrarán debajo del precio:
Cómo mostrar el % de ahorro por debajo de los precios de venta para productos variables
Cuando se trata de productos variables, esto se complica porque cada variación del producto puede tener un precio diferente. Por ejemplo, una camiseta puede tener un precio más alto por una talla más grande, mientras que el precio puede ser más bajo por la misma camiseta en una talla más pequeña. Para casos como estos, WooCommerce muestra el rango de precios de venta debajo del título del producto, mientras que los precios regulares y de venta de cada variación del producto se muestran arriba del botón Agregar al carrito cuando se selecciona la variación. Esto ha sido ilustrado por las siguientes imágenes:
En este caso, imprimiremos el texto "Usted ahorra" junto con el porcentaje ahorrado debajo del precio que se muestra para la variación en particular. Deberá agregar fragmentos de código a los archivos functions.php y footer.php de su tema hijo .
El siguiente fragmento de código que agregará en el archivo footer.php contiene una función que se activa cuando se cambia la variación. En nuestro caso, esto se activa cuando se selecciona o cambia la variación de tamaño usando el menú desplegable Tamaño. Esta función captura la identificación de variación particular y la envía a functions.php a través de una llamada ajax.
<script>
jQuery(documento).ready(función($) {
$('entrada.variation_id').cambio( función(){
if( '' != $('entrada.variation_id').val() ) {
var var_id = $('entrada.variation_id').val(); // Su id de variación seleccionada
$.ajax({
url: "https://<your_woocommerce_site_url>/wp-admin/admin-ajax.php",
datos: {'acción':'ts_calc_percentage_saved','vari_id': var_id} ,
éxito: función (datos) {
si (datos>0)
{
$( ".woocommerce-variation-price" ).append( "<p>Guardas: "+data+"%</p>");
}
},
error: función (error lanzado) {
consola.log(errorLanzado);
}
});
}
});
});
</script>
Debe reemplazar <your_woocommerce_site_url> con la URL base de su sitio web de WooCommerce.
El siguiente fragmento de código que agregará en el archivo functions.php contiene una función ts_calc_percentage_saved que obtiene el precio regular y el precio de venta del producto según la identificación de variación, calcula el porcentaje y lo devuelve a la función ajax en el pie de página. archivo php.
//Así es como enganchas una función llamada por ajax, en WordPress
add_action("wp_ajax_ts_calc_percentage_saved", "ts_calc_percentage_saved");
//La siguiente función se llama a través de un script ajax en footer.php
función ts_calc_percentage_saved(){
// El $_REQUEST contiene todos los datos enviados a través de ajax
si ( isset($_REQUEST) ) {
$porcentaje=0;
$variation_id = sanitize_text_field($_REQUEST['vari_id']);
$producto_variable = wc_get_product($variation_id);
$precio_regular = $producto_variable->get_precio_regular();
$precio_de_venta = $producto_variable->get_precio_de_venta();
if( !vacío($venta_precio) ) {
$cantidad_ahorrada = $precio_regular - $precio_oferta;
$ símbolo_de_moneda = get_woocommerce_símbolo_de_moneda();
$porcentaje = ronda( ( ( $precio_regular - $precio_oferta ) / $precio_regular ) * 100 );
}
morir ($porcentaje);
}
}La función sanitize_text_field() es una función de WordPress que ayuda a desinfectar la entrada que recibimos del lado del cliente.
Así, ahora verás “Ahorras”, junto con el porcentaje de importe ahorrado, debajo del precio de la variación.
Puede diseñar esto como desee, dentro de la función ajax en sí, agregando HTML y CSS dentro de la función de agregar en esta línea:
$( “.woocommerce-variation-price” ).append( “<p>Guardas: “+data+”%</p>”);
Muestre el % de ahorro debajo del título del producto en lugar de arriba del botón Agregar al carrito para productos variables
Si lo desea, puede mostrar el texto You Save junto con el porcentaje ahorrado debajo del título del producto en lugar de encima del botón "Agregar al carrito" agregando algunos fragmentos de código más a los mencionados anteriormente.
Este fragmento de código debe agregarse al archivo functions.php de su tema secundario, además de los fragmentos de código mencionados anteriormente (en los archivos footer.php y functions.php).
//El siguiente código es para cambiar el precio
función ts_shuffle_variable_product_elements(){
si (es_producto()) {
publicación global $;
$producto = wc_get_product( $post->ID );
if ( $producto->es_tipo( 'variable' ) ) {
remove_action('woocommerce_single_variation', 'woocommerce_single_variation', 10);
add_action('woocommerce_before_variations_form', 'woocommerce_single_variation', 20);
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
add_action('woocommerce_before_variations_form', 'woocommerce_template_single_title', 10);
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
add_action('woocommerce_before_variations_form', 'woocommerce_template_single_excerpt', 30);
}
}
}
add_action('woocommerce_before_single_product', 'ts_shuffle_variable_product_elements');Lo que hace esencialmente este código es eliminar los elementos (incluido el título) y reorganizarlos de la manera que desee. El resultado es que el rango de precios se elimina y el precio de la variación se muestra cuando selecciona una variación, junto con el texto You Save debajo, como se ilustra:
