Agregar un botón de «vaciar carrito» en WooCommerce

WooCommerce, por defecto, permite a los usuarios eliminar productos individualmente desde la página del carrito, pero no incluye un botón para vaciar todo el carrito de una sola vez. Agregar esta función puede mejorar la experiencia del usuario y facilitar la gestión de compras. En este artículo, aprenderás cómo añadir un botón de «Vaciar Carrito» tanto en la página del carrito como en la página de finalizar compra.

Agregar el botón de «vaciar carrito» en la página del carrito

Para agregar un botón de «Vaciar Carrito» en la página del carrito, puedes usar el siguiente código en el archivo functions.phpde tu tema o en un plugin personalizado:

<?php
function add_empty_cart_button_to_cart() {
    if ( WC()->cart->is_empty() ) {
        return;
    }
    
    $clear_cart_url = wc_get_cart_url() . '?empty-cart=true';
    echo '<p><a href="' . esc_url( $clear_cart_url ) . '" class="button wc-empty-cart">' . __( 'Vaciar Carrito', 'woocommerce' ) . '</a></p>';
}
add_action( 'woocommerce_cart_actions', 'add_empty_cart_button_to_cart' );

function handle_empty_cart() {
    if ( isset( $_GET['empty-cart'] ) ) {
        WC()->cart->empty_cart();
    }
}
add_action( 'init', 'handle_empty_cart' );

Este código agrega un botón dentro de la página del carrito que vacía el carrito cuando se hace clic en él.

Agregar el botón de «vaciar carrito» en la página de finalizar compra

WooCommerce no muestra por defecto la lista de productos en la página de finalizar compra, pero aún así podemos agregar el botón en esta sección.

Agrega el siguiente código a tu functions.php :

<?php
function add_empty_cart_button_to_checkout() {
    if ( WC()->cart->is_empty() ) {
        return;
    }
    
    $clear_cart_url = wc_get_checkout_url() . '?empty-cart=true';
    echo '<p><a href="' . esc_url( $clear_cart_url ) . '" class="button wc-empty-cart">' . __( 'Vaciar Carrito', 'woocommerce' ) . '</a></p>';
}
add_action( 'woocommerce_review_order_before_payment', 'add_empty_cart_button_to_checkout' );

Este código muestra el botón justo antes de la sección de pago en la página de finalizar compra.

Estilizar el botón de «vaciar carrito»

Para mejorar la apariencia del botón, agrega el siguiente CSS a tu archivo  style.css o a la sección de CSS personalizado de tu tema:

.wc-empty-cart {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #ff3b3b;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}
.wc-empty-cart:hover {
    background-color: #cc0000;
}

Con estos simples pasos, puedes agregar un botón de «Vaciar Carrito» en la página del carrito y en la página de finalizar compra en WooCommerce. Esto proporcionará a tus clientes una forma rápida y sencilla de limpiar su carrito en caso de que deseen comenzar de nuevo.

Si estás desarrollando un sitio de eCommerce con WooCommerce, esta funcionalidad puede mejorar la experiencia de compra y reducir posibles frustraciones en el proceso de pago.