Install the app on your BigCommerce store.
Go to BigCommerce Apps Marketplace, find Conditional Product Options by PapaThemes app and install it on your store.
After installed, the app will appear in your BigCommerce admin dashboard > Apps.
Add product options or modifiers
Edit your products in BigCommerce product editing, make sure it has some product options or product modifiers. See the screenshot below for example:
Create dependent product option conditions
Go back to the app, click Add Condition button to create the dependent product option condition:
Choose product and configure the rules as showed in the screenshot below:
View the product page on the store front:
Show or hide option values
Use a value filter when an option should stay visible but offer only some of its values. Example: when Size is Kids S, Color offers only Red, Blue and Black.
- Open a condition and the rule for the option that triggers it (here, Size).
- Under When this value is selected: pick the value (Kids S), then open Filter values:.
- Click Add value filter, choose the option to filter (Color) and a mode: Show only these values or Hide these values.
- Pick the values. For an "All products" condition, type the option name and the values, one per line.
- Optional: choose a Default, the value to select when the shopper's current one is no longer offered.
- Save.
To filter values whenever the triggering option is visible, whatever its value, use Filter values while this option is visible: under When this option appears:.
What shoppers see:
- Filtered values disappear from swatches, radio buttons, rectangles, dropdowns and product lists.
- When a rule hides the value they had selected, the app selects another one: the filter default, then the product's BigCommerce default, then the dropdown's "Choose" placeholder, then the first value still offered.
- If a required option has no value left, a message appears under it and Add to Cart is blocked until they change their selection.
- The same applies in quick view, in the cart's "Change" popup, and to the B2B Edition "Add to Quote" button.
Before, with Size = Adult: all colors are offered.
After, with Size = Kids S: only Red, Blue and Black are offered.
The editor warns you when a value or default is not in the product's catalog, when none of the selected products has the option, when the option type cannot be filtered, and when two filters target the same option.
Settings for value filters
In the app's Settings page:
- Lock product options until conditions are ready (default: off). Greys out the options and makes Add to Cart / Add to Quote wait until your conditions have loaded, so shoppers cannot pick a combination your conditions do not allow. It unlocks as soon as the conditions are ready, at once if they cannot be loaded, and after 5 seconds at most. The page layout does not move.
- Filtered dropdown values on themes CPO cannot integrate with: Hide with CSS (default) or Also disable them. Choose "Also disable" if shoppers on iPhone or with Select2 dropdowns still see filtered values in the list. Reload the product page after changing it.
Get the new version
Your store moves to the new version the next time you save the app's Settings or a condition. Until then it keeps working as before. Open the app, click Save on the Settings page once, and your storefront uses the new version.
FAQ
- My filter does not apply. Check the option and value names match the product exactly (case and extra spaces do not matter). The editor shows a warning for names it cannot find.
- Shoppers still see a filtered value in a dropdown on iPhone. Set "Filtered dropdown values" to "Also disable them".
- I changed a condition and the storefront shows the old behavior. Reload the product page; browsers can keep the previous rules for a short time.
- Is a filtered value blocked at checkout? Filters guide the shopper on your storefront and block Add to Cart for invalid selections there. They do not change which variants BigCommerce itself accepts.
Support
For any problem, please contact us for support.