[Resolved] Using Custom View with a Divi Content Template in multiple columns

[Author]

Posts

[JeffK362]

Tell us what you are trying to do?
I am using a custom view to display items on a search/results page. I am using the Divi component to create the custom template that is referenced in the view. However, I seem to be unable to create a multiple column result. All my results are single row. I really would like to be able to show four items per row.

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - can you please show me how you configured your view's loop Editor section?

[JeffK362]

Loop Editor Section

[wpv-layout-start]
[wpv-items-found]
    <!-- wpv-loop-start -->
<wpv-loop wrap="4" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-sm-3">[wpv-post-body view_template="loop-item-in-auctionalternateview"]</div>
		[wpv-item index=other]
			<div class="col-sm-3">[wpv-post-body view_template="loop-item-in-auctionalternateview"]</div>
		[wpv-item index=4]
			<div class="col-sm-3">[wpv-post-body view_template="loop-item-in-auctionalternateview"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-sm-3"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-3"></div>
		</div>
	</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found] 
[wpv-layout-end]	

The Template section is:

[wpv-post-body view_template="auctionhomeloopalternate"]

[Minesh]

I see you are using the Bootstrap classes but is Bootstrap loading is set?

What settings you have at: Toolset => Settings => General Tab => Bootstrap loading?

[JeffK362]

Looks like Bootstrap was not being loaded. I am wondering if it is possible to make the loop show 6 items when the display is 1080px or greater, 4 when it is in laptop resolution and 1 when smaller?

[Minesh]

Well - that's a different question.

Views will use the native Bootstrap breakpoints:
hidden link

For that you must know and understand how CSS mediaqueries works:
=> hidden link

I suggest please consult CSS expert for the same and understand how you can integrate such requirement.

[JeffK362]

I understand that, but isn;t that something that is addressed in the wpv-loop code and not css? In other words, right now you have the loop set to "4". Is that where I would change things? Is there a way to use If structures in the view code? Just curious if you have any examples of what I am trying to accomplish?

[Minesh]

Well - for that I would suggest you to use our test platform discover-wp.com and create a test site with our available reference site:
=> https://discover-wp.com/site-types/bootcommerce-layouts/
=> hidden link
[you will notice that it will display 4 items per row normally and 2 items for smaller screen]

Once you create the test site using the above site head to Toolset => WordPress Archives => Products listing archive and check how the loop editor is configured and play with it using bootstrap classes as per your need.

More info:
=> https://toolset.com/documentation/user-guides/digging-into-view-outputs/#vmeta-wpv-bootstrap-layout
=> https://toolset.com/documentation/user-guides/view-layouts-101/#bootstrap