Cómo añadir etiquetas personalizadas a las páginas de producto de WooCommerce (utilizando Elementor)

Añadir a la página de producto de WooCommerceEtiquetas personalizadasPueden ayudarle a presentar mejor la información del producto y mejorar la experiencia del usuario. Estas etiquetas pueden utilizarse para proporcionar descripciones adicionales, reseñas de usuarios, especificaciones u otra información clave. Con el plugin Elementor, es fácil personalizar estas etiquetas sin escribir código. Este artículo te dará una guía paso a paso sobre cómo añadir etiquetas personalizadas a tus páginas de producto de WooCommerce usando Elementor.

Paso 1: Instalar y activar los plug-ins necesarios

En primer lugar, debe asegurarse de que están instalados los siguientes plugins:

• WooCommercePlugin de funcionalidad de comercio electrónico.
• Elementor Pro: ObligatoriomontajeVersión Propara la personalización de la página utilizando widgets relacionados con WooCommerce.
• Gestor de pestañas de WooCommerce(Opcional): Facilita la gestión de pestañas en las páginas de producto de WooCommerce.

Paso 2: Crear o editar WooCommerceofertaspágina web

1. Ir a la página del productoEn el backend de WordPress, vaya a la secciónofertas > Todos los productosA continuación, seleccione el producto que desea editar y haga clic encompiladorBotón.

2. Edición con ElementorEn la página de edición del producto, haga clic enEdición con Elementorpara entrar en el editor de Elementor.

Paso 3: Añadir pestañas personalizadas

1. Añadir estructura de pestañas de productos::
   • En el editor de Elementor, haz clic enAñadir un nuevo contenedorseleccione uncolumnasDisposición.
   • Usando ElementorWidget de pestañasArrástrelo y suéltelo en la sección que acaba de crear. El widget Pestañas añadirá automáticamente algunas pestañas de muestra.

2. Editar el contenido de las pestañas::
   • Haga clic en el área del título de cada pestaña para cambiar el título de la pestaña, por ejemplo, "Descripción", "Modelo", "FAQ", etc.
   • Haga clic en el área de contenido de la pestaña para añadir librementeTexto, imágenes, listasy mucho más, aprovechando al máximo el rico conjunto de widgets de Elementor para personalizar el contenido de cada pestaña.

Paso 4: Añadir contenido dinámico de WooCommerce a cada pestaña

Elementor puede convertirContenido dinámico de WooCommerceAñadir a pestañas. Por ejemplo, mostrar información de descripción del producto generada dinámicamente en la pestaña Descripción.

1. Inserción de datos dinámicosHaga clic en los widgets de cualquier área de contenido y seleccione el widget de la izquierda.Iconos de etiquetas dinámicas. A continuación, seleccione contenido dinámico relacionado con WooCommerce en el menú desplegable, como por ejemploDescripción del productoyTítulo del productotal vezReseñas de productos.

2. Diseño y personalizaciónEl modo de funcionamiento: Elementor también puede ajustarse modificando el parámetroEstilos, espaciado, fuentes, coloresetc. para personalizar el aspecto de cada pestaña. Asegúrese de que el diseño de las pestañas es coherente con el estilo general del sitio.

Paso 5: Guardar y previsualizar

Una vez que haya terminado de añadir y personalizar las fichas, haga clic en la parte inferior de la página en el botónactualizaciónpara guardar los cambios. A continuación, puede previsualizar la página del producto para asegurarse de que todas las pestañas se muestran correctamente y de que el contenido se carga correctamente.

Paso opcional: Usar el gestor de pestañas de WooCommerce

Si desea funciones de gestión de pestañas más robustas, considere la posibilidad de utilizar la funciónGestor de pestañas de WooCommercePlugin. Este plugin puede:

• Añada pestañas personalizadas globales que se aplican automáticamente a todas las páginas de productos.
• Arrastra y suelta fácilmente para reordenar las pestañas.
• Configure diferentes diseños de pestañas para diferentes productos.

Paso 6: Optimizar la experiencia del usuario

Para garantizar que los usuarios puedan navegar fácilmente por la información de sus productos, también hayFichaspara añadir efectos de animación. Ejemplo:

• animación con fundido de entrada/salida: en Elementoralto nivelpuede añadir efectos de fundido de entrada y salida a las pestañas de entrada y salida para que el cambio de página sea más suave.

• diseño sensiblePestañas: Compruebe cómo se muestran sus pestañas en los dispositivos móviles para asegurarse de que ofrecen una buena experiencia de usuario en todos los dispositivos.

resúmenes

pasar (una factura o inspección, etc.)Elementorresponder cantandoWooCommercePuede añadir fácilmente etiquetas personalizadas a sus páginas de productos para que la información de sus productos sea más clara y esté mejor organizada.

Plug-ins recomendados::

• Elementor ProUn rico conjunto de herramientas para el diseño de páginas de productos.
• Gestor de pestañas de WooCommerce(Opcional): Una herramienta de gestión de fichas más avanzada para comerciantes con varios productos.

Sigue los pasos de este artículo para añadir etiquetas de producto personalizadas a tu tienda WooCommerce y personaliza cada etiqueta con el contenido y el diseño que necesites.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres