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

Entradas recientes

RedSys para Contact Form 7 ahora muestra el justificante y el motivo del rechazo en la página de gracias

Ya está disponible la versión 2.2 de Contact Form 7 – Integración con RedSys, y…

hace % días

¿Qué aporta la integración de Bizum y métodos similares en el proceso de pago?

El comercio electrónico español, que se encuentra en pleno crecimiento y transformación, vive actualmente un…

hace % días

Pagos recurrentes en Contact Form 7: suscripciones con RedSys, paso a paso

Hasta ahora, la integración de Contact Form 7 con RedSys solo sabía cobrar pagos únicos:…

hace % días

Cuotas personalizadas con RedSys

El pago fraccionado de RedSys para WooCommerce lleva un tiempo permitiendo dividir el precio de…

hace % días

Contact Form 7 – Integración con RedSys ya habla catalán, gallego y euskera

Ya está disponible la versión 1.24 de Contact Form 7 - Integración con RedSys, y…

hace % días

Calendario de pagos a medida en WooCommerce Subscriptions: cobra en las fechas que tú decidas

Hasta ahora, cobrar una suscripción en WooCommerce significaba aceptar una regla muy simple: eliges un…

hace % días