Tutoriales

Cambiar orden precios en formato rebaja en WooCommerce

En WooCommerce, cuando tenemos una oferta se muestra primero el precio original tachado y luego el precio correcto. La idea es sencilla, transmitir al cliente lo que estaba pagando antes, lo que va a pagar ahora, y hacerle una idea de lo buena que es la oferta. Así incentivamos al cliente a que compre: pensará que es una buena compra y de paso, se le incentiva a comprar ya por el tema de que pueda la oferta acabarse. Por esto, el comportamiento por defecto es este, que sería algo así:

99,99€ 49,99€

Pero esta fórmula clásica puede que no sea la que queráis implementar en vuestra tienda o en la de algún cliente. Razones hay varias, pero básicamente la más importante es mostrar primero al cliente lo que va a pagar. En un mundo en el que tantos competidores hacen tantas rebajas, a veces más importante enseñar pronto y claro el precio final en lugar de hacer el mecanismo anterior.

Si queréis que se vea primero el precio final y luego el rebajado, tachado, para que el resultado sea este otro:

49,99€ 99,99€

Si lo quieres así te dejo este código que acabo de preparar:

add_filter( 'woocommerce_format_sale_price', function( $price, $regular_price, $sale_price ){
    $formatted_regular_price = is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price;
 $formatted_sale_price    = is_numeric( $sale_price ) ? wc_price( $sale_price ) : $sale_price;

 $price = '<ins aria-hidden="true">' . $formatted_sale_price . '</ins> ';

 $price .= '<span class="screen-reader-text">';
 $price .= esc_html( sprintf( __( 'Current price is: %s.', 'woocommerce' ), wp_strip_all_tags( $formatted_sale_price ) ) );
 $price .= '</span>';

 $price .= '<del aria-hidden="true">' . $formatted_regular_price . '</del> ';

 $price .= '<span class="screen-reader-text">';
 $price .= esc_html( sprintf( __( 'Original price was: %s.', 'woocommerce' ), wp_strip_all_tags( $formatted_regular_price ) ) );
 $price .= '</span>';

    return $price;
}, 10, 3 );

Básicamente he cogido el código de la función original de WooCommerce y apoyándome en el filtro que ofrece al final woocommerce_format_sale_price, he procedido a cambiar el orden y listo. Si os fijáis, incluyo también los atributos y elementos que ayudan a los lectores de texto para hacer la web más accesible.

Nota: Hay una valoración incrustada en esta entrada, por favor, visita esta entrada para valorarla.

Almacenamos las IPs desde la que se envían las valoraciones para evitar fraudes

Francisco Javier Carazo Gil

Compartir
Publicado por
Francisco Javier Carazo Gil

Entradas recientes

¿Por qué falla Bizum en WooCommerce? 9 causas

Por qué falla Bizum WooCommerce: detecta errores de credenciales, firma, entorno y pedidos para recuperar…

hace % días

Plugin gratuito Redsys WordPress: qué revisar

Elige un plugin gratuito Redsys WordPress con criterio: compatibilidad, seguridad, configuración bancaria y límites para…

hace % días

Qué necesito para activar CECA Online en mi web

¿Qué necesito para activar CECA Online? Revisa contrato bancario, datos del terminal, seguridad, pruebas y…

hace % días

Cómo elegir una pasarela para suscripciones

Aprende a elegir una pasarela para suscripciones en WordPress: revisa recurrencia, compatibilidad, seguridad y soporte…

hace % días

Plugin Bizum WordPress para cobrar con control

Elige un plugin Bizum WordPress compatible con tu flujo de venta, configura la pasarela bancaria…

hace % días

Cómo aceptar CECA en reservas de WordPress

Aprende cómo aceptar CECA en reservas WordPress, configurar pagos seguros y confirmar cada reserva sin…

hace % días