Puntos clave:
- Controlar el botón «Añadir a la cesta» en WooCommerce permite una mayor flexibilidad en la gestión de la visualización y venta de productos, atendiendo a diversos escenarios como artículos agotados o productos sólo de catálogo.
- Ocultar el botón lo hace invisible para los usuarios, mientras que quitarlo por completo lo elimina del código del sitio, ofreciendo distintos niveles de control.
- La ocultación o eliminación condicional basada en ID de producto u otros criterios proporciona un control granular sobre qué productos están disponibles para la compra.
- Al desactivar el botón, se mantiene visible pero no se puede hacer clic en él, lo que indica que el producto no está disponible sin eliminar por completo la opción de compra.
Hay muchas razones por las que podrías querer ocultar, eliminar o desactivar el botón de añadir al carrito en tu tienda WooCommerce. Tal vez el producto que se muestra en tu tienda no está a la venta, o quieres mostrar el catálogo de productos o tus productos se han agotado.
Por eso necesitas una mayor personalización para actualizar la funcionalidad de tu tienda según tus demandas. Un enorme repositorio de plugins de WordPress y extensiones de WooCommerce ofrece a los usuarios amplias opciones de personalización que se traducen en una experiencia más fácil de usar.
En este artículo, te mostraré cómo ocultar, eliminar o desactivar el botón de añadir al carrito en tu tienda WooCommerce, atendiendo a escenarios de falta de existencias o a la visualización del catálogo de productos. Puedes utilizar el alojamiento gestionado de WordPress de Cloudways para alojar tu tienda WooCommerce.
- ¿Por qué ocultar, eliminar o desactivar el botón «Añadir a la cesta»?
- Entender la diferencia entre ocultar y eliminar
- Ocultar el botón Añadir al carrito de la página de producto de WooCommerce
- Ocultar condicionalmente el botón Añadir al carrito de WooCommerce
- Eliminar el botón Añadir a la cesta para determinados productos
- Desactivar en lugar de ocultar o eliminar el botón Añadir a la cesta
¿Por qué ocultar, eliminar o desactivar el botón «Añadir a la cesta»?
El botón «Añadir a la cesta» es un componente crucial de cualquier tienda WooCommerce.
Es la puerta de entrada entre la navegación y la compra, sirviendo como primer paso en el viaje de compra del cliente. Pero puede haber situaciones en las que quieras ocultar, eliminar o desactivar este botón.
Tal vez tengas un sitio de catálogo sin compras directas o quieras que ciertos productos se puedan ver pero no comprar. Sea cual sea tu razón, entender cómo manipular este botón te da un mayor control sobre la funcionalidad de tu tienda.
Entender la diferencia entre ocultar y eliminar
Mientras que ocultar el botón «Añadir al carrito» lo hace invisible, eliminarlo por completo borra el botón del código de tu sitio. Esto significa que aunque alguien inspeccione el código de tu sitio, no encontrará el botón. Esto puede ser útil si quieres evitar que los usuarios expertos se salten el flujo previsto de tu tienda.
💡 Nota: Antes de realizar cualquier cambio, asegúrate de que tu sitio WooCommerce tiene una copia de seguridad. Si algo va mal, puedes restaurar tu tienda a su estado anterior.
¡Experimenta la facilidad de personalización de WooCommerce con Cloudways!
Los cambios sutiles pueden marcar una gran diferencia. Con el alojamiento de Cloudways, personalizar tu tienda WooCommerce es pan comido…
Ocultar el botón Añadir al carrito de la página de producto de WooCommerce
Empecemos por eliminar el botón «Añadir a la cesta» tanto de la página de detalles del producto como de la página de la tienda (página de listado de productos). Para ello, utilizaré los siguientes ganchos:
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart');
Puedes insertar estos ganchos donde creas conveniente. Normalmente, estos ganchos se añaden al archivo functions.php situado en la carpeta de tu tema.
Sin embargo, en algunos casos, esto podría dar lugar a errores. Por lo tanto, recomiendo colocar estos ganchos en el archivo woocommerce.php situado en la carpeta plugins.
Estos son los pasos para acceder al archivo woocommerce.php:
- Navega hasta WordPress → wp-content.
- Haz clic en Plugins → WooCommerce → woocommerce.php.
A continuación, añade el siguiente código:
/**
* Main instance of WooCommerce.
*
* Returns the main instance of WC to prevent the need to use globals.
*
* @since 2.1
* @return WooCommerce
*/
function WC() {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart');
return WooCommerce::instance();
}
Después de añadir el código, guarda el archivo y actualiza tu página. Si lo has hecho correctamente, deberías ver que el botón «Añadir a la cesta» ha desaparecido de tu página.
Ocultar condicionalmente el botón Añadir al carrito de WooCommerce
Puede haber casos en los que sólo quieras ocultar el botón «Añadir a la cesta» para productos concretos. En tales casos, se requiere un enfoque condicional.
Ocultar el botón Añadir al carro de Woocommerce para un producto específico
Sigue estos pasos para ocultar el botón «Añadir a la cesta» de un producto concreto:
- Ve al Panel de control de WordPress → Productos → Todos los productos.
- Pasa el ratón por encima del producto cuyo botón «Añadir a la cesta» quieras ocultar y anota el ID del producto (en este ejemplo, el ID es 25).
A continuación, añade el siguiente código a tu archivo functions.php:
add_action( 'woocommerce_after_shop_loop_item', 'hide_add_to_cart_for_specific_product', 10 );
function hide_add_to_cart_for_specific_product() {
global $product;
if ( 25 == $product->get_id() ) {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
}
}
Con este código, el botón «Añadir a la cesta» se ocultará para el producto con ID 25. En este caso, se trata de una taza personalizable.
¡Impulsa el crecimiento de tu tienda online con Autonomous!
«Entra en el futuro del alojamiento con Cloudways Autonomous. Experimenta una escalabilidad sin fisuras, una velocidad inigualable y una seguridad blindada para tu sitio web».
Ocultar los precios de Woocommerce en las páginas de tienda y categoría
Para eliminar los precios de WooCommerce en la página de la tienda y de la categoría, tienes que abrir el archivo functions.php y añadir el siguiente código;
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
Añadiendo este código, eliminas el precio del producto en las páginas de la tienda y de la categoría. Este es el resultado
Eliminar el botón Añadir a la cesta para determinados productos
Existen tres métodos para eliminar el botón «Añadir a la cesta» de determinadas páginas de productos:
- Elimina el valor de los campos de precio. Esto hará que el producto deje de tener precio, lo que a su vez eliminará el botón «Añadir al carrito».
- Activa la gestión de existencias y pon a cero las existencias del producto.
- Utiliza el filtro para el gancho woocommerce_is_purchasable.
Utiliza el gancho woocommerce_is_purchasable
Utilizaré un filtro dirigido a un ID de producto concreto para el que quiero eliminar el botón «Añadir al carro».
Siempre que este filtro identifique el ID de producto de nuestro producto objetivo, devolverá falso. Como resultado, aunque el precio seguirá siendo visible, un aviso sustituirá al botón «Añadir a la cesta» diciendo : «No se puede comprar el producto».
Para implementarlo, añade el siguiente código a tu archivo functions.php.
add_filter('woocommerce_is_purchasable', 'woocommerce_cloudways_purchasable');
function woocommerce_cloudways_purchasable($cloudways_purchasable, $product) {
return ($product->id == your_specific_product_id (like 22) ? false : $cloudways_purchasable);
}
Desactivar en lugar de ocultar o eliminar el botón Añadir a la cesta
Desactivar el botón «Añadir a la cesta» no es lo mismo que ocultarlo o eliminarlo.
Cuando desactivas el botón, permanece visible pero no se puede hacer clic en él. Esto puede ser útil si quieres mostrar que un producto está normalmente disponible, pero que actualmente está agotado o no está disponible por otras razones.
A continuación te explicamos cómo puedes desactivar el botón «Añadir al carrito» con un código personalizado:
- Ve a Apariencia → Editor de temas y busca el archivo functions.php.
- Añade el siguiente código para desactivar el botón «Añadir a la cesta»:
add_filter( 'woocommerce_is_purchasable', 'disable_add_to_cart_button' );
function disable_add_to_cart_button( $is_purchasable ) {
// You can add conditions here to disable the button for specific products
return false; // return false disables the 'Add to Cart' button
}
- Haz clic en «Actualizar archivo» para guardar los cambios.
Ahora, el botón «Añadir al carrito» debería estar desactivado en tu tienda WooCommerce. Recuerda que esto impedirá que los clientes añadan artículos a su cesta, así que asegúrate de que esto se ajusta a la estrategia de tu tienda.
¡Aloja tus tiendas WooCommerce en nuestros servidores WordPress para una experiencia sin complicaciones!
Olvídate de la gestión del alojamiento y disfruta de resultados de rendimiento rapidísimos con el alojamiento gestionado de Cloudways. Céntrate únicamente en hacer crecer tu marca.
Resumen
En esta entrada del blog, hemos desbloqueado el poder de WooCommerce dominando el botón «Añadir al carrito». Te he mostrado cómo ocultarlo, eliminarlo o desactivarlo, cada uno con sus propias ventajas.
Te animo a que pruebes estos métodos y compruebes la diferencia que pueden marcar en tu tienda. Tanto si quieres agilizar tu catálogo como gestionar la disponibilidad de los productos, estas técnicas te ofrecen un nuevo nivel de control. Puedes utilizar el alojamiento gestionado para tiendas WooCommerce que ofrece Cloudways para conseguir tiendas de comercio electrónico rápidas y escalables.
¿A qué esperas? ¡Sumérgete y empieza a personalizar tu tienda WooCommerce hoy mismo!
Q. ¿Cómo desactivo el botón de añadir al carrito en WooCommerce?
A. Puedes desactivar el botón de añadir al carrito añadiendo un fragmento de código al archivo functions.php de tu tema. Utiliza el siguiente código para eliminar el botón de las páginas de productos individuales:
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
Para la eliminación de todo el sitio, se pueden aplicar condiciones adicionales para productos o categorías específicos.
Q. ¿Cómo puedo eliminar el icono del carrito de la compra en WooCommerce?
A. Para eliminar el icono del carrito de la compra, añade el siguiente CSS al archivo del Personalizador de tu tema o a style.css:
.woocommerce-cart .cart-contents { display: none; }
Esto oculta el icono del carrito del menú de navegación.
Q. ¿Cómo cambio el botón de añadir al carrito en WooCommerce?
A. Para modificar el texto del botón de añadir a la cesta, añade este filtro a tu archivo functions.php:
add_filter('woocommerce_product_add_to_cart_text', function() { return 'Your Custom Text'; });
Para una mayor personalización, ajusta el CSS del botón o modifica su estructura HTML.
Q. ¿Cómo borro el botón del carrito en WooCommerce?
A. Puedes vaciar mediante programación el carrito de WooCommerce utilizando este fragmento:
WC()->cart->empty_cart();
Esto puede añadirse a un botón personalizado o activarse mediante un evento específico para vaciar el carrito cuando sea necesario.
Q. ¿Cómo ocultar el botón de añadir al carrito en WooCommerce?
A. Para ocultar el botón de añadir al carrito, utiliza CSS:
.add_to_cart_button, .single_add_to_cart_button { display: none; }
Para un control dinámico, utiliza una función PHP para eliminarlo condicionalmente.
Q. ¿Cómo elimino el botón de añadir al carrito en WooCommerce?
A. Puedes eliminar el botón de añadir al carrito en todo el sitio o en páginas específicas modificando functions.php. Por ejemplo, para eliminarlo de los archivos de productos:
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);
Q. ¿Cómo desactivo la página del carrito en WooCommerce?
A. Para desactivar la página del carrito, redirige a los usuarios a otra página utilizando esta función en functions.php:
function disable_cart_page_redirect() {
if (is_cart()) {
wp_redirect(home_url());
exit;
}
}
Esto garantiza que los usuarios no puedan acceder a la página del carrito.
Q. ¿Puedo eliminar el botón de añadir al carrito en Shopify?
A. Sí, Shopify permite eliminar el botón de añadir al carrito editando el archivo product-template.liquid del tema. Puedes comentar o eliminar el <form> que contiene el botón de añadir al carrito, o utilizar CSS para ocultarlo.
-->
Owais Khan
Owais trabaja como Director de Marketing en Cloudways, donde se centra en el crecimiento, la generación de demanda y las asociaciones estratégicas. Con más de una década de experiencia en marketing digital y B2B, Owais prefiere construir sistemas que ayuden a los equipos a alcanzar todo su potencial.
