Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Suscribirse (10€/mes)
  • Mi Cuenta
  • Contacto
Estás aquí: Inicio / CSS / Añadir o reemplazar texto por CSS

Añadir o reemplazar texto por CSS

septiembre 20, 2018 Por Óscar 2 comentarios

Hola Chicos,

En este tutorial vamos a ver como podemos añadir un texto a través de CSS, incluso como reemplazo un texto existente.

Por supuesto hay otros métodos mejores, modificando el php (si tu web está hecha con WordPress) pero si queremos una solución rápida o no sabemos hacerlo de otra forma nos puede sacar de más de un apuro.

Cómo veremos en este tutorial hacerlo es muy sencillo con un poco de CSS.

Concretamente vamos a aprender a añadir un texto delante de otro existente, añadirlo detrás del texto existente o sustituirlo por el que queramos.

Vamos a hacer un caso real para que se vea más claro.

Aquí tienes el tutorial en vídeo:

Suscríbete a mi canal:  

En la siguiente imagen podemos ver unos productos con su nombre de producto:

cambiar titulo productos

Vamos a ver como añadir una palabra delante del nombre de producto.

Para ello vamos a usar el inspector de elementos para ver en que lugar añadir el CSS.

Hacemos click en botón derecho encima de uno de los títulos y veremos una imagen como la siguiente:

inspector elementos

Podemos observar que a la derecha hay un signo +, hacemos click en el y nos aparecerá la siguiente regla css vacía:

regla css vacía

Cómo lo primero que vamos a hacer es añadir un texto por delante del título vamos a complementar la regla css de la siguiente forma:

h2.woocommerce-loop-product__title:before {
	content: "Producto ";
}

Con el código anterior conseguimos que aparezca la palabra producto en todos nuestros títulos:

add palabra before css

Si antes del título del producto lo queremos detrás cambiaremos la regla por la siguiente:

h2.woocommerce-loop-product__title:after {
	content: "Producto ";
}

Si lo que queremos es sustituir el texto por la palabra que queramos tenemos que añadir el siguiente código:

h2.woocommerce-loop-product__title {
	visibility: hidden;
}

h2.woocommerce-loop-product__title:before {
	content: " Producto ";
	visibility:visible;
}

De esta forma, primero, escondemos el nombre del producto y Lugo hacemos visible la palabra que nosotros hemos querido.

El resultado final sería:

quitado titulo css

Recordar que estos cambios los tenemos que añadir en nuestro WordPress.

Para ello vamos Personalizar —> CSS Adicional y añadir nuestro código:

add css wordpress
En ocasiones podremos salir de líos interesantes con un poco de CSS.

Espero que os sea útil y cualquier duda aquí me tenéis 😉

Archivado en:CSS

Comentarios

  1. Josilvbr dice

    febrero 4, 2021 en 9:07 pm

    Viejo, me has salvado. Llevo tiempo tratando de editar un texto dentro de WPBakery, una cosa simple, una caja que dice «Read More» y solo quería traducirlo.
    Hice un montón de cosas, traduje todo el Plugin con Loco Translate, edite código .php, trate de editar directamente el HTML, pero me terminaba dando error.
    Y cuando se me ocurrió editar el texto a través de CSS, pues mis compañeros me indicaron que no se podía.
    Pero gracias a tu Post, pude lograrlo.

    Ya han pasado años desde que esta publicado este post, pero de todas formas, desde la distancia (temporal y espacial), me tomo este momento para agradecértelo.
    Muchas gracias.

    Responder
    • Oscar martin dice

      febrero 7, 2021 en 3:14 pm

      Muchas gracias por tu comentario, me alegro de haberte ayudado 😉

      Un abrazo!!!

      Responder

Deja una respuesta Cancelar la respuesta

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

Carrito

Categorías

Contenido Premium

¿Quieres Aprender WordPress y Ganar dinero? Cópiame

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Iniciar sesión

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.

Non-necessary

Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.

GUARDAR Y ACEPTAR