Layout for Archive page on Mobile

Like a category page 🙂

I don’t want to build a custom layout, I just want to change the existing one to have those two variations. Using Elementor and your Layout Builder I don’t see any option to create those type of structures for the archives.

Are you able to give us some better guidance? Thanks!

And how can I accomplish those layouts I want to apply with the custom product layout? As far as I know, there’s no way to create a custom structure that repeats on Elementor, and I was hoping for your theme to have that ability

We want to achieve a similar mobile layout to this site: https://burgues.com/coleccion/ver-todo/abrigos (screenshot attached) but instead of one column product – two column products – one column product, the idea would be to have it be:

one
two
two
one

That way, you would see one big product, 4 smaller products in a 2 by 2 grid, and one big product below, repeating until there are no more products on that archive.

That’s for mobile, which is the biggest thing we want to accomplish.

Is that doable? Thanks!

Hey Hung,

Just to clarify — the page I shared was only an example. What I’m actually aiming for is to replicate the layout shown in the screenshot I’m attaching across all mobile archive product category pages.

The pattern I want is: one full-width (single column) product, followed by four products arranged in a two-column, two-row layout — and that sequence repeats until there are no more products.

As far as I know, Elementor doesn’t support this kind of layout out of the box, but I’ve seen it done in themes like RADE.

Let me know if you think there’s a way to implement this.

Thanks!

Hey Hung! Thanks for your reply.

I understand how to manually build a layout using flexbox or Elementor with fixed columns, but that’s not what I’m trying to do. I want this layout to apply automatically on archive pages (category, tag, etc.), where the number of products is dynamic and unknown — it could be 4, 20, or even 200 products.

My goal is to repeat this pattern:

1 full-width product

2 half-width products

2 half-width products

1 full-width product

2 half-width

2 half-width

1 full-width

(and so on…)

Since this layout needs to adapt to the loop automatically, I thought of using a modulus condition inside the content-product.php template.

Would something like this approach be compatible with Woodmart’s structure?

$i = 0;
while ( have_posts() ) : the_post();
    $i++;

    if ( $i % 5 == 1 ) {
        // Full-width product
        echo '<div class="full-width-product">';
        wc_get_template_part( 'content', 'product' );
        echo '</div>';
    } else {
        if ( $i % 5 == 2 ) echo '<div class="grid-4-wrapper">'; // Open grid
        echo '<div class="half-width-product">';
        wc_get_template_part( 'content', 'product' );
        echo '</div>';
        if ( $i % 5 == 0 ) echo '</div>'; // Close grid
    }

endwhile;

ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
}

li.product-large {
    grid-column: span 2;
}

li.product-small {
    grid-column: span 1;
}

Could you help me adapt that for your theme?

Thanks,
Axel