Cómo ocultar/eliminar el botón Agregar al carrito en WooCommerce (paso a paso)

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

Comencemos por averiguar por qué es posible que desee ocultar el botón Agregar al carrito. Una de las formas más efectivas de deshabilitar el proceso de compra de un producto o tienda en específico es quitar el botón Agregar al carrito. Aunque parezca extraño, eliminar el botón Agregar al carrito puede ser extremadamente útil en algunas circunstancias.

Hay muchas razones por las que es posible que desee eliminar el botón Agregar al carrito de algunas páginas de su tienda, además de brindarle más opciones de personalización:

  1. Cuando un producto está agotado o ya no está disponible
  2. Para desactivar el botón en función de la lógica (es decir, para roles de usuario o productos específicos, usuarios que no han iniciado sesión, etc.)
  3. El producto aún no está disponible para su compra.
  4. Cuando desee que los clientes usen ese botón en lugar del proceso de compra estándar de WooCommerce para enviar un mensaje o concertar una entrevista.

Estos son solo algunos ejemplos de cuándo es posible que desee ocultar o eliminar el botón Agregar al carrito de su tienda. Comencemos a eliminar el botón Agregar al carrito de WooCommerce de su tienda.

 

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

En este artículo, aprenderá cómo ocultar el botón Agregar al carrito de varias maneras. Le mostraremos cómo hacer lo siguiente para darle más opciones:

  1. Quite u oculte el botón Agregar al carrito en todo el sitio.
  2. Oculte el botón Agregar al carrito para los usuarios que no hayan iniciado sesión.
  3. Elimine el botón Agregar al carrito en función de las funciones de los usuarios.
  4. Ocultar el botón Añadir al carrito en determinados productos.
  5. Deshabilite el botón Agregar al carrito solo para algunas categorías
  6. Retire el botón temporalmente y volverá a aparecer después de una fecha.
  7. Echemos un vistazo a cada uno de ellos en diferentes secciones.

Nota: Dado que editaremos los archivos principales de WordPress, recomendamos hacer una copia de seguridad completa de su sitio en caso de que algo salga mal. También puede utilizar un tema hijo. Si aún no tiene uno, puede crear uno usted mismo o usar un complemento de tema secundario.

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

Hay varias opciones para eliminar el botón Agregar al carrito por completo de su tienda. Uno de los más simples es colocar el siguiente script en su tema infantil archivo functions.php:

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);

Eliminamos el botón Agregar al carrito en la página del producto con el primer gancho remove action(), y hacemos lo mismo en la página del carrito de compras con el segundo. Deshabilitar la opción de comprar productos, por otro lado, es una solución más ordenada y confiable. Podrá hacer que los productos no estén disponibles para la compra y evitar que los usuarios los agreguen a su carrito de esta manera.

Con el siguiente script, puede hacerlo y hacer que todos sus productos no estén disponibles para su compra en su tienda:

add_filter('woocommerce_is_purchasable', '__return_false');

Esto deshabilitará el botón Agregar al carrito de WooCommerce, pero no el botón en sí. Simplemente se reemplazará con un botón Leer más, que redirigirá a los usuarios a la página del producto, que no tendrá ningún botón.

Si desea ocultar el botón Leer más además del botón Agregar al carrito, debe usar una regla CSS. Los clientes, por otro lado, no podrán comprar nada porque no podrán agregar productos al carrito, incluso si aprenden a usar la herramienta de desarrollo del navegador para mostrarlo. Utilice el gancho add filter() en lugar del gancho remove action() siempre que sea posible.

Leer más: Cómo cambiar el texto del botón Agregar al carrito

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

Suponga que está ejecutando una promoción por tiempo limitado para sus usuarios registrados. Puede crear una página de destino única y enviar un correo electrónico solo a sus usuarios registrados con el enlace, pero ¿qué pasa si lo comparten con otros? Puede eliminar el botón Agregar al carrito de su tienda WooCommerce solo para usuarios que no hayan iniciado sesión para evitar que esto suceda y asegurarse de que solo otorga descuentos al consumidor objetivo. Para hacerlo, pegue el siguiente script en el archivo functions.php de su tema hijo:

si (!is_user_logged_in()) {
// en la página del producto
add_filter('woocommerce_is_purchasable', '__return_false');

}

Deshabilitaremos el botón Agregar al carrito solo para usuarios que no hayan iniciado sesión aplicando la función nativa de WordPress si el usuario ha iniciado sesión ().

3. Elimine el botón Agregar al carrito en función de las funciones de los usuarios

Otra opción brillante es deshabilitar el botón Agregar al carrito según el rol del usuario. Echemos un vistazo a cómo hacer que el botón sea invisible para cualquier usuario administrador:

add_action('wp_loaded','get_user_role');

función get_user_role(){

$usuario_actual = wp_get_usuario_actual();

  if(count($usuario_actual->roles)!==0){

  if($usuario_actual->roles[0]=='administrador'){

add_filter('woocommerce_is_purchasable', '__return_false');

}

}

}

