Como crear menú desplegable de variaciones en el artículo

Hay dos formas:

1. La más facil es programar un menú a mano, donde mediante las funciones nativas de WordPress y WooCommerce puedas traer productos y categorías e ir armando el bucle:

<ul class="menu-productos">
<?php $productos = wc_get_products([
  'featured' => true,
  'limit' => -1,
]);

foreach ($productos as $producto) { ?>
<li>
  <a href="<?php echo get_permalink($producto->get_id()); ?>">
    <?php echo $producto->get_name(); ?>
  </a>
  <?php if ($producto->is_type('variable')) : ?>
    <ul class="submenu-variaciones">
      <?php $variaciones = $producto->get_children();
      foreach ($variaciones as $var_id) :
        $variacion = wc_get_product($var_id); ?>
        <li>
          <a href="<?php echo get_permalink($producto->get_id()); ?>?attribute_<?php echo key($variacion->get_attributes()); ?>=<?php echo current($variacion->get_attributes()); ?>">
            <?php echo implode(' / ', $variacion->get_attributes()); ?>
          </a>
        </li>
      <?php endforeach; ?>
    </ul>
  <?php endif; ?>
</li>
<?php endforeach; ?>
</ul>

2. La segunda opción es usando el filter llamado «wp_nav_menu_objects» que permite manipular el menú nativo de WordPress y ahí se trae los productos

<?php add_filter('wp_nav_menu_objects', 'terraquea_menu_destacados_variaciones', 10, 2);

function terraquea_menu_destacados_variaciones($items, $args) {
  foreach ($items as $item) {
    if ($item->title === 'Destacados') {
      $parent_id = $item->ID;
      $productos = wc_get_products([
        'featured' => true,
        'limit' => -1,
      ]);
      foreach ($productos as $producto) {
        $new_item = new stdClass();
        $new_item->ID = 100000 + $producto->get_id();
        $new_item->title = $producto->get_name();
        $new_item->url = get_permalink($producto->get_id());
        $new_item->menu_item_parent = $parent_id;
        $new_item->type = 'custom';
        $new_item->object = 'custom';
        $new_item->classes = [];
        $items[] = $new_item;
        if ($producto->is_type('variable')) {
          foreach ($producto->get_children() as $var_id) {
            $variacion = wc_get_product($var_id);
            $sub_item = new stdClass();
            $sub_item->ID = 200000 + $var_id;
            $sub_item->title = implode(' / ', $variacion->get_attributes());
            $sub_item->url = get_permalink($producto->get_id());
            $sub_item->menu_item_parent = $new_item->ID;
            $sub_item->type = 'custom';
            $sub_item->object = 'custom';
            $sub_item->classes = [];
            $items[] = $sub_item;
          }
        }
      }
    }
  }
  return $items;
} ?>

Hola,

Lo que describes es precisamente el funcionamiento de un producto variable de WooCommerce.

Para conseguirlo puedes hacer lo siguiente:

1. Ve a Productos → Atributos y crea los atributos que necesites (por ejemplo: Color, Mango, Acabado, etc.).
2. Añade los términos correspondientes a cada atributo (negro, madera, marfil, etc.).
3. Edita el producto y, en Datos del producto, cambia Producto simple por Producto variable.
4. En la pestaña Atributos, añade los atributos y marca la opción Usado para variaciones.
5. En la pestaña Variaciones, genera las combinaciones y asigna a cada una su precio, stock, imagen, SKU, etc.

De esta forma el cliente verá un menú desplegable para seleccionar cada opción y el precio se actualizará según la variación elegida.

Si lo que buscas es una configuración más avanzada (por ejemplo, cambiar el precio en tiempo real, mostrar imágenes según la selección o añadir opciones que no son variaciones de WooCommerce), existen plugins específicos para ello.

¿Podrías indicar si estás utilizando únicamente WooCommerce o también algún tema o plugin para personalizar los productos? Eso ayudará a recomendar la mejor opción.

Un saludo.