Novice question: What’s it called when you direct customers through certain products like a flowchart to make sure choices are compatible?

Say I sell square teacups and square saucers, and round teacups and round saucers. The way my site is set up now a customer can browse all products and choose a square teacup and a round saucer. These are incompatible with each other, causing tea to spill and angry customers to return products.

I want to enforce compatibility so when a customer clicks on a square teacup they are then directed to choose from only the selection of square saucers. If the customer chooses a different starting option they would then be directed to choose only products and options compatible with that starting product.

I've added upsells & cross-sells but what what I really want to do is make a purchasing journey like a flowchart.

What’s this called and what’s the simplest way of achieving it?

If it helps I’m using woocommerce in the UK. Thanks in advance!