El objeto de usuario de WordPress se recupera y el script le aplica dos condicionales. El primero es determinar si un usuario tiene un rol, y el segundo es hacer que los productos no estén disponibles para la compra solo si el rol del usuario coincide con el que especificamos (administrador en este caso). Seguramente puede usar este código y modificar 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 ciertos productos

Supongamos que no tiene existencias de algunos artículos y desea ocultar temporalmente el botón Agregar al carrito para esos artículos.

Copie y pegue el siguiente script en el archivo functions.php del tema secundario para eliminar el botón de productos específicos:

add_filter('woocommerce_is_purchasable', 'filter_is_purchasable', 10, 2);

función filter_is_purchasable($is_purchasable, $product) {

producto $ global;

if( in_array( $producto->get_id(), not_purchasable_ids() )) {

falso retorno;

}

devuelve $is_comprable;

}

función no_comprables_ids() {

matriz de retorno (624,625);

}

El botón Agregar al carrito está deshabilitado para los productos con ID 624 y 625 en este script de muestra. Considere reemplazar esas ID con las ID de su producto WooCommerce para ajustarlo a su tienda. Como puede ver, puede permitir productos ilimitados simplemente usando una coma para separar las ID.

Ve a tu panel de WordPress > WooCommerce > Productos y pasa el mouse sobre un producto en la lista para ver su ID.

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

También puede deshabilitar el botón Agregar al carrito para categorías particulares. Por ejemplo, si quisieras ocultar el botón de la categoría "Laptops", podrías usar el siguiente 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 copie este código y reemplace "laptops" en la línea 3 con el título de la categoría donde se debe ocultar el botón Agregar al carrito.

6. Retire el botón temporalmente y volverá a aparecer después de una fecha

Llevemos las cosas a otro nivel y juntemos algo de lo que hemos leído. Suponga que está a punto de lanzar un producto y ya ha creado una página de producto con todas sus características. Si desea utilizar esa página para informar a sus clientes sobre el lanzamiento y promocionar el producto antes de que se publique, puede ocultar el botón Agregar al carrito hasta el lanzamiento oficial y luego hacer que aparezca automáticamente el día del lanzamiento.

Supongamos que planea presentar su producto el 15 de diciembre de 2020 y desea ocultar el botón Agregar al carrito hasta entonces, luego mostrarlo nuevamente el 15 de diciembre. Para hacerlo, simplemente copie y pegue el siguiente script:

add_filter('woocommerce_is_purchasable', 'hide_add_to_cart_button_until_date', 10, 2);

función hide_add_to_cart_button_until_date( $is_purchasable = true, $producto ) {

$fecha_actual = fecha('Am-d');

$fecha_de_lanzamiento = fecha( 'Ym-d', strtotime('2020-12-15') );

if( strtotime($fecha_actual) < strtotime($fecha_de_lanzamiento) && $producto->get_id() == 624 ) {

$es_comprable = falso;

}

devuelve $is_comprable;

}

El botón Agregar al carrito se reemplazará con un botón Leer más que llevará a los usuarios a la página del producto hasta la fecha de lanzamiento. Echemos un vistazo más de cerca a cómo funciona el script ahora. El código compara la fecha actual con la fecha de lanzamiento y, si la fecha actual es anterior, el producto no está disponible para la compra.

El producto estará disponible para su compra cuando la fecha actual sea igual o superior a la fecha de lanzamiento, y automáticamente aparecerá el botón Añadir al carrito. Recuerda incluir la fecha así como el ID del producto (624 en nuestro ejemplo).

Ha aprendido varios métodos para eliminar el botón Agregar al carrito en esta guía. Hemos visto cómo ocultarlo en toda la tienda, para productos, usuarios y funciones de usuario específicos, e incluso cómo ocultarlo durante un día determinado y luego volver a mostrarlo automáticamente. Esto le da un poco más de libertad cuando se trata de personalizar su tienda para diferentes escenarios.

Simplemente use estos scripts como punto de partida y modifíquelos para que se ajusten a las necesidades de su tienda.

 

Sobre la autora
Daniel Luke
Daniel es diseñador y desarrollador web. Ha sido desarrollador durante los últimos 10 años trabajando con varios temas de WordPress, lo que le permite comparar y contrastar diferentes temas, comprender las fortalezas y debilidades para desarrollar revisiones objetivas del mundo real. También es desarrollador de aplicaciones móviles y revisor de tecnología. A lo largo de varios años ha desarrollado sus propias aplicaciones móviles, tanto en Android como en iPhone. Esta especialización práctica en desarrollo web y móvil le permite ser una voz autorizada cuando se trata de informes tecnológicos.

Una cosa más... ¿Sabías que las personas que comparten cosas útiles como esta publicación también se ven IMPRESIONANTES? ;-)
Por favor, deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!

Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.

Autor (es) destacado en:  Logotipo de la revista Inc   Logotipo de Sitepoint   Logotipo de CSS Tricks    logotipo de webdesignerdepot   Logotipo de WPMU DEV   y muchos más ...