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

¿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

Mejores addons para suscripciones WooCommerce

Compara los mejores addons para suscripciones WooCommerce y elige pagos, membresías y automatizaciones compatibles con…

hace % días

Mejores addons para suscripciones WooCommerce

Compara los mejores addons para suscripciones WooCommerce y elige pagos, membresías y automatizaciones compatibles con…

hace % días

Desarrollo de plugins a medida WordPress

El desarrollo de plugins a medida WordPress resuelve pagos, reservas y flujos propios con integración…

hace % días

Plugin RedSys WooCommerce: cobros sin errores

El plugin RedSys WooCommerce conecta tu tienda con el banco, reduce errores de cobro y…

hace % días

Cómo resolver un rechazo SIS en WordPress

Aprende a resolver rechazo SIS en WordPress: identifica el código, revisa RedSys, pedidos y firmas…

hace % días