Skip to main content
Version: 3.x

useProductConfigurables

When working with product options, we recommend to use useProductConfigurables. It accepts multiple formats for initially selected options and returns -among other things- an options update function that automatically handles auto disabling. We believe this hook will be helpful when dealing with configurable product options so here is a small rundown on it:

Inputs​

useProductConfigurables only takes the product as input.

Output​

useProductConfigurables returns an Object with the following properties:

  • selectedBundleOptions: The currently selected bundle options in the format { [optionId]: valueId }
  • selectedCustomOptions: The currently selected custom options in the format { [optionId]: valueId }
  • selectedGroupedItems: The currently selected grouped items in the format { [optionId]: valueId }
  • setBundleOption: A function to set a bundle option
  • setCustomOption: A function to set a custom option
  • setGroupedItems: A function to set a grouped item
info

To learn more about the different types of options, check out the relevant source code.