Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WooCommerce
Webdesign

Construye un archivo de productos con pestañas para tu tienda WooCommerce

by
Length:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En este tutorial aprenderás cómo hacer más atractiva tu tienda WooCommerce al organizar el archivo de producto con pestañas. Crearemos pestañas con una maquetación compuesta de varias columnas, un carrusel de varias filas, y una maquetación tipo cuadrícula ("grid layout").

Qué vamos a construir

En los próximos pasos crearemos un plugin de WordPress, dentro del cual configuraremos los shortcodes requeridos. Si deseas llevar tu archivo de productos WooCommerce más allá, podrías convertirlo en un bloque Gutenberg, usarlo con Elementor como widget o integrarlo con WPBakery Page Builder (anteriormente denominado Visual Composer).

Esta página de archivo de producto con pestañas será perfecta para mostrar los productos más recientes, los destacados, los que estén en oferta, y los más vendidos, de la siguiente manera:

tabbed product archive in woocommerce
Nuestra página de archivo, mostrar pestañas y controles para carrusel

Así que, ¡empecemos!

1. Crear un plugin WordPress

En tu sitio WordPress, dentro de wp-content/plugins, crea una carpeta denominada (quizá no sea el nombre más original) "woocommerce-products", y después, dentro de esta carpeta crea un archivo php con el mismo nombre. Abre el archivo y pega dentro de él el siguiente código cambiando los detalles necesarios para adaptarlo a los tuyos):

Aquí no hemos hecho nada más que definir el nombre de nuestro plugin y proporcionar alguna meta información.

Encolar scripts y estilos

Para nuestro plugin WooCommerce de archivo de producto necesitaremos encolar los scripts y estilos necesarios, así que añade el siguiente fragmento de código:

Primero, hemos añadido un archivo CSS básico para guardar nuestros estilos. Después hemos cargado el plugin integrado imageLoaded (que viene con el núcleo de WordPress), y para crear el carrusel usaremos el popular plugin jQuery owlCarousel. Y, por supuesto, el archivo js principal.

Nota: Asegúrate de añadir estos archivos en la carpeta de tu plugin y dentro a su vez de las subcarpetas pertinentes.

Para conocer más sobre la creación de plugins y shortcodes para WordPress, o para obtener más información sobre cómo usar owl.js, aquí tienes algunos tutoriales recomendados disponibles en Tuts+:

2. Crear un shortcode para la pestaña

En este paso crearemos un shortcode para la pestaña. Realmente consistirá en dos shortcodes; uno para el contenedor padre de la pestaña, y después otro para los elementos de la pestaña hija del anterior. Para el primer contenedor, añade este código al archivo PHP:

Este shortcode no requiere ningún atributo, es simplemente un contenedor para los elementos que irán dentro de él.

Hablando de los elementos de la pestaña, a continuación, añade el código de abajo para crear el elemento de pestaña hijo:

Este shortcode tiene dos atributos; el título y el indicador activo, en caso de que desees activar la pestaña de destino en la primera carga.

Cuando usemos los dos shortcodes juntos en el editor WordPress, tendrán el siguiente aspecto:

En este punto, si los añades a tu página principal y observas el resultado final en tu navegador, verás una salida HTML sin estilo que aún no funciona. Así que vamos a arreglarlo.

3. Añadir jQuery para potenciar el contenido con pestañas

Dirígete al archivo main.js y pega el código

No voy a describir todo este código detalladamente, dicho brevemente, proporciona funcionalidad a la pestaña. Si no estás familiarizado con JavaScript o jQuery, te recomiendo este increíble curso gratuito para principiantes:

Aplicar estilo a las pestañas

Ahora las pestañas ya funcionan, pero tienen un feo aspecto, así que vamos a añadir algo de CSS básico:

4. Crear el shortcode de productos WooCommerce

estamos haciendo grandes progresos; ¡nuestro archivo de producto con pestañas de WooCommerce está casi terminado! Ha llegado el momento de crear un shortcode para los productos. Este extraerá los productos a través de una consulta, a partir de esos resultados, creará una serie de matrices (arrays): productos destacados, en oferta, y los más vendidos. A continuación mostrará el contenido de esas matrices para proporcionarnos nuestras pestañas de productos.

Añade este código al archivo PHP:

El shortcode que hemos creado aquí tiene distintos atributos:

  • Layout: puede ser de cuadrícula (grid) o carrusel
  • Autoplaytrue (verdadero) o false (falso), esta es una opción adicional para el diseño del carrusel
  • Columns: aquí puedes especificar cuántas columnas deseas
  • Rows: esto es lo mismo que las columnas y solo se aplica al diseño por carrusel
  • Quantity: el número de artículos que se mostrarán
  • Type: aquí puedes especificar productos recientes (recent products) , los más vendidos (best sellers), los que están en oferta (sale) o featured products (productos destacados)

Una nota sobre las filas de nuestro carrusel

Cuando tienes un carrusel, cada producto se convierte en un elemento del carrusel, con comportamiento estándar cuando solo  tenemos una fila. Sin embargo, ¿qué sucede si queremos dos, tres o cuatro filas por elemento de carrusel?

En este caso, necesitarías envolver cada una de estas posibilidades dentro de un contenedor que actuaría como elemento de carrusel. Y aquí aparece una cuestión: ¿Harías esto con JavaScript o con PHP? Yo prefiero la segunda opción, ya que la ejecución de JS tiene algunos retrasos. Así que, si examinas el shortcode descubrirás lo siguiente:

Advierte el

inmediatamente después de

Esto es muy similar a un bucle for, necesitamos un incremento para recorrer en bucle nuestra consulta y envolver cada dos, cada tres y cada cuatro elementos de producto dentro del marcado del contenedor para los elementos por carrusel.

Habrás notado el %, se trata del operador de modulo. Proporciona el resto de una división; 0 cuando el número es exactamente divisible por 2/3/4, y 1 cuando no lo es. Y con cada bucle tendremos que incrementar el contador con:

Esto sucede justo tras el código:

5. Añade los estilos de Owl 🦉�

6. Corregir el glitch del carruselh

activa en la primera carga de la página, pero si empiezas a cambiar entre una pestaña y otra, el diseño en forma de carrusel se romperá. En el evento de cambio de pestañas, nuestro carrusel debe actualizarse. Así que al principio del archivo añade la siguiente función:: <!-- wp:separator -->), si tienes el editor clásico, simplemente copia los shortcodes.. un atractivo diseño como este!>
Advertisement
Advertisement
enova_themes
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.