• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Anterior y siguiente en la página de producto de WooCommerce

Anterior y siguiente en la página de producto de WooCommerce

Anterior y siguiente en la página de producto de WooCommerce

[ 7 enero 2020 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

En la página de detalle de Producto de WooCommerce puedes tener la funcionalidad que te muestre el producto anterior o el siguiente producto (next, prev), en este artículo veremos cómo lograr esto de manera simple a través de código.

 

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

Resultado final next product, prev product

 

Código necesario para la navegación de productos

El siguiente código puedes agregarlo al final de tu archivo functions.php de tu child-theme.

add_action( 'woocommerce_before_single_product', 'dcms_single_product_pagination' );
add_action( 'woocommerce_after_single_product_summary', 'dcms_single_product_pagination' );

function dcms_single_product_pagination(){
	echo "<div class='dcms-prev-next'>";
	previous_post_link( '%link', '← %title', true, '' ,'product_cat' );
	next_post_link( '%link', '%title →', true, '' , 'product_cat' );
	echo "</div>";
}

 
En el código anterior:

  • Usamos dos hooks en donde se mostrarán los enlaces, woocommerce_before_single_product y woocommerce_after_single_product_summary
  • Usamos la función de WordPress previous_post_link() y next_post_link(), ambas funciones tienen parámetros idénticos
  • El primer parámetro indica el formato del enlace, %link creará el enlace pero podríamos combinarlo con HTML adicional
  • El segundo parámetro es el texto del enlace %title, en nuestro ejemplo hemos agregado flechas unicode como parte del texto
  • El tercer parámetro indica si los productos siguiente y anterior pertenecen al mismo término, en nuestro caso al establecerlo a true sólo mostrará productos de la misma categoría
  • El cuarto parámetro indica si queremos excluir términos, en nuestro caso no queremos excluir ninguna categoría
  • Finalmente el último parámetro indica la taxonomía, en nuestro caso puesto que son productos de WooCommerce la taxonomía que se crea es product_cat

Antes de implementar este código revisa si tu tema ya incluye esta funcionalidad, ya que algunos temas preparados para WooCommerce ya la incluyen.
Las funciones de WordPress muestran la navegación de productos ordenados de acuerdo a la fecha de creación, si has importado productos con la misma fecha posiblemente no veas productos anteriores o siguientes.

 

Estilizar los enlaces con código CSS

Una vez que ya aparecen los enlaces podemos entonces agregar algunos estilos CSS para mejorar el diseño, puedes usar el siguiente código:

.dcms-prev-next{
  display:flex;
  justify-content:space-between;
}

.dcms-prev-next a{
  border:1px solid #ddd;
  background-color:#efefef;
  padding:4px 16px;
}

 

Conclusión

Puedes agregar funcionalidad de navegación en la página de producto, mostrando productos relacionados con la misma categoría, todo esto de manera simple a través de código.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores:

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • agregar Tabs personalizados en WooCommerceAgregar Tabs personalizados en WooCommerce sin plugins
  • Modificar elementos en página de producto de WooCommerceModificar elementos en página de producto de WooCommerce
  • Modificar una plantilla de WoocommerceCómo modificar una plantilla de WooCommerce
  • Mostrar mensaje según zona de envío en WooCommerceMostrar mensaje según zona de envío en WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. musulungo

    15 junio, 2020

    Muchas gracias! Cómo se podrían utilizar en theme DIVI cuando lo tengo personalizado con el personalizador de temas.

    • Jhon Marreros Guzmán

      15 junio, 2020

      Hola, creo que podría funcionar si usas un constructor y este conserva los hooks de WooCommerce, sino funciona tendrías que consultar con el soporte de Divi ya que es posible que tengan alguna alternativa diferente.

  2. César

    3 agosto, 2020

    buenos días
    ¿qué código sería necesario añadir para que, al ubicar el puntero sobre el enlace, mostrase la foto, aunque sea en miniatura, del producto destino de ese enlace?
    con eso ya se bordaría este código

    gracias de antemano

    • Jhon Marreros Guzmán

      3 agosto, 2020

      Hola, revisa el theme storefront, me parece que este tema tiene un código con una miniatura para esos enlaces.

  3. ivan

    13 noviembre, 2020

    hola… sería posible que en vez de ser “producto anterior ” o “producto siguiente” la navegación sea entre categorías?

    • Jhon Marreros Guzmán

      16 noviembre, 2020

      Hola
      Te refieres a que terminada una categoría pase a otra pero navegando entre productos?, es decir productos de distintas categorías?.
      Saludos.

  4. jose

    25 julio, 2021

    ← CA6517 CAROLINACA6523 TECKEL →
    Me sale el nombre de los productos juntos ,se podría poner alguna separación entre los dos
    ejemplo:
    ← CA6517 CAROLINA CA6523 TECKEL →
    gracias

    • jose

      25 julio, 2021

      era con el css

      perdon gracias

      • Jhon Marreros Guzmán

        26 julio, 2021

        Que bueno que lo solucionaste 🙂

  5. Daniel Sepulveda

    23 diciembre, 2021

    hola, podria ser que se pudieran llamar traer los productos pero en orden alfabetico y no como estan ingresados en productos?

    • Jhon Marreros Guzmán

      27 diciembre, 2021

      Hola, al parecer, según la documentación, sólo es posible de acuerdo al orden cronológico: https://developer.wordpress.org/reference/functions/previous_post_link/ , posiblemente para hacer lo que quieres se tenga que hacer algo personalizado.

  6. Sebastian

    3 enero, 2022

    Este post me ha ayudo mucho. Muchas gracias por compartir tu sabiduria jeje.

  7. Bernat

    6 abril, 2022

    Hola, fantástico post, pero me gustaría poder usarlo para un Custom Post type, sería posible adaptarlo?
    gracias

    • Jhon Marreros Guzmán

      8 abril, 2022

      Hola, si, tendrías que usar la taxonomía que organiza tu CPT, en el ejemplo es “product_cat”

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Personalizar el formulario de login de WordPress

Usar el Media Uploader de WordPress en tus plugins y temas

Fijar Widget lateral en WordPress sin plugins

Regenerar imágenes de miniaturas en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados