Cómo ocultar y eliminar el botón Agregar al carrito en WooCommerce

Publicado: 2020-12-10

¿Quieres ocultar el botón Añadir al carrito de tu tienda? En esta guía, aprenderá cómo eliminar el botón Agregar al carrito en WooCommerce mediante programación (sin complementos).

¿Por qué eliminar el botón Agregar al carrito en WooCommerce?

Primero, comencemos a comprender por qué es posible que desee ocultar el botón Agregar al carrito. Quitar el botón Añadir al carrito es una de las mejores formas de desactivar el proceso de compra de un determinado producto o tienda. Aunque suene contradictorio, lo cierto es que eliminar el botón Añadir al carrito puede resultar muy útil en algunas situaciones.

Aparte de darte más opciones a la hora de personalizar tu tienda, hay varias razones por las que quizás quieras eliminar el botón Añadir al carrito de algunas páginas de tu tienda:

  • Porque usas WooCommerce como catálogo
  • Cuando te quedas sin existencias o un producto ya no está disponible
  • Para eliminar el botón en función de las condiciones lógicas (es decir, para funciones o productos de usuarios específicos, usuarios que no han iniciado sesión, etc.)
  • Porque el producto aún no está disponible para comprar
  • Cuando desee que los usuarios usen ese botón para enviar un mensaje o programar una entrevista en lugar de seguir el proceso de compra estándar de WooCommerce

Estas son solo algunas situaciones en las que es posible que deba eliminar u ocultar el botón Agregar al carrito en su tienda, pero hay muchas otras. Ahora, avancemos y veamos cómo eliminar el botón Agregar al carrito de WooCommerce de su tienda.

Cómo eliminar el botón Agregar al carrito en WooCommerce

En esta sección, aprenderá diferentes formas de ocultar el botón Agregar al carrito . Para brindarle diferentes alternativas, le mostraremos cómo:

  1. Eliminar u ocultar el botón Agregar al carrito en todo el sitio
  2. Ocultar el botón Agregar al carrito para usuarios que no hayan iniciado sesión
  3. Eliminar el botón Agregar al carrito según los roles de usuario
  4. Ocultar el botón Agregar al carrito en productos específicos
  5. Eliminar el botón temporalmente y mostrarlo automáticamente después de una fecha

Echemos un vistazo a cada uno de ellos.

Antes de que empieces

Como editaremos los archivos principales de WordPress, le recomendamos que cree una copia de seguridad completa de su sitio en caso de que algo salga mal. Además, puede utilizar un tema secundario. Si no tiene uno, puede crear uno siguiendo esta guía o usar un complemento de tema secundario.

1) Eliminar u ocultar el botón Agregar al carrito en todo el sitio

Hay varias formas de ocultar completamente el botón Añadir al carrito de tu tienda . Uno de los más fáciles es usar el siguiente script en el archivo functions.php de su tema hijo:

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 el primer gancho remove_action() , deshabilitamos el botón Agregar al carrito en la página del producto y con el segundo, hacemos lo mismo en la página de la tienda. Sin embargo, una solución más limpia y confiable es deshabilitar la opción de comprar productos. De esa manera, hará que los productos no se puedan comprar y evitará que los usuarios los agreguen al carrito.

Puede hacer eso y hacer que sus productos no se puedan comprar en toda su tienda con el siguiente script:

add_filter( 'woocommerce_is_purchasable', '__return_false');

Tenga en cuenta que esto deshabilitará Agregar al carrito en WooCommerce pero no eliminará el botón. Simplemente lo reemplazará con un botón Leer más , redirigiendo a los usuarios a la página del producto, donde no hay ningún botón. Eliminar boton de agregar al carrito woocommerce Si además de eliminar el botón Añadir al carrito también quieres ocultar el botón Leer más , deberás aplicar una regla CSS. Sin embargo, como los clientes no podrán agregar productos al carrito, no podrán comprar nada, incluso si saben cómo usar la herramienta de desarrollo del navegador para mostrarlo. Cuando sea posible, siempre debe intentar usar el add_filter en lugar de remove_action() .

Para obtener más información sobre cómo usar los ganchos de WooCommerce, consulte esta guía completa.

2. Oculte el botón Agregar al carrito para usuarios que no hayan iniciado sesión

Supongamos que está ejecutando una oferta especial para sus usuarios registrados. Puede crear una página de destino especial y enviar un correo electrónico con el enlace solo a sus clientes registrados, pero ¿y si lo comparten con otros usuarios? Para evitar este tipo de situaciones y asegurarte de que solo ofreces los descuentos a los clientes correctos, puedes eliminar el botón Agregar al carrito de tu tienda WooCommerce solo para usuarios que no hayan iniciado sesión . Para hacer eso, pegue el siguiente script en el archivo functions.php de su tema hijo:

 /* REMOVE ADD TO CART BUTTON FOR NON-LOGGED-IN USERS */
 if (!is_user_logged_in()) {
 // in product page
 add_filter('woocommerce_is_purchasable', '__return_false'); }

Al usar la función nativa de WordPress is_user_logged_in() , deshabilitaremos el botón Agregar al carrito solo para usuarios que no hayan iniciado sesión.

3. Eliminar el botón Agregar al carrito según los roles de los usuarios

Otra opción interesante es eliminar el botón Añadir al carrito en función de los roles de los usuarios . Por ejemplo, veamos cómo ocultar el botón para cualquier usuario administrador:

 /* REMOVE ADD TO CART BUTTON FOR ADMIN USERS */ add_action('wp_loaded','get_user_role'); function get_user_role(){ $current_user = wp_get_current_user(); if(count($current_user->roles)!==0){ if($current_user->roles[0]=='administrator'){ add_filter('woocommerce_is_purchasable', '__return_false'); }
 }
 }

El script recupera el objeto de usuario de WordPress y le aplica dos condicionales. El primero es saber si un usuario tiene un rol y el segundo hacer que los productos no se puedan comprar solo si el rol del usuario coincide con el que especificamos (administrador en este caso). Puede adaptar este código y cambiar el rol que no desea ver en el botón Agregar al carrito editando el rol en if($current_user->roles[0]=='your_role'){.

4. Oculte el botón Agregar al carrito en productos específicos

Ahora, supongamos que se quedó sin existencias de ciertos productos, por lo que desea ocultar temporalmente el botón Agregar al carrito para esos productos .

Para eliminar el botón de productos específicos, copie y pegue este script en el archivo functions.php del tema secundario:

 /* REMOVE ADD TO CART BUTTON ON SPECIFIC PRODUCT IDs*/ add_filter('woocommerce_is_purchasable', 'filter_is_purchasable', 10, 2); function filter_is_purchasable($is_purchasable, $product ) { global $product; if( in_array( $product->get_id(), not_purchasable_ids() )) { return false; } return $is_purchasable; } function not_purchasable_ids() { return array( 624,625 ); }

En este script de muestra, deshabilitamos el botón Agregar al carrito para los productos con los ID 624 y 625. Para adaptarlo a su tienda WooCommerce, simplemente reemplace esos ID con los ID de su producto. Como puede ver, puede agregar múltiples productos simplemente separando las ID con una coma.

Para averiguar el ID de un producto, vaya a su panel de control de WordPress > WooCommerce > Productos y desplace el mouse sobre un producto de la lista. Alternativamente, si hace clic en el producto, verá su ID en la URL de su navegador.

5. Deshabilite el botón Agregar al carrito para ciertas categorías

Del mismo modo, puede eliminar el botón Agregar al carrito para ciertas categorías . Por ejemplo, supongamos que desea ocultar el botón de la categoría "Laptops", usaría este código:

 add_action('wp', 'QL_remove_add_to_cart_from_category' );
 función QL_remove_add_to_cart_from_category(){
 if( is_product_category( 'laptops' ) ) {
 remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
 }
 }

Simplemente tome este código y recuerde reemplazar "laptops" en la línea 3 con el nombre de la categoría en la que desea ocultar el botón Agregar al carrito.

6. Eliminar el botón Agregar al carrito temporalmente y mostrarlo automáticamente después de una fecha

Ahora, llevemos las cosas un paso más allá y combinemos algunas de las cosas que hemos aprendido. Imagina que estás a punto de lanzar un producto, así que creas la página del producto con todas sus características. Si desea utilizar esa página para generar publicidad y promocionar el producto antes del lanzamiento, puede ocultar el botón Agregar al carrito hasta la fecha de lanzamiento y luego mostrarlo automáticamente el día del lanzamiento .

Por ejemplo, supongamos que planea lanzar su producto el 15 de diciembre de 2020, por lo que desea eliminar el botón Agregar al carrito hasta entonces y luego mostrar el botón en esa fecha específica. Para hacer eso, simplemente copie y pegue el siguiente script:

 add_filter( 'woocommerce_is_purchasable', 'hide_add_to_cart_button_until_date', 10, 2 ); function hide_add_to_cart_button_until_date( $is_purchasable = true, $product ) { $current_date = date('Ym-d'); $release_date = date( 'Ym-d', strtotime('2020-12-15') ); if( strtotime($current_date) < strtotime($release_date) && $product->get_id() == 624 ) { $is_purchasable = false; } return $is_purchasable; }

Esto reemplazará el botón Agregar al carrito con un botón Leer más que redirige a los usuarios a la página del producto hasta la fecha de lanzamiento. Ahora, comprendamos mejor cómo funciona el script. El código compara la fecha actual con la fecha de lanzamiento y, si la fecha actual es anterior, hace que el producto no se pueda comprar.

Cuando la fecha actual sea igual o posterior a la fecha de lanzamiento, el producto estará disponible para comprar y se mostrará automáticamente el botón Agregar al carrito. Recuerda no solo especificar la fecha sino también el ID del producto (624 en nuestro ejemplo).

Bonificación: personaliza el botón Agregar al carrito

Para algunas de las situaciones que describimos anteriormente, es muy útil personalizar el botón Agregar al carrito y causar una buena impresión en sus compradores. Además de ocultar el botón, puede cambiar su texto y color, agregar texto encima o debajo, editar el comportamiento del botón y más. Comencemos con algo simple y veamos cómo cambiar el texto del botón Agregar al carrito.

Digamos que en lugar de "Agregar al carrito", desea mostrar el texto " Comprar este artículo " en el botón. Simplemente copie y pegue el siguiente script en el archivo functions.php :

 ('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');
función QL_customize_add_to_cart_button_woocommerce(){
return __('Comprar este artículo', 'woocommerce');
}

Además, para cambiar el color del botón en productos individuales, use este script y elija los colores que desee.

 .producto único .producto .single_add_to_cart_button.button {
color de fondo: #FF0000;
color: #C0C0C0;
}

Estos son solo dos ejemplos básicos, pero puede hacer mucho más y personalizar el botón de muchas otras maneras. Para obtener más ejemplos e información, consulte nuestra guía paso a paso sobre cómo editar el botón Agregar al carrito.

Conclusión

En conclusión, ocultar el botón Añadir al carrito puede ser útil en muchas situaciones diferentes:

  • Cuando usas WooCommerce como catálogo
  • Cuando te quedas sin existencias o un producto ya no está disponible
  • Para ejecutar campañas para ciertos tipos de usuarios o roles de usuario
  • Cuando estás a punto de lanzar un nuevo producto
  • Cuando usa el botón para realizar una determinada acción que no sigue el proceso de compra estándar de WooCommerce

En esta guía, ha aprendido diferentes formas de eliminar el botón Agregar al carrito. Hemos visto cómo ocultarlo de toda la tienda, para ciertos productos, usuarios y roles de usuario, e incluso cómo ocultarlo y luego volver a mostrarlo automáticamente después de una fecha específica. Esto le dará un poco de flexibilidad para personalizar su tienda en diferentes situaciones. Simplemente use estos scripts como base y edítelos para aprovecharlos al máximo en su tienda.

Si no desea eliminar el botón Agregar al carrito pero tiene problemas con él, le recomendamos que consulte esta guía que lo ayuda a solucionar los problemas más comunes con Agregar al carrito.

Para obtener más información sobre cómo aprovechar al máximo el botón Agregar al carrito, consulte los siguientes tutoriales:

  • Cómo personalizar el botón Agregar al carrito en WooCommerce
  • Función WooCommerce Add to Cart programáticamente

¿Has tenido algún problema con los guiones? ¿Conoces alguna otra forma de eliminar el botón Agregar al carrito? ¡Háganos saber en la sección de comentarios!