Tutorial WooCommerce: Cómo ocultar, eliminar o desactivar el botón "Añadir al carrito"

Un lector ha dejado un comentario preguntándose cómo ocultar, eliminar o desactivar "Añadir a la cesta". Por este motivo, he preparado un sencillo tutorial para ti.

Para ello, se necesita un mayor nivel de personalización para actualizar la funcionalidad de la tienda bajo demanda, y la vasta biblioteca de plugins de WordPress y extensiones de WooCommerce ofrece una amplia gama de opciones de personalización, lo que resulta en una experiencia más fácil de usar.

En este artículo, te mostraremos cómo ocultar, eliminar o desactivar el botón "Añadir al carrito" en tu tienda WooCommerce para artículos agotados o cuando sólo se muestra el catálogo de productos.

¿Por qué debo ocultar, eliminar o desactivar el botón "Añadir a la cesta"?

"Añadir a la cesta"Los botones son un componente clave en cualquier tienda WooCommerce.
Tiende un puente entre la navegación y la compra y es el primer paso en el proceso de compra del cliente. Sin embargo, si existe la necesidad de ocultar, eliminar o desactivar este botón.

Por ejemplo, la tienda es un catálogo de sólo visualización sin capacidad de compra directa; o, se desea que ciertos productos estén visibles pero no disponibles para la compra. Cualquiera que sea la razón, saber cómo manejar este botón le da un mayor control sobre la funcionalidad de la tienda.

Entender la diferencia entre "ocultar" y "eliminar".

Ocultar el botón "Añadir a la cesta" lo hace invisible en la página, mientras que eliminarlo lo elimina por completo del código del sitio. Esto significa que aunque alguien compruebe el código del sitio, no encontrará el botón. Esto puede ser muy útil si quieres evitar que usuarios expertos se salten los procesos de tu tienda.

💡 tome nota deAntes de realizar cualquier cambio, asegúrese deHaga una copia de seguridad de su sitio web.. Si algo va mal, puede restaurar rápidamente el sitio a su estado anterior.

Cómo ocultar el botón "Añadir al carrito" de la página de producto de WooCommerce

A continuación se detallan los pasos para eliminar el botón "Añadir al carrito" de las páginas de detalles de productos de WooCommerce y de las páginas de la tienda (páginas de listado de productos). Para ello, puede 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' );

Estos ganchos se pueden insertar donde se crea conveniente. Normalmente, estos ganchos se añaden a la carpeta del tema en el directorio funciones.php La documentación es la práctica más habitual.

Ubicación recomendada del archivo

Aunque añadir el código al funciones.php es común, pero puede causar errores en algunos casos. Por lo tanto, es más recomendable colocar estos ganchos en la carpeta plugins en la carpeta woocommerce.php Documentación.

Aquí está una visita a woocommerce.phpPasos para la documentación:

Vaya a WordPress → wp-content.
Haz clic en Plugins → WooCommerce → woocommerce.php.

A continuación, añada el siguiente código:

