[Resolved] taxonomy template 3 column grid

[Author]

Posts

[davidI-6]

Tell us what you are trying to do?
I'm trying to create a content template to loop all products under the category
I've tried importing module and replicate but it either loops any product regardless the category or it repeats the same products x times.
Also layout is always 100% width so unable to display in three columns.

So in short I need help to set up properly the view, loop and content template, It did look like simple task but seems that can't get the correct logic to build it sorry! :/

Is there any documentation that you are following?
Toolset

Is there a similar example that we can see?

hidden link

What is the link to your site?

hidden link

[Shane]

Hi David,

Thank you for getting in touch.

I took a look at your link here
hidden link

I'm not seeing a view setup on this page. Could you send me a screenshot of the view on the backend that you are using so that I can see exactly how your setup is ?

Thanks,
Shane

[davidI-6]

Hi Shane,

Thanks for helping me with this issue, you can see the view set up in the screenshots and here's the code for the loop:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-sm-4">[wpv-post-body view_template="loop-item-in-product-category-view"]</div>
		[wpv-item index=other]
			<div class="col-sm-4">[wpv-post-body view_template="loop-item-in-product-category-view"]</div>
		[wpv-item index=3]
			<div class="col-sm-4">[wpv-post-body view_template="loop-item-in-product-category-view"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-sm-4"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-4"></div>
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Then the template for the loop

[types field="product-name"][/types]
[wpv-post-excerpt lenght="25" count="words"]
[types field='product-image' size'"medium" title='%%TITLE%%' alt='%%ALT%%' size='medium' resize='proportional'][/types]

last I've created a content template for the taxonomy "product-category" with the shortcode to view
[wpv-view name="product-category-view"]

I've also tried creating the template with Visual Composer and blocks or asigning the loop at content template but didn't affected the layout either.

Thanks!

[Shane]

Hi David,

Thank you, it seems that everything is setup correctly.

Could you ensure that bootstrap is enabled by going to Toolset -> Settings and checking.

If this still doesn't work would you mind providing me with admin access to the website to further check this issue for you ?

Thanks,
Shane

[Shane]

Hi David,

Thank you for the credentials.

You view should be working as intended now.

Unless your theme specifically comes with bootstrap then you will need to enable Toolset to load bootstrap.

Thanks,
Shane

[davidI-6]

Hi Shane,

Thanks for your help so far, now the layout seems to work (3 column) but the loop still not working as intended, if you look at the product taxonomy page looks like it loops products within each product and those products are not from the same category i.e. Roller Shutters (see screenshot)

hidden link

other minor issues
It shows the author name but I can't see that field on template
is not picking the excerpt assigned
Read more link is missing

Also any tips to get this view without building the CSS from scratch will be great
hidden link

Thanks!

David

[Shane]

Hi David,

I see what is wrong with your setup. The problem is that your page here
hidden link

This is listing out the items that are in the roller-shutter category, but you want to list out the taxonomies of each of the product that is being displayed.

Essentially this is really counter productive because if you're on the archive page for that product that already lists the information then you don't need to list out that post taxonomy.

What I believe you want to achieve is for each product be listed out in the 3 columns rather than the one correct? In order to do this you will need to create a custom archive by going to Toolset -> WordPress Archives and building your 3 column layout from there.

Finally your question here :
"Also any tips to get this view without building the CSS from scratch will be great"

You may not need to build this from scratch as you can import this module and then apply it to your case. The module should already have the required css. See instructions below to import.
https://toolset.com/modules/portfolio-three-column-grid-using-cards/

Please let me know if this helps
Thanks,
Shane

[davidI-6]

Hi Shane,

Ok, I've created the taxonomy archive but it doesn't let me edit the content, there's no update button (see screenshot) so I can't modify the design, sorry I may be missing something very obvious but seems that I'm going around in circles because this is the first thing I did before contacting you, then followed documentation and started the journey with views, loops and templates :/

Re your question:
What I believe you want to achieve is for each product be listed out in the 3 columns rather than the one correct?

- Just to make sure we are in the same page with this you mean for each product category display products (image, Name, excerpt , link to product) in three columns

i.e.
Category1 (taxonomy archive)
product1 product2 product3
Prorduct4 Product5 Product6

Thanks again for your help!

Kind regards

David

[davidI-6]

Update,

I'm a bit confused now, creating the wordpress taxonomy (which was already there) I need to create a new template to assign to the new wordpress taxonomy I just created, hence no way to edit the taxonomy template directly. But, then from the template itself I can't loop the products the way I want i.e. three columns so then I need to create a view,loop and template to control the output correct? if I just assign the template I can't change the column structure (3 columns) otherwise will repeat same content (see screenshot)

I hope any of this makes sense to you mate 🙂

Cheers

David

[Shane]

Hi David,

There seems to be an issue with the archive. It should not display as you have it in your screenshot here https://toolset.com/forums/topic/taxonomy-template-3-column-grid/#post-1557491

Could you temporarily disable all your non-toolset plugins and check the archive again. It seems something might be conflicting here.

The archive should open a similar editor like your view editor.

Thanks,
Shane

[davidI-6]

Ok we're getting there.

seems that is conflicting with both classic editor V.1.5 and WPBakery Page Builder 6.0.5 if either of those plugins is enabled wordpress taxonomies can't be edited

Any ideas?

Cheers

[Shane]

Hi David,

Right now you will need to proceed with both plugins disabled.

Could you send me a copy of the WP bakery plugin to run some tests here locally?

Thanks,
Shane

[davidI-6]

Hi Shane,

Sure no probs, do you want ftp access so you can download the plugin directly?

I've managed to install the custom template from the module and now the archive page works fine except for the CSS. it doesn't seem to bring the CSS with it, is there anything else apart from the template that I need to install?

see progress: hidden link

Cheers

David

[Shane]

Hi David,

Yes please provide the ftp access so that I can get it directly. Here are the private fields.

What I will be looking at is if there is a setting in the Page Builder plugin that allows you to disable the block editor.

Thanks,
Shane

[davidI-6]

Hi Shane,

I found the culprit, the Disable Gutenberg Editor was enabled on WPBakery builder and it seems is conflicting with Toolset block editor. Let me know if you still FTP access to investigate though!

So now my archive pages are working as intended but I'm now creating a carrousel of related products to go on the product template but it outputs all products regardless the category of the product displayed. Can I ask you to help me with that please?

Product page
hidden link

Product category
hidden link

Thanks for your help so far, now everything looks much easier than couple of days ago thanks to your support!

Cheers