En este post vamos a ver cómo añadir nuevas pestañas en la página de producto, utilizando Prestashop. Prestashop, por defecto, no incluye esta funcionalidad. Por lo tanto, tendremos que añadir esta funcionalidad a través de un módulo.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
Índice Añadir pestañas personalizadas Prestashop en Productos
- 1.- Opciones para añadir una nueva pestaña en ficha producto Prestashop
- 2.- Módulo Iqit Additional Tabs de la plantilla Warehouse para añadir nuevas Pestañas en Prestashop
1.- Opciones para añadir una nueva pestaña en ficha producto Prestashop
Debido a que Prestashop no incluye por defecto la opción de añadir nuevas pestañas personalizadas en la ficha de producto, debemos recurrir a un módulo.
Aquí tenemos varias opciones:
a.- Módulo gratuito: instalar un módulo gratuito. En mi opinión, no es la mejor opción, ya que el correcto funcionamiento del módulo va a estar muy condicionado por la versión de Prestashop que tengamos. Además, seguramente no vamos a tener soporte, en caso de que tengamos algún problema. En cualquier caso, aquí tienes un post donde hablan de diferentes opciones gratuitas: Módulos gratuitos pestañas productos Prestashop
b.- Módulo de pago: también tienes la opción de comprar un módulo de pago. En esta url tienes módulos de esta tipología. Aunque analiza bien antes de comprar, ya que hay algunos con funcionalidades similares a esta que estamos describiendo
c.- Plantilla que incluya módulo: otra opción sería la de utilizar una plantilla para Prestashop que ya incluya esta funcionalidad. Varias plantillas de cierto nivel, ya incluyen opciones de este tipo. Como sucede con la plantilla Warehouse, mi plantilla favorita para Prestashop, que ya incluye el módulo IqitAdditionalTabs que implementa la funcionalidad de poder añadir pestañas personalizadas en la ficha de producto
COMPRAR PLANTILLA WAREHOUSE
2.- Módulo Iqit Additional Tabs de la plantilla Warehouse para añadir nuevas Pestañas en Prestashop
En este post nos vamos a centrar precisamente en el módulo Iqit Additional Tabs, que incluye por defecto la plantilla Warehouse. Con este módulo tenemos la posibilidad de añadir pestañas específicas y personalizadas en cada producto o añadir una pestaña general en todos los productos, de una sola vez.
Añadir una pestaña general que se muestre en todos los productos, solo tiene sentido si es una característica común a todos los productos. Como podría ser por ejemplo, una pestaña de “Política de devoluciones”.
Vamos a ver cada una de estas opciones en apartados diferentes.
2.1.- Posición de las pestañas
Antes de ver las opciones para añadir una pestaña general o específica en una página de producto, vamos a ver la posición de dicha pestaña. El módulo que incluye la plantilla Warehouse nos va a permitir que las pestañas que vayamos añadiendo se muestren en la zona habitual de pestañas de más información o en la parte superior, bajo el “botón de añadir al carrito” como un acordeón.
Para establecer una u otra opción, debemos ir a la gestión de módulos de Prestashop y configurar el módulo “Iquit Additional Tabs”. Para esto, iremos a: “PERSONALIZAR > Módulos > Module Manager”
En el apartado “Settings” tenemos un selector denominado “Hook” en el cual podemos establecer dos opciones diferentes:
a.- With others tabs: si elegimos esta opción, todas las pestañas que vayamos añadiendo, sean generales o específicas, se muestren junto al resto de pestañas habituales de la ficha de producto en Prestashop.
b.- As accordion below: si establecemos esta opción, las pestañas que vayamos añadiendo, se mostrarán bajo el bloque de añadir al carrito, como un acordeón.
Una vez establecido el selector, debemos hacer clic en “Guardar”
2.2.- Añadir en Prestashop una o varias Pestañas personalizadas en un producto
Para añadir una o varias pestañas específicas y personalizadas en un determinado producto de Prestashop, lo que haremos en primer lugar será editar ese producto. Una vez en la página de edición del producto, iremos a la pestaña: “Módulos”. Ahí, encontraremos varios módulos. Haremos clic en el botón configurar del módulo: «IQITADDITIONALTABS – Custom product tabs»
En la siguiente interface veremos los siguientes elementos que nos servirán para crear una pestaña personalizada en la ficha de producto con Prestashop:
a.- Hidden Visible: con este selector seleccionaremos si queremos mostrar o no esta pestaña que estamos creando (Hidden es ocultar)
b.- Title: aquí pondremos el título de la pestaña que estamos creando.
c.- Content: aquí pondremos el contenido que se mostrará cuando se seleccione esta pestaña que estamos añadiendo a Prestashop.
d.- Añadir nuevo: Haremos clic en este botón para añadir la pestaña a la ficha de producto.
Después haremos clic en el botón “Guardar” de Prestashop, para guardar todos los cambios en la página de producto.
Añadir pestaña personalizada a producto prestashop
2.2.1.- Opciones tras añadir una pestaña a la página de producto con Prestashop
Una vez hayamos añadido la pestaña a Prestashop, veremos que ya se muestra en la administración en el apartado: “Tab list” y podremos realizar las siguientes acciones.
a.- Visualizar la ficha de producto: para ver como ha quedado nuestra pestaña haremos clic en el botón: “Vista previa”
b.- Añadir otra pestaña: Si queremos añadir otra pestaña personalizada, simplemente tendremos que volver a añadir los campos: “title” y “content” y hacer clic en “Añadir nuevo”
c.- Editar la pestaña añadida: si queremos modificar la pestaña añadida, haremos clic en “Modificar” sobre la pestaña en cuestión, dentro del apartado “Tab list”
d.- Eliminar la pestaña: si queremos eliminar la pestaña, haremos clic en “Eliminar” en la pestaña correspondiente, bajo el apartado “Tab List”.
e.- Cambiar de posición: si tenemos varias pestañas, podemos cambiar su posición colocando el ratón sobre la pestaña a desplazar, haciendo clic en el botón izquierdo y arrastrando.
Pestaña añadida a la ficha de producto en Prestashop
2.3.- Añadir una pestaña general a todos los productos Prestashop
Para añadir una pestaña general a todos los productos con el mismo contenido, debemos ir a la gestión de módulos de Prestashop y configurar el módulo “Iqit Additional Tabs”. Para esto, iremos a: “PERSONALIZAR > Módulos > Module Manager”. A continuación, buscaremos el módulo “IQITADDITIONALTABS – Custom producto tabs” y haremos clic en el botón “Configurar”.
Para añadir una nueva pestaña y contenido a todos los productos, haremos clic en el icono en forma de signo “+” situado en la parte derecha del bloque “Tab list”.
Hecho esto, rellenaremos lo siguientes campos:
a.- Enabled: este selector lo estableceremos en “SI” para que la pestaña que estamos creando esté activa y por tanto, se muestre en la tienda.
b.- Title: aquí podremos el título de la pestaña o tab.
c.- Description: aquí estableceremos el contenido de la pestaña o tab.
d.- Guardar: haremos clic en el botón “guardar” para que se guarde la pestaña
2.3.1.- Opciones tras añadir en Prestashop una pestaña general para todos los productos
Tras añadir una pestaña general a todos los productos, veremos que se refleja en la administración, bajo el apartado “Tabs list” .
A partir de aquí podremos realizar varias acciones:
a.- Ver pestaña: para ver cómo ha quedado la nueva pestaña, simplemente tendremos que acceder a la parte pública de nuestra tienda y ver un producto.
b.- Añadir otra pestaña: si queremos añadir una nueva pestaña general, volveremos a hacer clic en el icono con forma de signo “+”.
d.- Desactivar: podemos desactivar la pestaña haciendo clic sobre el botón: “Enabled”
e.- Modificar: podremos modificar el contenido y título de la pestaña, haciendo clic en el botón: “Modificar”
f.- Eliminar: si lo que queremos hacer es eliminar la pestaña, haremos clic en el botón “Eliminar”
g.- Cambiar de posición: si tenemos varias pestañas, podemos cambiar su posición colocando el ratón sobre la pestaña a desplazar, haciendo clic en el botón izquierdo y arrastrando.
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
hola,
Seria posible, eliminar o ocultar alguna de las tres pestañas de prestashop?
Hola Carlos.
Prestashop no incluye esa opción, por lo que lo tendrías que hacer modificando código.
Aquí te dejo un post de ejemplo para quitar la pestaña de detalles del producto en Prestashop
Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre Prestashop, Warehouse, Curso claves para crear una tienda online de éxito, Curso alta en google e indexación web, SEO General, SEO Ecommerce, Analytics tiendas online, Blog Prestashop, Woocommerce, WordPress, etc. etc.
Hola Joaquin,
He hecho una prueba desde la pestaña «modulo» de la ficha de articulo y he creado dos TABS. tal como pones en el tutorial.
He salido y vuelto a entrar en la ficha del articulo y ahora ya no puedo volver a acceder al modulo IQITADDITIONALTABS desde ahi.
La opcion de escoger un módulo a configurar ya no está . Solo aparecen unos cuadrados grandes (como cuando buscas un modulo en el repositorio) y un boton que pone configurar. Pero no hace nada.
Hola Albert.
Habría que acceder a tu Prestashop y reproducir el problema a ver que puede estar pasando. Por lo que mi recomendación es que acudas al soporte de Warehouse: https://iqitcommerce.ticksy.com/
un saludo
Gracias por tu tiempo y haber contestado, se que estás muy liado.
Ya se me acabó el tiempo de soporte hace meses y no puedes preguntar si no vuelves a pagar casi como si comprases otra vez el tema nuevo y la ayuda en su sitio es pobre en comparación con todo lo que enseñas tú en tu web.
He reproducido el problema. La causa es subir los archivos por CSV.
En los articulos creados desde el panel de prestashop, el módulo IQITADDITIONALTABS y el resto de módulos de Warehouse funcionan con estos artículos.
Cuando subo un CSV con articulos no son detectados por la plantilla Warehouse y no los incluye en carrusel, tabs, etc.
Tiene que haber un campo en alguna tabla de la base de datos que no se actualiza al subir el CSV y Warehouse ni se entera.
Solo era para completar la información, no te preocupes, no te pido más.
Es un problema muy muy importante para los que queremos subir por CSV y utilizar Warehouse. Si doy con la solución lo compartiré aqui.
Un saludo cordial
Hola. Hay alguno gratuito para la versión 1.7.x? El que veo en el post de Victor es hasta la 1.6.
Mi cliente no quiere pagar y no encuentro ninguno gratuito.
Gracias.
Hola Adrián.
Yo no he encontrado ninguno gratuito. Prueba a poner un comentario a Víctor a ver si él conoce algún otro.
En cualquier caso, para un trabajo profesional uno de pago. Principalmente, porque así podrás recibir soporte