Alternating layout for Woocommerce Archive page using builder

[Pbalazs89]

Hi there,

I’m trying to achieve the following layout with layout builder: (the one on the right)
https://capture.dropbox.com/7yMSOkuMSMVzDi5C
What would be the best way to go about this?

Thanks!

[marc_a]

Hey @Pbalazs89,

Thanks for reaching out!

If you want to have an alternate section layout, the CSS code can help you with that. Using nth-child selector.

• https://www.w3schools.com/cssref/sel_nth-child.php

And to switch the order, you may use this CSS trick and it to your columns.

• https://www.w3schools.com/cssref/css3_pr_order.php

Hope that helps.

[Pbalazs89]

Hi Mark,

I will try to go ahead with this. However, I’m wondering, is there no way to create a separate loop and styling in PRO for $i % 2 ==0 for example? So style the loops accordingly? It is easier when I’m building a template.

Thanks!

[marc_a]

Hey @Pbalazs89.

There’s no current option to do it dynamically without using CSS. You could also use this CSS code in the section element CSS.

$el .x-row:nth-child(2n) .x-row-inner {
  flex-direction: row-reverse !important;
}

Hope that helps.

[Pbalazs89]

Thanks, managed to do it using your suggestion.

[marc_a]

Hey @Pbalazs89,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.