Descubre en este tutorial cómo mostrar un botón de añadir a carrito en una entrada de un CPT que vendes mediante WooCommerce.
Si estás usando un Custom Post Type (CPT), como talleres o cursos, pero la venta la quieres hacer usando WooCommerce, es posible que te interese dar la opción de que el potencial cliente pueda añadir directamente el producto desde la entrada de ese CPT.
Así que en este tutorial vas a aprender cómo relacionar un CPT con un producto de WooCommerce y cómo puedes mostrar un botón para que se añada al carrito.
Pasos para mostrar un botón de añadir a carrito en WordPress
1. Crea un campo personalizado de relación con ACF
Si no lo has hecho ya, descarga e instala el plugin Advanced Custom Fields. Con la versión gratuita del repositorio de WordPress es suficiente en este caso.
Una vez activado, ve a Campos personalizados > Añadir nuevo y crea un campo de relación.
Una vez hayas creado y configurado el campo personalizado, indica en Ubicación > Reglas que quieres que se muestre en el post type de taller, curso o el CPT que quieras relacionar con un producto de WooCommerce.
2. Selecciona el producto de WooCommerce relacionado con tu CPT
A continuación, la idea es que relaciones tu CTP (taller, curso…) con el producto de WooCommerce que has creado para venderlo.
Para ello, edita la entrada de tu CTP y ve hasta la metabox «Relacionados», debajo del contenido, y selecciona el producto de WooCommerce.
3. Crea el shortcode
Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 1953 snippets de esta web,
identifícate o suscríbete aquí.
Con este código creas un shortcode que te permite mostrar un botón de añadir a carrito usando el shortcode [boton_compra texto="x" class="y"]. Donde puedes sustituir «x» por el texto que quieres que se muestre en el botón, e «y» para añadir una clase CSS personalizada.
4. Introduce el shortcode donde quieras
La ventaja de los shortcodes es que puedes insertarlos en cualquier punto de la web.
Solo tendrás que usar el shortcode definiendo los atributos «class» y «texto» donde quieres que se visualice.
Por ejemplo, imagina que has creado un CPT de taller donde quieres añadir un botón de compra con el texto «Comprar» y que tenga la clase de CSS «taller». Este sería el shortcode que usarías para mostrarlo [boton_compra texto="Comprar" class="taller"].
Conclusiones
Ahora ya sabes cómo mostrar un botón de añadir a carrito, en el cual puedes personalizar el texto que se muestra y su diseño.
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. 😉
