Layout for Archive page on Mobile

Is it possible to have this layout on mobile:
1. One column product
2. Two column product
3. Two column product
4. One column product
5. Two column product…
And it repeats in that pattern.

Screenshot attached

Attachments:

You must be logged in to view attached files.

Also, additional question related to this. Is there any way to have the layout attached for desktop?

Attachments:

You must be logged in to view attached files.

Hi axpresali,

Thanks for reaching to us.

Can you please let me know which kind of archives you are referring to?

Kind Regards,

Hey! Sorry, for a product archive!

Like a category page 🙂

Hi axpresali,

If you want to build custom WooCommerce layouts, I kindly recommend you to use Custom Product layout, which is built with WoodMart WooCommerce builder.

Further, you can read more about the Layout Builder here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

And you can combine with Elementor’s Mobile Editor to change layouts on mobile devices https://elementor.com/help/mobile-editing/

Regards,

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!

Hi axpresali,

Default settings layouts-related do not offer more ways to change the layout, please use Custom Product Layout post type.

Kind Regards,

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

Hi axpresali,

Your question is a bit unclear to me. Please describe in more details or or your desired goal, this will allow me to thoroughly investigate and address your concerns in a more efficient.

Regards,

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!

Attachments:

You must be logged in to view attached files.

Hi axpresali,

Thanks for your patience.

I cannot access your provided link, seems it blocked IPs or Countries, I am come from Viet Nam.

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Best Regards,

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!

Attachments:

You must be logged in to view attached files.

Hi axpresali,

Please watch recorded video for better understanding https://go.screenpal.com/watch/cThl0LnQ7cb

Best Regards,

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

Hi axpresali,

When you use Layouts post type it also means these custom layouts will apply automatically.

Best Regards,

[Author]

Posts