From woocommerce-commerce
Build WooCommerce admin interfaces: settings pages, menus, product data tabs/panels, order meta boxes, React analytics, and reports.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin woocommerce-commerceThis skill is limited to using the following tools:
**Fetch live docs**:
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Fetch live docs:
site:developer.woocommerce.com settings api for Settings API guidesite:developer.wordpress.org plugins administration-menus for WordPress admin menuswoocommerce admin custom settings page for current patternsPayment gateways and shipping methods use WC_Settings_API:
init_form_fields() as associative arraytext, textarea, select, multiselect, checkbox, password, title, decimal, color$this->generate_settings_html()get_option() / update_option()Add a new tab to WooCommerce > Settings:
WC_Settings_Page$this->id and $this->labelget_settings_for_default_section() — return settings arraywoocommerce_get_settings_pages filterEach field is an array with keys:
id — option name (stored in wp_options)title — field labeltype — text, select, checkbox, textarea, number, sectionend, titledefault — default valuedesc — description textoptions — for select/multiselectcss — inline CSS for the inputadd_submenu_page( 'woocommerce', $page_title, $menu_title, $capability, $slug, $callback )
add_menu_page() for standalone admin sections — less common for WC extensions.
manage_woocommerce — WooCommerce admin capabilityedit_shop_orders — order managementedit_products — product managementFilter woocommerce_product_data_tabs:
$tabs['my_tab'] = [
'label' => __( 'My Tab', 'my-plugin' ),
'target' => 'my_tab_data',
'class' => [ 'show_if_simple', 'show_if_variable' ],
'priority' => 60,
];
Action woocommerce_product_data_panels:
<div id="my_tab_data" class="panel"> matching the tab targetwoocommerce_wp_text_input(), woocommerce_wp_select(), etc.Action woocommerce_process_product_meta — receives $post_id:
sanitize_text_field( $_POST['my_field'] )$product->update_meta_data( '_my_field', $value ) then $product->save()Add custom meta boxes to the order edit screen:
add_meta_box( $id, $title, $callback, 'woocommerce_page_wc-orders', $context, $priority )woocommerce_page_wc-orders (not shop_order)shop_orderFilter woocommerce_order_actions to add custom order actions.
Filter bulk_actions-edit-shop_order (legacy) or bulk_actions-woocommerce_page_wc-orders (HPOS).
WooCommerce Admin is a React SPA for:
Use @woocommerce/data and @woocommerce/components packages:
woocommerce_admin_reports_pages filter (PHP)WC_Admin_Notices::add_custom_notice( $name, $html ) — persistent noticeswc_admin_notice() helper for one-time noticesadmin_notices action for standard WordPress admin noticesWC_Settings_Page for custom settings tabsmanage_woocommerce, edit_products, etc.)__() / esc_html__()Fetch the WooCommerce Settings API docs and WordPress admin handbook for exact field types, hook names, and screen IDs before implementing.