Cómo crear el botón Agregar al carrito de WooCommerce por ID de producto
Publicado: 2021-02-24
Es posible crear el botón Agregar al carrito de WooCommerce por ID de producto y usar el botón en formularios, widgets, publicaciones o páginas e incluso en plantillas. Idealmente, el botón Agregar al carrito de WooCommerce se puede personalizar para adaptarse a una amplia gama de opciones personalizadas.
Botón Agregar al carrito de WooCommerce por ID de producto
En una publicación anterior, expliqué cómo cambiar el botón Agregar al carrito de WooCommerce a un enlace y también cómo cambiar el botón Agregar al carrito de WooCommerce para leer más.
Estos son otros tutoriales anteriores que pueden ayudarlo a obtener más información sobre cómo personalizar el botón Agregar al carrito de WooCommerce:
- Cómo reemplazar el botón Agregar al carrito con un enlace WooCommerce
- Cómo ocultar el botón Leer más y Agregar al carrito WooCommerce
- Cómo cambiar el texto del botón Agregar al carrito en la página de la tienda de WooCommerce
- Cómo cambiar el texto de Añadir al carrito Guía de WooCommerce con ejemplos
- Cómo agregar productos al carrito mediante programación en WooCommerce
- Cómo cambiar el aviso 'Agregado al carrito' de WooCommerce
- Cómo ocultar el precio y agregar al carrito para usuarios desconectados WooCommerce
Como puede ver en la lista de tutoriales anterior, hay varias formas de personalizar el botón Agregar al carrito de WooCommerce para ayudarlo a lograr diferentes diseños o diseños de contenido.
Por ejemplo, cuando desea crear una tabla de precios de WooCommerce, es posible que deba crear botones para agregar al carrito que puede agregar al botón de llamada a la acción en la tabla de precios.
Cree un producto simple WooCommerce Botón Agregar al carrito por ID de producto
Para crear el botón Agregar al carrito de WooCommerce por ID de producto, debe conocer el ID del producto específico para el que desea crear el botón Agregar al carrito. La identificación del producto se puede encontrar fácilmente en la página de descripción general de todos los productos, como se explica en este tutorial sobre cómo obtener la identificación del producto de WooCommerce .
Añadir al enlace del carrito
Ahora puede crear la URL de agregar carrito que no agregará al código del botón en el lugar donde desea mostrar el botón. En este caso, puede crear el enlace Agregar al carrito del producto simple como en el código a continuación:
https://example.com/?add-to-cart=840
La URL de su sitio debe reemplazar la parte example.com de la URL y la identificación del producto específico debe reemplazar la identificación del producto 840 utilizada en el ejemplo anterior.
Puede agregar esto en un código de botón HTML como en el siguiente código:
Cree un producto simple con el botón Agregar al carrito de cantidad de WooCommerce por ID de producto
También puede agregar la cantidad a la URL de agregar al carrito y puede hacerlo usando los diversos parámetros de URL que se usan para agregar lógica a las URL.
En este caso, puede extender el código que creamos en el paso anterior y crear un producto WooCommerce simple para agregar al carrito por ID de producto con la cantidad de 2 de la siguiente manera:
https://example.com/?add-to-cart=840&quantity=2
Como puede ver, hemos agregado un signo de y comercial y la palabra cantidad y lo hemos equiparado a 2, la cantidad de artículos que queremos agregar al carrito cuando se hace clic en el botón del mismo producto.
Para agregar esta URL al código HTML y crear el botón Agregar al carrito de WooCommerce por ID de producto con la cantidad, debe usar el siguiente código:
Cree el botón Agregar al carrito de WooCommerce por ID de producto con redirección al carrito
Para facilitar a los clientes de su tienda WooCommerce la navegación por su sitio, es muy importante crear redireccionamientos. En el pasado, destaqué las muchas formas de crear redireccionamientos de WooCommerce.
En particular, compartí en estas publicaciones de blog: WooCommerce crea la redirección después del pago y la redirección de WooCommerce después del cierre de sesión e incluso creé la redirección de WooCommerce después del complemento de pago para ayudarlo a implementar la redirección después del pago.
Redirección de WooCommerce al carrito después de agregar al carrito
También puede crear una redirección al carrito con el botón Agregar al carrito de WooCommerce por ID de producto. Puede lograr esto cambiando el código que compartí en el paso anterior para que sea el siguiente:
https://example.com/cart/?add-to-cart=840
Como puede ver, hemos agregado el carrito a la URL para garantizar que el usuario sea redirigido al carrito después de agregar el producto al carrito. El código completo con el código del botón HTML es el siguiente:
Redireccionamiento de WooCommerce al pago después de agregar al carrito
También puede crear una redirección para pagar con el botón Agregar al carrito de WooCommerce por ID de producto. Puede lograr esto cambiando el código que compartí en el paso agregando el pago en la URL anterior para que sea el siguiente:
https://example.com/checkout/?add-to-cart=840
Como puede ver, hemos agregado el pago a la URL para garantizar que el usuario sea redirigido al pago después de agregar el producto al carrito. El código completo con el código del botón HTML es el siguiente:
Conclusión
En este tutorial, hemos resaltado las diversas formas en que puede crear el botón Agregar al carrito de WooCommerce por ID de producto. También hemos visto cómo agregar una redirección al botón Agregar al carrito y cómo agregar la cantidad del producto al agregar al botón del carrito.
Espero que ahora pueda crear el botón Agregar al carrito de WooCommerce por ID de producto y usarlo en su tabla de precios, formularios y plantillas. También puede personalizar aún más el botón Agregar al carrito usando la clase de botón que agregué al código anterior. Si todavía está personalizando su sitio, puede beneficiarse de las ideas que compartí en Ultimate WooCommerce Hide Guide.
Para los usuarios de WooCommerce que tienen instalado el tema Storefront y desean personalizarlo aún más, compartí una colección brillante de más de 80 consejos de personalización del tema Storefront de WooCommerce que lo guiarán sobre cómo crear una apariencia personalizada de su sitio utilizando el tema predeterminado de WooCommerce: Storefront . .
Artículos similares
- Cómo crear campos de pago condicionales de WooCommerce
- Cómo crear un código abreviado de inicio de sesión de WooCommerce
- Cómo cambiar el tema del escaparate de color de los botones
- Cómo obtener el título del producto de WooCommerce
- Cómo ocultar el precio y agregar al carrito para usuarios desconectados WooCommerce
- Cómo ocultar el botón Actualizar carrito Página de carrito de WooCommerce
- Cómo reemplazar el botón Agregar al carrito con un enlace WooCommerce
- Cómo ocultar el precio si es cero en WooCommerce
- Cómo crear un tema infantil de WooCommerce Storefront [Guía completa]
- Cómo ocultar la opción de administración de WooCommerce Marketing Hub
- Cómo obtener la identificación del producto en la página de pago o en la página de pedido en WooCommerce
- Cómo obtener los detalles del pedido después del pago en WooCommerce
- Cómo redirigir al carrito después de iniciar sesión en WooCommerce
- Cómo agregar la redirección de la página de mi cuenta de WooCommerce
- Gancho de redirección de inicio de sesión de WooCommerce explicado con un ejemplo
- Cómo deshabilitar temporalmente el pago en WooCommerce
- Cómo configurar WooCommerce Storefront Blog