Poner un texto detrás o delante del precio del producto en WooCommerce

LucusHost, el mejor hosting

Mostrar que el precio incluye impuestos incluidos, que hay que sumarle los gastos de envío u otra información en ocasiones necesitamos añadirla después del precio del producto. Así que sin explicaciones teoricas vamos a hacerlo.

Añadir IVA o impuestos incluidos en el precio de los artículos

Esto lo podemos hacer directamente desde los ajustes de WooCommerce sin necesidad de meter un snippet. Desde WooCommerce > Ajustes > Impuestos, para que nos muestren este apartado deberemos activarlo en General. En esta sección deberemos poner lo que queremos aquí:

sufijo despues del precio woocommerce

Consiguiendo el siguiente resultado:

montrar iva incluido despues del precio

Añadir un texto personalizado después del precio

En este caso vamos a usar un código. Podemos añadirlo en el functions.php de nuestro tema hijo o bien desde nuestro plugin de funcionalidades como explico aquí.

function dl_mostrar_texto_despues_precio( $price ) {
		$price .= '<br><div class="gastosenvio"><br>+gastos de envío</div>'; // Modificar el texto a nuestro gusto, en este caso hay un salto de línea
		return $price;
	}
	add_filter( 'woocommerce_get_price_html', 'dl_mostrar_texto_despues_precio' ); // Para mostrarlo en el catalogo y ficha de producto
	add_filter( 'woocommerce_cart_item_price', 'dl_mostrar_texto_despues_precio' ); // Para mostrarlo en el carrito

En este caso he hecho un salto de línea para que salga debajo del precio y con una clase para personalizar el estilo a nuestro gusto mediante CSS. Obteniendo el siguiente resultado:

anadir parrafo atras del precio woocommerce

Con esto dos trucos hemos añadido texto arriba y abajo del precio. Se queda muy completo.

Añadirlo pero solo en ciertos productos

En el caso que solo queramos añadirlo en unos productos en concreto usaremos el siguiente código:

function dl_cambio_producto_sufijo_precio( $price_html, $product ) {
 if ( 1088 === $product->id ) {
 $price_html = '+Transporte productos frescos';
 }
 return $price_html;
}
add_filter( 'woocommerce_get_price_html', 'dl_cambio_producto_sufijo_precio', 10, 2 );
add_filter( 'woocommerce_cart_item_price', 'dl_cambio_producto_sufijo_precio', 10, 2 );

Para seleccionar el producto ponemos el número de su ID en lugar del 1088.

Cualquier duda sobre el tutorial, os leo en comentarios!

¡Haz clic para puntuar esta entrada!
(Votos: 5 Promedio: 4.2)
mailerlite diegol

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Curso de WooCommerce

También puedes realizar una donacion para seguir apoyando la salida de nuevos tutoriales y actualizaciones

mailerlite diegol

Reader Interactions

comentarios

  1. Alfonso says

    Genial DIEGO, te sigo desde hace poco pero tus trucos me han ayudado mucho en mis desarrollos. Una pregunta, tienes un snippet para mostrar un texto ( NUEVO, DESTACADO o lo que sea, por ejemplo) tanto en la vista previa del producto como en la ficha del mismo?

    • Alfonso says

      Me explico un poco más … tengo en una web el plugin https://wordpress.org/plugins/pre-orders-for-woocommerce/#description que me funciona bastante bien para los pre-order o preventas pero quisiera que me indicara también sobre la foto que es una preventa … para despistados jejejeje, bueno ando investigando … la idea es que si el estado del producto es «pre-ordered» me mostrase ese aviso sobre la foto igual que con los productos agotados o en rebajas

      • Diegol says

        Hola Alfonso,

        Me alegra que te haya ayudado mi contenido 🙂

        Tengo un post dónde menciono este tema de las etiquetas en fotos de WooCommerce. Es un poco antiguo y por plugins pero sigue funcionando. Ya que un snippet de esto hay que mezclarlo con css y es muy largo el código y habría que modificarlo bastante.

        Espero que te sirva o te de una idea.

        Un saludo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *