{"id":14261,"date":"2026-08-21T08:09:05","date_gmt":"2026-08-21T06:09:05","guid":{"rendered":"https:\/\/elementorprobarato.com\/?p=14261"},"modified":"2026-08-21T10:18:12","modified_gmt":"2026-08-21T08:18:12","slug":"ordenacion-de-productos-para-loop-grid","status":"publish","type":"post","link":"https:\/\/elementorprobarato.com\/en\/ordenacion-de-productos-para-loop-grid\/","title":{"rendered":"Ordenaci\u00f3n de productos para Loop Grid de elementor Pro"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Ordenaci\u00f3n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

El Loop Grid de elementor es uno de mis widgets favoritos<\/b>, nos permite crear cuadr\u00edculas donde mostrar los productos de la tienda y hacer un dise\u00f1o realmente a medida.<\/p>\n

Por supuesto, tambi\u00e9n tenemos que hacer el item de producto<\/b>, es decir una plantilla que mostrar\u00e1 el aspecto de cada uno de los productos que aparecen listados en la tienda.<\/p>\n

Aunque disponemos de un widget en elementor Pro (el filtro de taxonom\u00eda<\/b>)<\/span> para filtrar por categor\u00eda, marca u otras taxonom\u00edas, elementor Pro no dispone de un elemento para la ordenaci\u00f3n de productos<\/b>.<\/span><\/p>\n

Me refiero al t\u00edpico desplegable que nos permite ordenar los productos por precio, orden alfab\u00e9tico, populares, novedades…<\/p>\n

Asi que vamos a crear un desplegable Ajax (no recarga la p\u00e1gina) para hacer esta funci\u00f3n, sin plugins ni complicaciones.<\/p>\n

Como es l\u00f3gico, debes tener creada tu p\u00e1gina de la tienda con el maquetador de temas de elementor, y haber creado la cuadr\u00edcula en bucle (el Loop Grid) con su correspondiente plantilla de Loop item.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

El fragmento de c\u00f3digo<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Para conseguir esta funci\u00f3n, s\u00f3lo has de a\u00f1adir un fragmento de c\u00f3digo, lo mejor es que lo hagas usando el famos\u00edsimo plugin Code Snippets<\/strong><\/a>\u00a0del que te hablo aqu\u00ed<\/strong><\/a>.<\/p>

Si ya lo tienes instalado, te vas a Fragmentos de c\u00f3digo \/ A\u00f1adir nuevo<\/strong>, le das un nombre como Desplegable para ordenar productos<\/strong> y pegas lo siguiente:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\/**\r\n * OPCIONES DE ORDENACI\u00d3N\r\n *\/\r\nfunction ayra_opciones_orden_productos() {\r\n\r\n    return array(\r\n        'date'       => '\u00daltimos productos',\r\n        'title-asc'  => 'Orden alfab\u00e9tico: A\u2013Z',\r\n        'title-desc' => 'Orden alfab\u00e9tico: Z\u2013A',\r\n        'price'      => 'Precio: menor a mayor',\r\n        'price-desc' => 'Precio: mayor a menor',\r\n        'popularity' => 'M\u00e1s populares',\r\n        'rating'     => 'Mejor valorados',\r\n    );\r\n}\r\n\r\n\r\n\/**\r\n * OBTENER EL ORDEN SELECCIONADO\r\n *\/\r\nfunction ayra_obtener_orden_productos() {\r\n\r\n    $opciones = ayra_opciones_orden_productos();\r\n\r\n    if ( isset( $_GET['orderby'] ) ) {\r\n        $orden = sanitize_key( wp_unslash( $_GET['orderby'] ) );\r\n    } elseif ( isset( $_COOKIE['ayra_product_order'] ) ) {\r\n        $orden = sanitize_key(\r\n            wp_unslash( $_COOKIE['ayra_product_order'] )\r\n        );\r\n    } else {\r\n        $orden = 'date';\r\n    }\r\n\r\n    return isset( $opciones[ $orden ] ) ? $orden : 'date';\r\n}\r\n\r\n\r\n\/**\r\n * SHORTCODE DEL DESPLEGABLE\r\n *\r\n * Uso: [ayra_ordenar_productos]\r\n *\/\r\nadd_shortcode(\r\n    'ayra_ordenar_productos',\r\n    'ayra_selector_orden_productos'\r\n);\r\n\r\nfunction ayra_selector_orden_productos() {\r\n\r\n    if ( ! function_exists( 'wc_query_string_form_fields' ) ) {\r\n        return '';\r\n    }\r\n\r\n    $opciones     = ayra_opciones_orden_productos();\r\n    $orden_actual = ayra_obtener_orden_productos();\r\n    $select_id    = wp_unique_id( 'ayra-orderby-' );\r\n\r\n    ob_start();\r\n    ?>\r\n\r\n    <form\r\n        class=\"ayra-ordenar-productos\"\r\n        method=\"get\"\r\n        data-ayra-ordering-form\r\n        data-target=\"ayra-productos-grid\"\r\n    >\r\n\r\n        <label\r\n            class=\"screen-reader-text\"\r\n            for=\"<?php echo esc_attr( $select_id ); ?>\"\r\n        >\r\n            Ordenar productos\r\n        <\/label>\r\n\r\n        <select\r\n            id=\"<?php echo esc_attr( $select_id ); ?>\"\r\n            name=\"orderby\"\r\n            class=\"orderby\"\r\n            data-ayra-ordering\r\n        >\r\n            <?php foreach ( $opciones as $valor => $texto ) : ?>\r\n\r\n                <option\r\n                    value=\"<?php echo esc_attr( $valor ); ?>\"\r\n                    <?php selected( $orden_actual, $valor ); ?>\r\n                >\r\n                    <?php echo esc_html( $texto ); ?>\r\n                <\/option>\r\n\r\n            <?php endforeach; ?>\r\n        <\/select>\r\n\r\n        <?php\r\n        \/*\r\n         * Conserva los filtros de colecciones y categor\u00edas\r\n         * presentes en la URL.\r\n         *\/\r\n        wc_query_string_form_fields(\r\n            null,\r\n            array(\r\n                'orderby',\r\n                'submit',\r\n                'paged',\r\n                'product-page',\r\n            )\r\n        );\r\n        ?>\r\n\r\n        <span\r\n            class=\"screen-reader-text\"\r\n            aria-live=\"polite\"\r\n            data-ayra-ordering-status\r\n        ><\/span>\r\n\r\n        <noscript>\r\n            <button type=\"submit\">Ordenar<\/button>\r\n        <\/noscript>\r\n\r\n    <\/form>\r\n\r\n    <?php\r\n    static $recursos_cargados = false;\r\n\r\n    if ( ! $recursos_cargados ) :\r\n        $recursos_cargados = true;\r\n        ?>\r\n\r\n        <style>\r\n            #ayra-productos-grid {\r\n                transition: opacity 0.2s ease;\r\n            }\r\n\r\n            #ayra-productos-grid.ayra-cargando {\r\n                opacity: 0.35;\r\n                pointer-events: none;\r\n            }\r\n        <\/style>\r\n\r\n        <script>\r\n        (function () {\r\n\r\n            if (window.ayraOrdenacionProductosIniciada) {\r\n                return;\r\n            }\r\n\r\n            window.ayraOrdenacionProductosIniciada = true;\r\n\r\n            async function ayraOrdenarProductos(select) {\r\n\r\n                const form = select.closest('[data-ayra-ordering-form]');\r\n\r\n                if (!form) {\r\n                    return;\r\n                }\r\n\r\n                const targetId = form.dataset.target;\r\n                const grid = document.getElementById(targetId);\r\n                const status = form.querySelector(\r\n                    '[data-ayra-ordering-status]'\r\n                );\r\n\r\n                if (!grid) {\r\n                    form.submit();\r\n                    return;\r\n                }\r\n\r\n                const url = new URL(window.location.href);\r\n\r\n                url.searchParams.set('orderby', select.value);\r\n                url.searchParams.delete('paged');\r\n                url.searchParams.delete('product-page');\r\n\r\n                \/*\r\n                 * Regresar a la primera p\u00e1gina del Loop Grid\r\n                 * cuando se cambia la ordenaci\u00f3n.\r\n                 *\/\r\n                Array.from(url.searchParams.keys()).forEach(function (key) {\r\n                    if (key.indexOf('e-page-') === 0) {\r\n                        url.searchParams.delete(key);\r\n                    }\r\n                });\r\n\r\n                let cookie = 'ayra_product_order=' +\r\n                    encodeURIComponent(select.value) +\r\n                    '; path=\/; max-age=31536000; SameSite=Lax';\r\n\r\n                if (window.location.protocol === 'https:') {\r\n                    cookie += '; Secure';\r\n                }\r\n\r\n                document.cookie = cookie;\r\n\r\n                select.disabled = true;\r\n                grid.classList.add('ayra-cargando');\r\n                grid.setAttribute('aria-busy', 'true');\r\n\r\n                if (status) {\r\n                    status.textContent = 'Ordenando productos\u2026';\r\n                }\r\n\r\n                try {\r\n\r\n                    const response = await fetch(url.toString(), {\r\n                        method: 'GET',\r\n                        credentials: 'same-origin',\r\n                        cache: 'no-store',\r\n                        headers: {\r\n                            'X-Requested-With': 'XMLHttpRequest'\r\n                        }\r\n                    });\r\n\r\n                    if (!response.ok) {\r\n                        throw new Error('No se pudo cargar la ordenaci\u00f3n.');\r\n                    }\r\n\r\n                    const html = await response.text();\r\n\r\n                    const documento = new DOMParser().parseFromString(\r\n                        html,\r\n                        'text\/html'\r\n                    );\r\n\r\n                    const nuevoGrid = documento.getElementById(targetId);\r\n\r\n                    if (!nuevoGrid) {\r\n                        throw new Error('No se encontr\u00f3 el Loop Grid.');\r\n                    }\r\n\r\n                    \/*\r\n                     * Sustituimos \u00fanicamente el contenido del Loop Grid.\r\n                     * La p\u00e1gina no se recarga y no cambia de posici\u00f3n.\r\n                     *\/\r\n                    grid.innerHTML = nuevoGrid.innerHTML;\r\n\r\n                    window.history.pushState(\r\n                        {},\r\n                        '',\r\n                        url.toString()\r\n                    );\r\n\r\n                    \/*\r\n                     * Reactivar los widgets que contiene el Loop Grid.\r\n                     *\/\r\n                    if (\r\n                        window.elementorFrontend &&\r\n                        window.jQuery &&\r\n                        window.elementorFrontend.elementsHandler\r\n                    ) {\r\n                        window.elementorFrontend.elementsHandler\r\n                            .runReadyTrigger(window.jQuery(grid));\r\n                    }\r\n\r\n                    document.dispatchEvent(\r\n                        new CustomEvent('ayra:productos-ordenados', {\r\n                            detail: {\r\n                                orderby: select.value,\r\n                                grid: grid\r\n                            }\r\n                        })\r\n                    );\r\n\r\n                    if (status) {\r\n                        status.textContent = 'Productos ordenados.';\r\n                    }\r\n\r\n                } catch (error) {\r\n\r\n                    \/*\r\n                     * Si el AJAX falla, se utiliza la recarga tradicional\r\n                     * como m\u00e9todo de respaldo.\r\n                     *\/\r\n                    window.location.href = url.toString();\r\n\r\n                } finally {\r\n\r\n                    select.disabled = false;\r\n                    grid.classList.remove('ayra-cargando');\r\n                    grid.removeAttribute('aria-busy');\r\n                }\r\n            }\r\n\r\n            document.addEventListener('change', function (event) {\r\n\r\n                const select = event.target.closest(\r\n                    '[data-ayra-ordering]'\r\n                );\r\n\r\n                if (select) {\r\n                    ayraOrdenarProductos(select);\r\n                }\r\n            });\r\n\r\n            document.addEventListener('submit', function (event) {\r\n\r\n                const form = event.target.closest(\r\n                    '[data-ayra-ordering-form]'\r\n                );\r\n\r\n                if (!form) {\r\n                    return;\r\n                }\r\n\r\n                event.preventDefault();\r\n\r\n                const select = form.querySelector(\r\n                    '[data-ayra-ordering]'\r\n                );\r\n\r\n                if (select) {\r\n                    ayraOrdenarProductos(select);\r\n                }\r\n            });\r\n\r\n        })();\r\n        <\/script>\r\n\r\n        <?php\r\n    endif;\r\n\r\n    return ob_get_clean();\r\n}\r\n\r\n\r\n\/**\r\n * MODIFICAR LA CONSULTA DEL LOOP GRID DE PRODUCTOS\r\n *\r\n * Se identifica mediante el ID CSS \"ayra-productos-grid\".\r\n *\/\r\nadd_filter(\r\n    'elementor\/query\/query_args',\r\n    'ayra_aplicar_orden_loop_productos',\r\n    50,\r\n    2\r\n);\r\n\r\nfunction ayra_aplicar_orden_loop_productos( $query_args, $widget ) {\r\n\r\n    if (\r\n        ! is_object( $widget ) ||\r\n        ! method_exists( $widget, 'get_name' ) ||\r\n        ! method_exists( $widget, 'get_settings_for_display' ) ||\r\n        'loop-grid' !== $widget->get_name()\r\n    ) {\r\n        return $query_args;\r\n    }\r\n\r\n    $css_id = $widget->get_settings_for_display( '_element_id' );\r\n\r\n    if ( 'ayra-productos-grid' !== $css_id ) {\r\n        return $query_args;\r\n    }\r\n\r\n    $orden = ayra_obtener_orden_productos();\r\n\r\n    switch ( $orden ) {\r\n\r\n        case 'title-asc':\r\n            $query_args['orderby'] = 'title';\r\n            $query_args['order']   = 'ASC';\r\n            break;\r\n\r\n        case 'title-desc':\r\n            $query_args['orderby'] = 'title';\r\n            $query_args['order']   = 'DESC';\r\n            break;\r\n\r\n        case 'price':\r\n            $query_args['meta_key'] = '_price';\r\n            $query_args['orderby']  = 'meta_value_num';\r\n            $query_args['order']    = 'ASC';\r\n            break;\r\n\r\n        case 'price-desc':\r\n            $query_args['meta_key'] = '_price';\r\n            $query_args['orderby']  = 'meta_value_num';\r\n            $query_args['order']    = 'DESC';\r\n            break;\r\n\r\n        case 'popularity':\r\n            $query_args['meta_key'] = 'total_sales';\r\n            $query_args['orderby']  = 'meta_value_num';\r\n            $query_args['order']    = 'DESC';\r\n            break;\r\n\r\n        case 'rating':\r\n            $query_args['meta_key'] = '_wc_average_rating';\r\n            $query_args['orderby']  = 'meta_value_num';\r\n            $query_args['order']    = 'DESC';\r\n            break;\r\n\r\n        case 'date':\r\n        default:\r\n            $query_args['orderby'] = 'date';\r\n            $query_args['order']   = 'DESC';\r\n            break;\r\n    }\r\n\r\n    return $query_args;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f125e00 e-flex e-con-boxed e-con e-parent\" data-id=\"f125e00\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3dbb680 elementor-widget elementor-widget-heading\" data-id=\"3dbb680\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Hacer que reconozca el Loop Grid<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13d4bbc elementor-widget elementor-widget-text-editor\" data-id=\"13d4bbc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Para que el snippet pueda identificar que Loop Grid es el que debe ordenar, has de seleccionar tu Loop Grid, ir a <strong>Avanzado<\/strong> y en <strong>ID de CSS<\/strong> escribir la clase <strong>ayra-productos-grid<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96f972f elementor-widget elementor-widget-image\" data-id=\"96f972f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/ID-de-CSS.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"ID de CSS\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTQyNzIsInVybCI6Imh0dHBzOlwvXC9lbGVtZW50b3Jwcm9iYXJhdG8uY29tXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI2XC8wOFwvSUQtZGUtQ1NTLnBuZyJ9\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1280\" height=\"617\" src=\"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/ID-de-CSS.png\" class=\"attachment-full size-full wp-image-14272\" alt=\"\" srcset=\"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/ID-de-CSS.png 1280w, https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/ID-de-CSS-300x145.png 300w, https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/ID-de-CSS-1024x494.png 1024w, https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/ID-de-CSS-768x370.png 768w, https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/ID-de-CSS-18x9.png 18w, https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/ID-de-CSS-600x289.png 600w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d621edd elementor-widget elementor-widget-heading\" data-id=\"d621edd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Mostrar el desplegable de ordenaci\u00f3n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f0d78f elementor-widget elementor-widget-text-editor\" data-id=\"2f0d78f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Simplemente arrastra donde quieras (normalmente sobre los productos) un widget de <strong>Shortcode<\/strong> y escribe <strong>[ayra_ordenar_productos]<\/strong><\/p><p>No hace falta darle CSS, con el propio elementor puedes <b>alinearlo a la derecha<\/b> o a la izquierda y darle un <b>ancho personalizado<\/b>, por ejemplo 220px<\/p><p>Con estos sencillos pasos ya tienes hecha la <strong>ordenaci\u00f3n de productos para loop Grid<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2800094 elementor-widget elementor-widget-heading\" data-id=\"2800094\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Ordenaci\u00f3n de productos para Loop Grid<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d3a7c4 elementor-widget elementor-widget-text-editor\" data-id=\"3d3a7c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Ya no tienes excusa para que tu tienda online Woocommerce tenga todas las funciones necesarias dise\u00f1ando a medida con elementor Pro.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>El Loop Grid de elementor es uno de mis widgets favoritos, nos permite crear cuadr\u00edculas donde mostrar los productos de la tienda y hacer un dise\u00f1o realmente a medida. Por supuesto, tambi\u00e9n tenemos que hacer el item de producto, es decir una plantilla que mostrar\u00e1 el aspecto de cada uno de los productos que aparecen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":14276,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50,47,44],"tags":[],"class_list":["post-14261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-widgets","category-blog-woocommerce"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Ordenaci\u00f3n de productos para Loop Grid de elementor Pro - elementor Pro Barato<\/title>\n<meta name=\"description\" content=\"Ordenaci\u00f3n de productos para Loop Grid sin plugins ni complicaciones. Te lo explico todo para que lo a\u00f1adas en menos de un minuto\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementorprobarato.com\/en\/ordenacion-de-productos-para-loop-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ordenaci\u00f3n de productos para Loop Grid de elementor Pro - elementor Pro Barato\" \/>\n<meta property=\"og:description\" content=\"Ordenaci\u00f3n de productos para Loop Grid sin plugins ni complicaciones. Te lo explico todo para que lo a\u00f1adas en menos de un minuto\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementorprobarato.com\/en\/ordenacion-de-productos-para-loop-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"elementor Pro Barato\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-21T06:09:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-21T08:18:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/Desplegable-para-ordenar-productos-del-loop-grid1024x420.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"estebanip\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"estebanip\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/ordenacion-de-productos-para-loop-grid\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/ordenacion-de-productos-para-loop-grid\\\/\"},\"author\":{\"name\":\"estebanip\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#\\\/schema\\\/person\\\/2260d3b96091792b81b752fecfc09b84\"},\"headline\":\"Ordenaci\u00f3n de productos para Loop Grid de elementor Pro\",\"datePublished\":\"2026-08-21T06:09:05+00:00\",\"dateModified\":\"2026-08-21T08:18:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/ordenacion-de-productos-para-loop-grid\\\/\"},\"wordCount\":387,\"publisher\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/ordenacion-de-productos-para-loop-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementorprobarato.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/Desplegable-para-ordenar-productos-del-loop-grid1024x420.png\",\"articleSection\":[\"Elementor\",\"Widgets y trucos\",\"Woocommerce\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/ordenacion-de-productos-para-loop-grid\\\/\",\"url\":\"https:\\\/\\\/elementorprobarato.com\\\/ordenacion-de-productos-para-loop-grid\\\/\",\"name\":\"Ordenaci\u00f3n de productos para Loop Grid de elementor Pro - elementor Pro Barato\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/ordenacion-de-productos-para-loop-grid\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/ordenacion-de-productos-para-loop-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementorprobarato.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/Desplegable-para-ordenar-productos-del-loop-grid1024x420.png\",\"datePublished\":\"2026-08-21T06:09:05+00:00\",\"dateModified\":\"2026-08-21T08:18:12+00:00\",\"description\":\"Ordenaci\u00f3n de productos para Loop Grid sin plugins ni complicaciones. Te lo explico todo para que lo a\u00f1adas en menos de un minuto\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/ordenacion-de-productos-para-loop-grid\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementorprobarato.com\\\/ordenacion-de-productos-para-loop-grid\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/ordenacion-de-productos-para-loop-grid\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementorprobarato.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/Desplegable-para-ordenar-productos-del-loop-grid1024x420.png\",\"contentUrl\":\"https:\\\/\\\/elementorprobarato.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/Desplegable-para-ordenar-productos-del-loop-grid1024x420.png\",\"width\":1024,\"height\":420,\"caption\":\"Ordenaci\u00f3n de productos para Loop Grid\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/ordenacion-de-productos-para-loop-grid\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/elementorprobarato.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ordenaci\u00f3n de productos para Loop Grid de elementor Pro\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#website\",\"url\":\"https:\\\/\\\/elementorprobarato.com\\\/\",\"name\":\"elementorprobarato.com\",\"description\":\"100% Original y con clave del fabricante\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#organization\"},\"alternateName\":\"Accede a todas las funciones de elementor Pro con licencia oficial pero mucho mas barato\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementorprobarato.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#organization\",\"name\":\"elementorprobarato.com\",\"alternateName\":\"Accede a todas las funciones de elementor Pro con licencia oficial pero mucho mas barato\",\"url\":\"https:\\\/\\\/elementorprobarato.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementorprobarato.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/cropped-Elementor-Logo-nuevo-rosa.png\",\"contentUrl\":\"https:\\\/\\\/elementorprobarato.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/cropped-Elementor-Logo-nuevo-rosa.png\",\"width\":512,\"height\":512,\"caption\":\"elementorprobarato.com\"},\"image\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/tiktok.com\\\/@lapeorempresadelmundo\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#\\\/schema\\\/person\\\/2260d3b96091792b81b752fecfc09b84\",\"name\":\"estebanip\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9df27800b983d072192e4ca5478612f2b535c0fd51c3cae5d6628b127eb3c34d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9df27800b983d072192e4ca5478612f2b535c0fd51c3cae5d6628b127eb3c34d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9df27800b983d072192e4ca5478612f2b535c0fd51c3cae5d6628b127eb3c34d?s=96&d=mm&r=g\",\"caption\":\"estebanip\"},\"sameAs\":[\"https:\\\/\\\/elementorprobarato.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ordenaci\u00f3n de productos para Loop Grid de elementor Pro - elementor Pro Barato","description":"Ordenaci\u00f3n de productos para Loop Grid sin plugins ni complicaciones. Te lo explico todo para que lo a\u00f1adas en menos de un minuto","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementorprobarato.com\/en\/ordenacion-de-productos-para-loop-grid\/","og_locale":"en_US","og_type":"article","og_title":"Ordenaci\u00f3n de productos para Loop Grid de elementor Pro - elementor Pro Barato","og_description":"Ordenaci\u00f3n de productos para Loop Grid sin plugins ni complicaciones. Te lo explico todo para que lo a\u00f1adas en menos de un minuto","og_url":"https:\/\/elementorprobarato.com\/en\/ordenacion-de-productos-para-loop-grid\/","og_site_name":"elementor Pro Barato","article_published_time":"2026-08-21T06:09:05+00:00","article_modified_time":"2026-08-21T08:18:12+00:00","og_image":[{"width":1024,"height":420,"url":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/Desplegable-para-ordenar-productos-del-loop-grid1024x420.png","type":"image\/png"}],"author":"estebanip","twitter_card":"summary_large_image","twitter_misc":{"Written by":"estebanip","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/elementorprobarato.com\/ordenacion-de-productos-para-loop-grid\/#article","isPartOf":{"@id":"https:\/\/elementorprobarato.com\/ordenacion-de-productos-para-loop-grid\/"},"author":{"name":"estebanip","@id":"https:\/\/elementorprobarato.com\/#\/schema\/person\/2260d3b96091792b81b752fecfc09b84"},"headline":"Ordenaci\u00f3n de productos para Loop Grid de elementor Pro","datePublished":"2026-08-21T06:09:05+00:00","dateModified":"2026-08-21T08:18:12+00:00","mainEntityOfPage":{"@id":"https:\/\/elementorprobarato.com\/ordenacion-de-productos-para-loop-grid\/"},"wordCount":387,"publisher":{"@id":"https:\/\/elementorprobarato.com\/#organization"},"image":{"@id":"https:\/\/elementorprobarato.com\/ordenacion-de-productos-para-loop-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/Desplegable-para-ordenar-productos-del-loop-grid1024x420.png","articleSection":["Elementor","Widgets y trucos","Woocommerce"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementorprobarato.com\/ordenacion-de-productos-para-loop-grid\/","url":"https:\/\/elementorprobarato.com\/ordenacion-de-productos-para-loop-grid\/","name":"Ordenaci\u00f3n de productos para Loop Grid de elementor Pro - elementor Pro Barato","isPartOf":{"@id":"https:\/\/elementorprobarato.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementorprobarato.com\/ordenacion-de-productos-para-loop-grid\/#primaryimage"},"image":{"@id":"https:\/\/elementorprobarato.com\/ordenacion-de-productos-para-loop-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/Desplegable-para-ordenar-productos-del-loop-grid1024x420.png","datePublished":"2026-08-21T06:09:05+00:00","dateModified":"2026-08-21T08:18:12+00:00","description":"Ordenaci\u00f3n de productos para Loop Grid sin plugins ni complicaciones. Te lo explico todo para que lo a\u00f1adas en menos de un minuto","breadcrumb":{"@id":"https:\/\/elementorprobarato.com\/ordenacion-de-productos-para-loop-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementorprobarato.com\/ordenacion-de-productos-para-loop-grid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementorprobarato.com\/ordenacion-de-productos-para-loop-grid\/#primaryimage","url":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/Desplegable-para-ordenar-productos-del-loop-grid1024x420.png","contentUrl":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/08\/Desplegable-para-ordenar-productos-del-loop-grid1024x420.png","width":1024,"height":420,"caption":"Ordenaci\u00f3n de productos para Loop Grid"},{"@type":"BreadcrumbList","@id":"https:\/\/elementorprobarato.com\/ordenacion-de-productos-para-loop-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/elementorprobarato.com\/"},{"@type":"ListItem","position":2,"name":"Ordenaci\u00f3n de productos para Loop Grid de elementor Pro"}]},{"@type":"WebSite","@id":"https:\/\/elementorprobarato.com\/#website","url":"https:\/\/elementorprobarato.com\/","name":"elementorprobarato.com","description":"100% Original y con clave del fabricante","publisher":{"@id":"https:\/\/elementorprobarato.com\/#organization"},"alternateName":"Accede a todas las funciones de elementor Pro con licencia oficial pero mucho mas barato","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementorprobarato.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementorprobarato.com\/#organization","name":"elementorprobarato.com","alternateName":"Accede a todas las funciones de elementor Pro con licencia oficial pero mucho mas barato","url":"https:\/\/elementorprobarato.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementorprobarato.com\/#\/schema\/logo\/image\/","url":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2023\/10\/cropped-Elementor-Logo-nuevo-rosa.png","contentUrl":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2023\/10\/cropped-Elementor-Logo-nuevo-rosa.png","width":512,"height":512,"caption":"elementorprobarato.com"},"image":{"@id":"https:\/\/elementorprobarato.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/tiktok.com\/@lapeorempresadelmundo"]},{"@type":"Person","@id":"https:\/\/elementorprobarato.com\/#\/schema\/person\/2260d3b96091792b81b752fecfc09b84","name":"estebanip","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/9df27800b983d072192e4ca5478612f2b535c0fd51c3cae5d6628b127eb3c34d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9df27800b983d072192e4ca5478612f2b535c0fd51c3cae5d6628b127eb3c34d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9df27800b983d072192e4ca5478612f2b535c0fd51c3cae5d6628b127eb3c34d?s=96&d=mm&r=g","caption":"estebanip"},"sameAs":["https:\/\/elementorprobarato.com"]}]}},"_links":{"self":[{"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/posts\/14261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/comments?post=14261"}],"version-history":[{"count":35,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/posts\/14261\/revisions"}],"predecessor-version":[{"id":14302,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/posts\/14261\/revisions\/14302"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/media\/14276"}],"wp:attachment":[{"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/media?parent=14261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/categories?post=14261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/tags?post=14261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}