✅Selector de Cantidad y Checkout Directo en Página de Tienda en WooCommerce

WooCommerce, siendo uno de los plugins de comercio electrónico más populares para WordPress, ofrece una flexibilidad significativa para personalizar la apariencia y el comportamiento de la tienda en línea.

Una de las maneras de lograr esto es a través del uso de funciones de WordPress y ganchos proporcionados por WooCommerce. En este artículo, nos sumergiremos en un ejemplo práctico, desglosando cada parte del código, para comprender cómo personalizar la presentación de los productos en la página de tienda agregando un selector de cantidad y un botón de compra DIRECTA e información dinámica del stock disponible.

Importante: Dependiendo de tu tema tendrás que modificar el código a tus necesidades. Para el ejemplo utilizaremos el tema Blocksy, (uno de mis preferidos para tiendas online actualmente).

Desglose del Código:

1. Eliminar el botón de «Añadir al Carrito»

remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);
Lenguaje del código: JavaScript (javascript)

Esta línea de código utiliza la función remove_action para eliminar el botón de «Añadir al Carrito» del bucle de productos. Este botón se muestra normalmente en la página de tienda y categorías.

2. Agregar un Selector de Cantidad, Descripción Corta y agregar el Botón «Comprar Ahora»

function personalizar_bucle_productos() {
    global $product;

    if ($product && $product->is_type('simple') && $product->is_purchasable()) {
        // Verificar si el producto está agotado
        $is_in_stock = $product->is_in_stock();

        // Obtener la cantidad de stock disponible
        $stock_quantity = $product->get_stock_quantity();

        // Mostrar el formulario de cantidad, la cantidad de stock y el botón "Comprar ahora" solo si el producto está en stock
        if ($is_in_stock) {
            echo '<div class="product-actions">';
            echo '<form class="cart" action="' . esc_url(wc_get_checkout_url()) . '" method="post">';
            
              // Mostrar la cantidad de stock disponible
            echo '<p class="stock-quantity">Disponible: ' . esc_html($stock_quantity) . ' unidades</p>';
			
			
			// Formulario de cantidad
            woocommerce_quantity_input(array('min_value' => 1, 'max_value' => $stock_quantity));

            // Botón "Comprar ahora"
            echo '<input type="hidden" name="add-to-cart" value="' . esc_attr($product->get_id()) . '" />';
            echo '<button type="submit" class="button alt">Comprar ahora</button>';
            
            echo '</form>';
            echo '</div>';
        }

        // Mostrar la descripción corta del producto debajo de la imagen
        echo '<div class="product-description">' . wpautop(do_shortcode($product->get_short_description())) . '</div>';
    }
}

add_action('woocommerce_after_shop_loop_item', 'personalizar_bucle_productos', 9);
Lenguaje del código: PHP (php)

En este fragmento, creamos una función personalizada (personalizar_bucle_productos) y la conectamos al gancho woocommerce_after_shop_loop_item. La función verifica si el producto es simple y si se puede comprar. Si es así, muestra un formulario de cantidad y un botón «Comprar ahora». De lo contrario, si el producto está agotado ocultará el selector de cantidad y el botón de «Comprar ahora».

3. Desactivar Enlaces del Título e Imagen

remove_action('woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10);
remove_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_link_open', 10);
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5);
remove_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_product_link_close', 5);
Lenguaje del código: JavaScript (javascript)

Estas líneas eliminan los enlaces que rodean el título e imagen del producto. Esto se hace para evitar que los clientes accedan a la página individual del producto al hacer clic en el título o la imagen.

El código completo sería el siguiente:

(Agrégalo en el functions.php de tu tema hijo o en un plugin como CODE SNIPPETS).

// Eliminar el botón de "Añadir al Carrito" en el bucle de productos en la página de tienda y categorías
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);

// Personalizar el bucle de productos
function personalizar_bucle_productos() {
    global $product;

    if ($product && $product->is_type('simple') && $product->is_purchasable()) {
        // Verificar si el producto está agotado
        $is_in_stock = $product->is_in_stock();

        // Obtener la cantidad de stock disponible
        $stock_quantity = $product->get_stock_quantity();

        // Mostrar el formulario de cantidad, la cantidad de stock y el botón "Comprar ahora" solo si el producto está en stock
        if ($is_in_stock) {
            echo '<div class="product-actions">';
            echo '<form class="cart" action="' . esc_url(wc_get_checkout_url()) . '" method="post">';
            
              // Mostrar la cantidad de stock disponible
            echo '<p class="stock-quantity">Disponible: ' . esc_html($stock_quantity) . ' unidades</p>';
			
			
			// Formulario de cantidad
            woocommerce_quantity_input(array('min_value' => 1, 'max_value' => $stock_quantity));

            // Botón "Comprar ahora"
            echo '<input type="hidden" name="add-to-cart" value="' . esc_attr($product->get_id()) . '" />';
            echo '<button type="submit" class="button alt">Comprar ahora</button>';
            
            echo '</form>';
            echo '</div>';
        }

        // Mostrar la descripción corta del producto debajo de la imagen
        echo '<div class="product-description">' . wpautop(do_shortcode($product->get_short_description())) . '</div>';
    }
}

add_action('woocommerce_after_shop_loop_item', 'personalizar_bucle_productos', 9);


// Desactivar los enlaces del título y de la imagen a la página individual del producto
remove_action('woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10);
remove_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_link_open', 10);
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5);
remove_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_product_link_close', 5);
Lenguaje del código: PHP (php)

Conclusión

En este artículo, hemos explorado cómo personalizar la apariencia de los productos en la página de tienda de WooCommerce utilizando funciones de WordPress y ganchos proporcionados por el propio WooCommerce. Desde la eliminación del botón de «Añadir al Carrito» hasta la reubicación del selector de cantidad y el botón «Comprar ahora», estas modificaciones permiten adaptar la presentación de productos según las necesidades específicas de cada tienda en línea. Al comprender y utilizar estas técnicas, los propietarios de tiendas pueden ofrecer una experiencia de compra más personalizada y atractiva para sus clientes.

Nos vemos en el siguiente tutorial. Un saludo.