Descubre en este tutorial cómo añadir un botón añadir al carrito en un listado de productos (query block), mediante código.
El bloque nativo de WordPress que permite mostrar un listado de todos los tipos de entradas registrados en la instalación, incluyendo los productos de WooCommerce.
De hecho, el bloque es tan versátil que puede ser una buena opción para mostrar un listado de productos usando el bloque de precio de producto.
La pega es que WooCommerce, por ahora, no ofrece la opción de usar un botón para mostrar la opción de «Ir a carrito», o le texto que tú quieras.
Por eso, en el tutorial de hoy vas a ver cómo añadir automáticamente el enlace al carrito, en un bloque de botón, cuando muestras un listado de productos. Todo gracias al filtro render_block_{$this->name} y la HTML API.
Vamos a ver cómo:
Pasos para crear un botón que enlace al carrito de un producto
1. Añade el botón a la plantilla de entrada del query block
En primer lugar, elige el bloque de bucle de consulta, selecciona productos y el diseño que desees. Una vez hecho, dentro de la plantilla de entrada añade un bloque de botones y personalizalo a tu gusto.
2. Añade una clase CSS personalizada
Una vez hecho, ve al apartado de «Avanzado» del bloque de botón (el que se encuentra dentro de «Botones») e introduce add-to-cart-link en «Clase(s) CSS adicional(es)» del bloque.
3. Añade automáticamente el enlace de la carrito al botón
A continuación 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 código utilizas el filtro render_block_{$this->name} en combinación con la clase WP_HTML_Tag_Processor.
En el mismo le indicas que si el bloque del botón tiene la clase CSS add-to-cart-link
Eso sí, ten en cuenta que al estar usando un filtro de PHP tienes la limitación de que el resultado solo lo verás en la parte frontal de la web, en el backend no se reflejarán los cambios.
Conclusiones
Ahora ya sabes cómo conseguir añadir un botón que envíe al carrito de un producto dentro del bucle de consulta (query block).
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