/**

 * Instancia principal de WooCommerce.

 *

 * Devuelve la instancia principal de WC para evitar la necesidad de usar globals.

 * *

 * @desde 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');

    devolver WooCommerce::instance();

}

Después de añadir el código, guarde el archivo y actualice la página. Si se hace correctamente, debería ver "Añadir a la cesta" ha sido eliminado de la página.

Condicional Ocultar WooCommerce Añadir al carro botón

En algunos casos, si sólo desea ocultar el botón "Añadir a la cesta" para un producto específico. En este caso, es necesario utilizar el método condicional.

Ocultar los botones de añadir al carrito de Woocommerce específicos de cada producto

Siga los pasos que se indican a continuación para ocultar el botón "Añadir a la cesta" de un producto específico:

Vaya a Panel de WordPress → Productos → Todos los productos.
Pase el ratón por encima del producto para el que desea ocultar el botón Añadir a la cesta y anote el ID del producto (en este ejemplo, el ID es 25).

A continuación, añada el siguiente código al sitio webfunciones.phpDocumentación:

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" del producto ID 25 quedará oculto. En este ejemplo, se trata de una taza personalizable.

Ocultar los precios de Woocommerce en las páginas de tiendas y categorías

Para eliminar los precios de WooCommerce en las páginas de tiendas y categorías, es necesario abrir el archivofunciones.phpy añada el siguiente código;

remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

Añadiendo este código, puede eliminar los precios de los productos de las páginas de tiendas y categorías. El resultado es el siguiente:

Eliminar el botón "Añadir a la cesta" para productos específicos.

Hay tres formas de eliminar el botón "Añadir a la cesta" de una página de producto específica:

Elimine el valor del campo de precio. Esto hará que el producto ya no tenga precio, eliminando así el botón Añadir a la cesta.
Active la Gestión de Inventario y ponga el Inventario de Productos a cero.
Uso de woocommerce_is_purchasableGanchos para filtros.

Uso del gancho woocommerce_is_purchasable

Aquí se utiliza un filtro para eliminar el botón "Añadir a la cesta" de un ID de producto específico.

Siempre que este filtro reconozca el ID de producto de nuestro producto de destino, devolverá false, de modo que mientras el precio siga visible, el botón Añadir a la cesta se sustituirá por una notificación que diga"No se puede comprar el producto".

Para ello, añada el siguiente código al sitio webfunciones.phpes suficiente.

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 el botón está desactivado, permanece visible pero no se puede hacer clic en él. Esto es útil si desea mostrar que un producto está normalmente disponible, pero que actualmente está agotado o no está disponible por alguna otra razón.

A continuación se explica cómo desactivar el botón "Añadir al carro" mediante código personalizado:

Vaya a Apariencia → Editor de temas y busquefunciones.phpDocumentación.
Añada el siguiente código para desactivar el botón "Añadir al carrito":

add_filter( 'woocommerce_is_purchasable', 'disable_add_to_cart_button' );

function disable_add_to_cart_button( $is_purchasable ) {

    // Puede añadir condiciones aquí para desactivar el botón para productos específicos.

    return false; // return false desactiva el botón 'Añadir al carrito

}

Haga clic en "Documentos actualizados" para guardar los cambios.

El botón "Añadir al carrito" debería estar ahora desactivado en la tienda WooCommerce.

resúmenes

En este blog, se explora el poder de WooCommerce, con un enfoque en cómo ocultar, eliminar o desactivar el botón "Añadir al carrito", y los beneficios únicos de estos métodos.

Preguntas frecuentes

1. ¿Cómo desactivar el botón "Añadir al carrito" en WooCommerce?

Se encuentra en la sección funciones.php El archivo utiliza un fragmento de código para desactivar el botón "Añadir a la cesta", ya sea para un producto específico o para todo el sitio:

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);

2. ¿Cómo eliminar el icono del carrito de la compra de WooCommerce?

Para eliminar el icono del carrito de la compra, ya sea en el personalizador del tema o en la sección style.css con el siguiente código CSS personalizado:

.woocommerce-cart .cart-contents {
    display: none;
}

3. ¿Cómo puedo cambiar el botón "Añadir al carrito" en WooCommerce?

Si necesita cambiar el texto de un botón, puede hacerlo en el botón funciones.php Añada el siguiente código al archivo:

add_filter('woocommerce_product_add_to_cart_text', function() { return 'Tu texto personalizado'; });

Si necesita cambiar el estilo o la funcionalidad, puede personalizar el HTML y CSS del botón.

4. ¿Cómo puedo vaciar mi carrito de la compra de WooCommerce?

El carrito de WooCommerce se puede vaciar programáticamente con el siguiente código:

WC()->carro->carro_vacío();

Añada el código a una ubicación adecuada (por ejemplo, plugin o funciones.php ), tras lo cual se vaciará el contenido del carro.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres