Show variations in same order
When an agent searches for a product in Phone Orders and the search returns a variable product, the variations appear in the dropdown results. By default, Phone Orders sorts search results alphabetically — which means variations from the same parent product can appear scattered through the list, mixed with results from other products. This snippet re-sorts the search results so that all variations from the same parent product appear together in the order they appear inside the product’s own attribute settings — exactly as they display on the product edit screen.
Code Sample
Add the following snippet to your child theme’s functions.php or the Code Snippets plugin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//show variations in same order as they displayed inside the product add_filter( 'wpo_search_products_and_variations_results', function ( $result, $term ) { //set necessary values foreach ($result as &$item) { $item['menu_order'] = $item['product']->get_menu_order(); $item['parent_id'] = $item['product']->get_parent_id(); } usort( $result, function ( $a, $b ) { //default sorting for simple products if ($a['parent_id'] == 0 AND $b['parent_id'] == 0) { return strcmp( $a['sort'], $b['sort'] ); } //sort items inside one product if ($a['parent_id'] == $b['parent_id']) { return $a['menu_order'] < $b['menu_order'] ? -1 : 1; } //sort by parents return $a['parent_id'] > $b['parent_id'] ? -1 : 1; } ); return $result; }, 10, 2 ); |
Code Explained (for Developers)
| Element | Description |
|---|---|
wpo_search_products_and_variations_results | A Phone Orders filter that provides the full array of product and variation search results before Phone Orders renders them in the dropdown. Returning a reordered array changes what the agent sees. |
$item['product']->get_menu_order() | Reads the menu_order value from each variation’s WC_Product_Variation object. WooCommerce stores this value when you drag and reorder variations on the product edit screen — it reflects the intended display order. |
$item['product']->get_parent_id() | Returns the parent variable product’s ID for each variation, or 0 for simple products. Used to group variations under their parent during sorting. |
| Simple product branch | When both items have parent_id === 0, they are both simple products. The snippet falls back to the existing alphabetical sort key Phone Orders already assigns, preserving the default sort for non-variable results. |
| Same-parent branch | When two items share the same parent_id, they are variations of the same product. Sorting by menu_order places them in the order the merchant defined on the product edit screen. |
| Different-parent branch | When items have different parent_id values, the snippet groups them by descending parent_id. This keeps all variations from the same product together in a contiguous block rather than interleaved with results from other products. |
How to Apply This Code
- Open Appearance → Theme File Editor or the Code Snippets plugin.
- Paste the snippet into your child theme’s
functions.phpor create a new dedicated snippet. - Save and open Phone Orders.
- Search for a variable product by name.
- Verify that its variations appear grouped together in the results dropdown and in the same order as the variation list on the product’s edit screen.
⚠️ Always use a child theme or Code Snippets — parent theme files get overwritten on theme updates.
When Should You Use This?
This snippet helps whenever agents find the Phone Orders product search confusing for variable products — particularly when a variable product has many variations (sizes, colours, configurations) and the default alphabetical sort scatters them. Grouping and ordering variations the same way the product editor does makes the search results immediately recognisable to agents already familiar with the product catalogue.