Aprende en este tutorial cómo mostrar un botón extra al lado del de «añadir al carrito» de WooCommerce en las fichas de producto sin plugins.
Una de las ventajas de ser suscriptor de Código Genesis es que puedes sugerir nuevos tutoriales. El otro día Henri me preguntó cómo podía añadir un botón extra que enlazara con una demo del producto justo al lado del botón «añadir al carrito».
Por suerte, WooCommerce tiene un hook que te permite añadir contenido en esta ubicación, así que vamos a ver cómo hacerlo.
Esta sería la ficha por defecto:
Y esta sería la ficha con el botón extra:
¿Vamos allá?
Snippet para enseñar un botón extra al lado del de «añadir a carrito» en las fichas de producto de WooCommerce
Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 2107 snippets de esta web,
identifícate o suscríbete aquí.
En este caso, el texto del nuevo botón será «Ver la demo» y la URL será la de la web + /demo/ + el nombre del producto. Es decir, algo así como: tuweb.com/demo/producto-2/.
Por supuesto, puedes cambiar tanto la URL como el texto por el que tú quieras.
Por último, para evitar que los dos botones queden totalmente pegados, añade este código al fichero style.css:
Para ver este código y los otros 2107 snippets de esta web,
identifícate o suscríbete aquí.
Ya lo tienes.
Conclusión
Como ves, con unas pocas líneas de código puedes mostrar un botón extra en las fichas de producto de WooCommerce, justo al lado del botón para añadir al carrito.
¿Alguna duda? Te leo en los comentarios.
Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉
