
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.
<?php add_filter( 'woocommerce_admin_product_actions', function( $actions, $post ) { $url = wp_nonce_url( admin_url( "admin-ajax.php?action=zero_stock_product&product_id={$post->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ónzero_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.
<?php add_action( 'wp_ajax_zero_stock_product', function() { if ( empty( $_GET['product_id'] ) || ! wp_verify_nonce( $_GET['_wpnonce'], 'zero_stock_' . $_GET['product_id'] ) ) { wp_die( __( 'Acceso no permitido', 'woocommerce' ) ); } $product_id = intval( $_GET['product_id'] ); $product = wc_get_product( $product_id ); if ( ! $product ) { wp_die( __( 'Producto no encontrado', 'woocommerce' ) ); } if ( $product->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:
<?php add_action( 'admin_head', function() { echo '<style> .row-actions .zero_stock_product a { color: #d63638 !important; } </style>'; });
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.