• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Plugins / Anterior y siguiente en la página de producto de WooCommerce
Anuncio banner webservi

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

¿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
  • Cargar scripts y estilos de Contact Forms 7 condicionalmenteCargar scripts y estilos de Contact Forms 7 condicionalmente
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 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.

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

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Metadata de imágenes en WordPress

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

Igualar altura de elementos de un grid

Cómo usar la cache de objetos en WordPress

Recientes

  • Leer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad