Ocultar elementos en variaciones de productos
-
Hola a todos, tenemos un producto con tres atributos: Tipología, Tamaño y Arcada.
Cada tipología tiene tamaños diferentes y los mismos tipos de arcada. Por ejemplo, la tipología «Redondo Forma Ovoide» tiene de tamaños: .012″,.014″,.016″,.018″ ,.020″ y arcada: superior o inferior.
Lo que hemos hecho es crear las variaciones de forma manual según la tipología, el tamaño correspondiente y la arcada.
Todo funciona correctamente pero cuando seleccionamos el campo de tamaño nos aparece todo el listado de valores de todas las tipologías, y queremos saber si es posible que solo se muestren los valores asociados a cada tipología en el campo «Tamaño» y no todo el listado.
Os dejo la URL del producto de prueba por si queréis ver a que me refiero: https://prueba.webseocenter.com/producto/arcos-ortodoncia-variable/
-
Hola.
Entiendo que quieres que al seleccionar una tipología en tu producto, el campo «Tamaño» se actualice dinámicamente para mostrar solo los tamaños disponibles para esa tipología específica, en lugar de mostrar todos los tamaños de todas las tipologías.
WooCommerce por sí solo no ofrece esta funcionalidad de filtrado dinámico de atributos así que habría que encontrar un plugin o hacerlo con código.
De los posibles plugins candidatos ninguno me ha convencido, prueba a hacer una búsqueda por atributos condicionales WooCommerce o algo así. Haz la búsqueda en el foro y te saldrán algunos hilos que podrían serte de utilidad.
Si quieres hacerlo por código, puedes utilizar JavaScript para escribir un script que capture la selección del campo «Tipología» y actualice dinámicamente las opciones disponibles en el campo «Tamaño».
Podría ser algo así:
jQuery(document).ready(function($) {
// Capturar el cambio en el campo "Tipología"
$('select[name="attribute_pa_tipologia"]').change(function() {
var selectedTipologia = $(this).val();
// Ocultar todas las opciones del campo "Tamaño"
$('select[name="attribute_pa_tamaño"] option').hide();
// Mostrar las opciones correspondientes a la tipología seleccionada
if (selectedTipologia === 'redondo-forma-ovoide') {
$('select[name="attribute_pa_tamaño"] option[value=".012"], select[name="attribute_pa_tamaño"] option[value=".014"], select[name="attribute_pa_tamaño"] option[value=".016"], select[name="attribute_pa_tamaño"] option[value=".018"], select[name="attribute_pa_tamaño"] option[value=".020"]').show();
} else if (selectedTipologia === 'otra-tipologia') {
// Aquí agregarías las opciones de tamaño para "otra-tipologia"
$('select[name="attribute_pa_tamaño"] option[value="otro-tamaño1"], select[name="attribute_pa_tamaño"] option[value="otro-tamaño2"]').show();
}
// Mostrar la primera opción del campo "Tamaño"
$('select[name="attribute_pa_tamaño"] option:visible:first').prop('selected', true);
});
});Este es solo un ejemplo básico y que tendrías que adaptar a la estructura específica de tu tema y a las clases CSS que utilizas en tus campos de atributos.
En cuanto a su implementación, puede hacerse modificando el código del tema (no recomendado), en forma de plugin o en la plantilla de la página de producto de Elementor.
Saludos.
- Debes estar registrado para responder a este debate.