A todos nos gustan las ofertas. No lo podemos evitar, cuando el cerebro sabe cree que tiene una oportunidad de conseguir algo por debajo de su valor no puede resistirse: tú miras al producto y el producto te mira a ti, ya me entiendes. Ése es el poder del cartel ¡Oferta!

Y sin embargo no siempre se obtiene de él todo el potencial que tiene. Así que en esta entrada vamos a ver todas las cosas que podemos hacer con él. Vamos a cambiarle el texto, el aspecto, a eliminarlo, a cambiarlo de lugar o a sustituirlo por una imagen, sin utilizar plugins. ¿Preparado para personalizar el cartel ¡Oferta! de WooCommerce?

Cambiar el texto del letrero Oferta

Seamos sinceros: eso de ¡Oferta! puede mejorarse, y mucho. Entre otras cosas, porque ya está muy visto y los usuarios tienden a ignorar la información repetida (de nuevo, nuestro cerebro está programado para ello).

Afortunadamente ese texto no es inamovible y podemos personalizarlo como nos dé la real gana. Algo como ¡OMG QUÉ PRECIO! no sé si será más afortunado, pero desde luego llamará más la atención del cliente.

El cambio es bastante sencillo, basta con un par de líneas de código que harán la magia:

add_filter( 'woocommerce_sale_flash', function( $texto ) {
	return str_replace( __( 'Sale!', 'woocommerce' ), 'Mi propio texto', $texto );
}, 10, 1 );

Así de fácil. Si no sabes dónde añadir este código, échale un vistazo a esta entrada, te será de ayuda:

Por supuesto, ahí no sólo puedes poner texto: los iconos ASCII y en general los símbolos soportados por texto plano, como ☀ o ▶ o ❤ (sin abusar) pueden ayudar mucho a captar la atención. Eso sí, si lo que necesitas es algo más avanzado, como mostrar la cantidad ahorrada en cada producto (algo así como ¡TE AHORRAS 3€!) tendrás que recurrir a un plugin como éste (los suscriptores de mis plugins podéis descargarlo gratuitamente desde el área de miembros):

Personalizar el aspecto del cartel de Oferta

Como habrás visto en la imagen de arriba, en algunas plantillas el aspecto dista mucho de ser perfecto. En especial las plantillas que quieren hacer que el cartel sea redondo, ya que un cambio en el texto hace que quede feamente alargado (y a veces ese «cambio en el texto» significa simplemente aplicar la traducción al español, pasando a ser ¡OFERTA! en lugar de SALE!

Por suerte, como decía antes, esto también podemos modificarlo a nuestro antojo: color y estilo del texto (negrita, mayúsculas, subrayado), forma y color del fondo. La parte no tan afortunada es que esta vez no basta con un par de líneas de código, y tendrás que saber algo de CSS para poder personalizarlo 100% a medida, ya que es así como se hace.

Ese texto contiene la clase onsale, así que mostrará los estilos dictados por cualquier directiva que apliquemos a esta clase. Aquí va la misma plantilla de la imagen de arriba, con unos pocos retoques (los modificadores !important nos ayudarán a dar prioridad a nuestras directivas sobre las definidas por el tema):

Como ves, hay alguna mejora respecto a lo que la plantilla nos estaba haciendo. Para este ejemplo he usado los siguientes estilos:

.onsale {
	border-radius:3px!important;
	padding:8px 10px!important;
	min-height:initial!important;
	line-height:initial!important;
	font-size:13px!important;
	background-color:#ef8193!important;
}

Puedes darle aún otra vuelta de tuerca introduciendo efectos CSS3 (transparencias, movimientos) como explico en esta otra entrada:

Eliminar por completo el cartel de Oferta

En algunas ocasiones lo que se necesita es vender los productos a precios con descuento, pero sin resaltar el hecho de que el precio ha sido rebajado. Incluso en según qué tiendas podría ser contraproducente, ya que el mostrar el letrero ¡OFERTA! en prácticamente todos los productos de la tienda, además de producir cansancio en el usuario, puede dar una imagen pobre de la calidad de los productos (aunque no necesariamente tenga que ser así).

En ese caso, como decía, puede ser buena idea hacer que este cartel no se muestre. Y hay no una, sino dos formas de conseguirlo: mediante un pequeño código o mediante CSS. A tu elección queda elegir la que más rabia te dé.

Para hacerlo mediante código utilizaremos un snippet muy similar al que hemos usado en el primer ejemplo de esta entrada, sólo que esta vez, en vez de devolverle nuestro texto personalizado, le devolveremos un false para que simplemente no haya elemento. Así:

add_filter( 'woocommerce_sale_flash', function( $texto ) {
	return false;
}, 10, 1 );

O, en su versión aún más sencilla:

add_filter( 'woocommerce_sale_flash', '__return_false' );

También, como te decía, es posible hacerlo con CSS. Muy fácil:

.onsale {
        display:none;
}

Cambiar el cartel de oferta por una imagen personalizada

Si lo que queremos es personalización al 100% sin tener que estar escribiendo código CSS hasta que nos duelan las manos siempre podemos recurrir a una imagen (aunque ten presente que el código siempre es más ligero que cargar una imagen).

Hacerlo es muy fácil sabiendo que el hook que he utilizado ya un par de veces en estos ejemplos (woocommerce_sale_flash) lo que devuelve es HTML, así que basta hacer que devuelva la etiqueta img que nos interese. Por ejemplo:

add_filter( 'woocommerce_sale_flash', function( $texto ) {
	$imagen = '<img src="https://tuweb.com/wp-content/uploads/oferta.jpg" alt="Oferta" height="50" width="50" class="oferta">';
	return $imagen;
}, 10, 1 );

Si haces esto recuerda las buenas prácticas: siempre añadir los parámetros alt, height y width, con más razón teniendo en cuenta que va a ser una etiqueta que se repita en un buen número de ocasiones en la web.

Aún así, en función de tu plantilla es posible que tengas que usar algo de CSS para ajustar la posición, alineación o incluso el tamaño de la imagen (para todo eso le hemos añadido una clase específica), pero deberían ser sólo ajustes menores.