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

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

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:

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: