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:
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando…
Muchas gracias! Cómo se podrían utilizar en theme DIVI cuando lo tengo personalizado con el personalizador de temas.
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.
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
Hola, revisa el theme storefront, me parece que este tema tiene un código con una miniatura para esos enlaces.