El campo que añadiremos en la sección de carrito y checkout de Woocommerces podría parecer algo decorativo, pero, en realidad es un campo psicológico que puede ayudar a que los usuarios con dudas se decidan de una vez a realizar la compra.
La importancia de añadir el mensaje de ahorro
Cuando vemos el valor a pagar estamos consientes de cuanto nos vamos a gastar y cuanto representa eso es nuestra tarjeta de crédito o cuenta bancaria, y al ver el valor final de la compra puede que nos desanimemos.
Si vemos cuanto nos estamos ahorrado por los descuentos, recordamos que los productos que añadimos estaban en oferta y por esa razón los queremos comprar.
Este campo del ahorro puede a simple vista no parecer tan importante, pero como ya sabemos a fondo lo que implica, no está de más colocarlo ¿Cierto?
Añadiendo el código PHP necesario
A continuación te dejo el código que como siempre, debes añadir a tu child theme en functions.php o utilizar el plugin Code Snippets
La mejor opción para añadir código PHP adicional a tu WordPress, mayormente lo utilizo en proyectos en los que añado muchas funciones PHP para ser más organizado.
/**
* Mensaje personalizado de ahorro en carrito y checkout
*/
function save_message() {
$savings = 0;
$regular = 0;
/*Recorremos todos los productos en el carrito*/
foreach ( WC()->cart->get_cart() as $key => $cart_item ) {
$product = $cart_item['data'];
if ( $product->is_on_sale() ) {
$savings += ( $product->get_sale_price() * $cart_item['quantity']);
$regular += ( $product->get_regular_price() * $cart_item['quantity']);
}
}
/*Si hay descuentos mostramos el mensaje*/
if ( ! empty( $savings ) ) {
$savings = $regular-$savings;
?>
<tr class="save_message">
<th><?php _e( '<p>En esta compra <b>ahorras</b></p>' ); ?></th>
<td><?php echo sprintf( __( '%s' ), wc_price( $savings ) ); ?></td>
</tr>
<?php
}
}
/*Añadimos el mensaje a los hooks de Woocommerce en la página de carrito y checkout*/
add_action( 'woocommerce_cart_totals_before_order_total', 'save_message' );
add_action( 'woocommerce_review_order_before_order_total', 'save_message' );
Dándole estilos a tu mensaje de ahorro
El siguiente código CSS es opcional, pero ayuda a que el mensaje se destaque:
.save_message{
background: #f0f7ff; /* Color de Fondo */
color: #2196f3; /*Color del Texto*/
}
.save_message p{
font-weight:400;
margin:0;
line-height:1.3em;
}
.save_message td{
vertical-align: middle !important;
}
