Agregar un botón personalizado en el listado de productos en WooCommerce

En este artículo, te mostraré cómo agregar un botón personalizado en la columna de acciones del listado de productos en WooCommerce. Como ejemplo, implementaremos un botón que, al hacer clic, establecerá el stock del producto en 0. Si el producto es variable, también se ajustará el stock de todas sus variaciones.

Agregar el botón en la columna de acciones

En WooCommerce, podemos modificar la lista de productos en el admin usando el filtro woocommerce_admin_product_actions. Usaremos este filtro para agregar nuestro botón.

ID}" ),
        'zero_stock_' . $post->ID
    );

    $actions['zero_stock'] = [
        'url'    => $url,
        'name'   => __( 'Poner stock en 0', 'woocommerce' ),
        'action' => 'zero_stock_product', // Clases CSS personalizadas
    ];

    return $actions;
}, 10, 2 );

Explicación:

• Agregamos un nuevo botón en la columna de acciones.
• Generamos una URL que apunta a admin-ajax.php con la acción zero_stock_product.
• Usamos wp_nonce_url() para evitar accesos no autorizados.

Crear la función para procesar la acción

Ahora, debemos manejar la acción AJAX que se activará al hacer clic en el botón.

is_type( 'variable' ) ) {
        $variations = $product->get_children();
        foreach ( $variations as $variation_id ) {
            $variation = wc_get_product( $variation_id );
            if ( $variation ) {
                $variation->set_stock_quantity( 0 );
                $variation->set_stock_status( 'outofstock' );
                $variation->save();
            }
        }
    }

    $product->set_stock_quantity( 0 );
    $product->set_stock_status( 'outofstock' );
    $product->save();

    wp_safe_redirect( wp_get_referer() );
    exit;
});

Explicación:

• Se verifica la validez del nonce para evitar accesos no autorizados.
• Se obtiene el ID del producto y se verifica si es válido.
• Si el producto es variable, se obtiene cada variación y se actualiza el stock.
• Se actualiza el stock del producto principal.
• Se redirige de vuelta a la lista de productos después de la ejecución.

Agregar Estilos para el Botón

Podemos añadir un poco de CSS para destacar nuestro botón en la interfaz de WooCommerce:

        .row-actions .zero_stock_product a {
            color: #d63638 !important;
        }
    ';
});

Explicación:

• Se cambia el color del botón a rojo para indicar que es una acción importante.

Después de implementar este código, en la columna de acciones del listado de productos en WooCommerce, verás un nuevo botón llamado «Poner stock en 0». Al hacer clic, el stock del producto (o de sus variaciones) se actualizará automáticamente a 0.