Using Column Gaps as dividers, assistance with Product Index Layout

[sam_futr]

Hi Team

Looking to utilise the same design approach as @kory has done in the below tutorial:

Layout Tricks: Using Column Gaps as Dividers

But for a WC Shop Index, using the WC Product Archive option in the new Pro versions.

However, I’m coming across an issue when there are Products that do not fill up the entire bottom row. The background colour used to create the 1px Column/Row gaps shows through, because there is no Product there to show. Per below:

Is there any way to navigate around this issue? Other than making the index an even number of products, as the next product page will show the same issue…

Or is there another way to create the same border/gap/divider effect without using the above background colour option in the video?

Was thinking there may be another way around it using the new looper functionality in a different way as well, but I’m unsure on that also.

Thanks
Sam

[tristup]

Hi Sam,

Thanks for reaching out.
It will be very difficult to achieve the approach shown in the video for the Layout Templates.
Still, I would suggest you try adding the border to each element and make a separate condition for the last looper. Condition for last item index can be done by adding {{dc:looper:index}} and {{dc:looper:count}}. I have tried the same in my local environment and found it is working.

Hope it helps.
Thanks

[sam_futr]

Thanks @tristup

Can you please provide more info as to how your borders looked when you replicated in your environment? How did you make a condition for the last looper?

I’m having issues with using borders where the 1px on the sides overlap for each product and create a thicker border - which is not optimal of course:

This is what I’m looking at in Pro - is there maybe a way to create a full row of products in the layout to input the borders, rather than just seeing the first Product only?

I will provide you with access as well.

Thanks
Sam

[ruenel]

Hello Sam,

It will look different between the Layout Builder and the live view of the page. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[sam_futr]

Secure note added

[tristup]

Hi Sam,

I have created a Layout by duplicating the existing one and added the border of width 2px and it works. You can find the layout named Product Archive by Themeco.

Hope it helps.
Thanks

[sam_futr]

Hi @tristup

This hasn’t worked. You can clearly see the multiple border lines on the columns even in your screenshot. There is a 1px column and row gap on the layout. and when you change this to 0px the middle lines get thicker because there is an overlap of borders.

I have worked out that you can use -1px on the X and Y axis gaps to ensure the borders are all retained at 1px.

Thanks
Sam

[prakash_s]

Hello Sam,

Glad that you were able to find out the solution of the column border. Please feel free to reach us if you have any query regarding our theme and theme settings.

Thanks