Display 2 product widget going along with the query

Hello there,
There is a way to show a container with category image and products widget (40-60% width each) and then a container with full width products widget keeping the query order?

Example URL:
https://pruebas.misterwils.com/asientos/
In this example this is possible thanks to

<?php
/**
 * Template for displaying product archives, including the main shop page.
 * This template can be overridden by copying it to your theme's WooCommerce folder.
 * @package WooCommerce\Templates
 * @version 8.6.0
 */

defined( 'ABSPATH' ) || exit;

get_header( 'shop' );

do_action( 'woocommerce_before_main_content' );

// Contenedor principal de productos y banner
echo '<div class="product-container">';

// Mostrar la imagen del banner de la categoría (2 columnas y 2 filas)
$term_id = get_queried_object()->term_id;
$id_image = get_field('product_category_banner', 'product_cat_' . $term_id);

if ( $id_image ) {
    echo '<div class="category-banner">';
    echo wp_get_attachment_image( $id_image, 'full', false, array( 'class' => 'custom-category-banner' ) );
    echo '</div>';
}

// Mostrar los primeros 6 productos (3 columnas y 2 filas)
echo '<div class="product-grid first-section">';
$counter = 0;
if ( have_posts() ) :
    while ( have_posts() && $counter < 6 ) : the_post();
        echo '<div class="product-item">';
        wc_get_template_part( 'content', 'product' ); // Cargar plantilla de producto
        echo '</div>';
        $counter++;
    endwhile;
endif;
echo '</div>'; // Cierre de la primera sección de productos

// Mostrar el resto de los productos (5 columnas)
echo '<div class="product-grid full-grid">';
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        echo '<div class="product-item">';
        wc_get_template_part( 'content', 'product' ); // Cargar plantilla de producto
        echo '</div>';
    endwhile;
endif;
echo '</div>'; // Cierre de la segunda sección de productos

echo '</div>'; // Cierre del contenedor principal de productos

do_action( 'woocommerce_after_main_content' );

get_footer( 'shop' );

Luego en el style.php, tienes que añadir esto, y seguramente ajustar, ahí ya según la pantalla y demás tendrás que ir viendo la mejor manera.
/* Contenedor principal */
.product-container {
    display: flex;
    flex-wrap: wrap;  
}

/* Banner de la categoría */
.category-banner {
    flex: 0 0 35%; 
    height: 400px;  
    margin-bottom: 20px;
}

/* Estilo de la imagen del banner */
.custom-category-banner {
    width: auto; 
    height: auto; 
    object-fit: cover; 
}

/* Primera sección de productos - 3 columnas y 2 filas */
.product-grid.first-section {
    flex: 0 0 60%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.product-grid.first-section .product-item {
    flex: 0 0 30%; 
    margin-bottom: 20px;  
}

/* Productos restantes - 5 columnas */
.product-grid.full-grid {
    flex: 0 0 100%; 
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.product-grid.full-grid .product-item {
    flex: 0 0 18%; 
    margin-bottom: 20px;  
}

/* Responsividad */

/* En pantallas pequeñas, ajustamos el número de columnas */
@media (max-width: 768px) {
    .product-grid.first-section .product-item,
    .product-grid.full-grid .product-item {
        flex: 0 0 45%; 
    }

    .category-banner {
        flex: 0 0 100%; 
    }
}

/* En pantallas muy pequeñas, ajustamos aún más */
@media (max-width: 480px) {
    .product-grid.first-section .product-item,
    .product-grid.full-grid .product-item {
        flex: 0 0 100%; /*
    }

    .category-banner {
        flex: 0 0 100%; 
    }
}

Hi victor.sanchez,

Thanks for reaching to us.

Unfortunately, complicated customization is out of our basic support.

Thanks for understanding our limitations. Let me know if you have any questions.

Kind Regards,

[Author]

Posts