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

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

mejoras

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

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:

Valora este artículo : (3 votos, promedio: 5,00 de 5)

Cargando...