[Resolved] Tabs CSS

[Author]

Posts

[robertE-7]

I am trying to:
Put Custom Fields into tabs
Link to a page where the issue can be seen:
hidden link
I expected to see:
Horizontal Tabs
Instead, I got:
basic HTML text

[Christian Cox]

Hi, can you tell me more about the problem?
- Which part of this page is supposed to be shown in tabs?
- Take a screenshot of the Layout editor so I can see the rows and columns you created. Include the screenshot in your next reply.

[robertE-7]

Hi,

please see attached images.

All i want to do is, place the Tabs as shown on the attached layout screenshot, it completely mess up my layout. Why isnt my Toolset layouts adhering to my Generatepress Markup??

Its adding its own Bootstrap Rows, which are not in my CSS files, so its just no styled HTML?

I can add the normal "product tabs", but want to place my Custom Field "OEM Reference Numbers" in my tabs.

So the Tabs should be Product Desc and then OEM Ref Numbers".

[Christian Cox]

It's hard for me to diagnose the problem because I'm not able to see it. It looks like you have removed the tabs from Layouts. If you'd like, I can log in to wp-admin and create a copy of the site so I can run some additional tests. Please provide login credentials in the private reply fields here.

[Christian Cox]

I can see you currently have Beaver Builder and Toolset Layouts active. These two systems are not intended to be used together. You should deactivate one or the other, because using them together is likely to cause unavoidable conflicts. We have more information about using Toolset and Beaver Builder together available here:
https://toolset.com/documentation/user-guides/using-toolset-with-beaver-builder/

I will continue to investigate the issue with Layouts and update you soon.

[robertE-7]

Hi,

OK, i need help with this. So I have deactivate Layouts. There is no way I am deactivating Beaver Builder, I have put too much work into other pages.

All I want to achieve is a Archive Products Page, and Single Product Page where it doesnt look like trash, and has a filter on the left hand side, or the top.

I have a support ticket open with another guy at Toolset. He is helping me create a Custom Post Type relationship to use with the filter, but I am being told to use "Views".

The only option I have when creating a View is Table, Table Grid, or Bootstrap 3. Any of those makes the layout look horrible.

Generate Press doesn't even use Bootstrap 3 as a framework.

If you look at this page. You will see what I mean.

hidden link

[robertE-7]

Hi Christian.

Not heard anything back.

If you go to this page on my site, you will see what I mean about the tabs.

hidden link

[Christian Cox]

I'm not able to see much at either of these links, but I can give you some general advice about setting up Single Product and Product Archive designs with Toolset. It looks like you have set up WooCommerce Views to show the designs you create with Toolset templates for single Products and Product Archives. So next I would follow these steps:
- Edit this old Content Template and disassociate it from the Products archive. We will create a new template for this purpose.
hidden link
- Now Trash that old Content Template you just edited. Also trash this other unneeded Content Template:
hidden link
- Go to Toolset > Content Templates > Add New and create a new Content Template. Assign this template to Single Product display and save it.
- Edit this new Content Template to include the desired Product information like title, price, and add to cart buttons. You can edit with Beaver Builder if you'd like. Toolset's shortcodes can be used to display product information.
- Preview any single Product to see your new Content Template and make adjustments as needed.
- Go to Toolset > WordPress Archives > Add New and create a new WordPress Archive. Assign this archive to Product Archives and save it.
- In the Loop Editor area, click the Loop Wizard button to start an unformatted design. Insert the post title for now, and be sure to check the "Use a Content Template" checkbox in the popup.
- Scroll down to the template editor and click the Beaver Builder button to design the CT with Beaver Builder.
- In the BB editor, add text and other elements to design each item in the Product Archive.
- Go to the products archive to preview the changes and make adjustments as needed: hidden link

All I want to achieve is a Archive Products Page, and Single Product Page where it doesnt look like trash, and has a filter on the left hand side, or the top.
Okay a few things I want to point out so you can make the best decision about how to proceed here. It sounds like you want to include a search form with filters on both the Product Archive and the Single Product pages.
- On the Product Archives, you can certainly include this type of search form and filter. However, it is not possible to split the search form and results into separate shortcodes. This means you can't use Beaver Builder to lay out a 1/3 - 2/3 width column system and place the filters in a 1/3 width column and the results in 2/3 width column - you can't split them apart like this. The best way to split the search filters and results into columns in a Product Archive is to use HTML and CSS in the WordPress Archive editor area. Bootstrap is the best option we have for this, because it has responsive capabilities built-in.
- On the Single Product page, you can include a custom search form that redirects to a custom Page containing the results of a custom search View. However, you cannot include a custom search form that redirects to the Product Archive page described above. Again, it is not possible to separate a WordPress Archive search form from its results like this.

[robertE-7]

Hi Christian

OK, so Ive managed to get my Single Product page working in BB using Text element to add Custom Fields etc. Was happy with the layout.

Then I came to the Archive page.

Then I read your comment about it as im following the guide you wrote.

So you basically saying that:

I cannot use Beaver Builder to create 2 columns, placing my product grid on the right, and then Toolset Filter on the left column? This will never work?

Your basically saying that If i want ToolSet to work 100%, I should disable Beaver Builder completely, and use Toolset to design my entire site?

I seem to be getting one page working, and then face yet another stumbling block that stops me making what I want.

[Christian Cox]

I cannot use Beaver Builder to create 2 columns, placing my product grid on the right, and then Toolset Filter on the left column? This will never work?
On the archive page in the current software, this is correct. There is no way to split a Toolset WordPress Archive's filters and results apart into two separate Beaver Builder "blocks" or builder modules.

Your basically saying that If i want ToolSet to work 100%, I should disable Beaver Builder completely, and use Toolset to design my entire site?
No, please let me rephrase. I'm not saying the two systems are mutually exclusive. I'm saying that the appropriate place to separate a Toolset WordPress Archive's filters and results is in the Toolset WordPress Archive editor, not in the Beaver Builder design tool for the archive's loop template. Therefore, your columns should be created with code in the WordPress Archive. This type of customization may require knowledge of HTML and CSS.

[robertE-7]

Hi Christian.

I think im getting there with this slowly, sorry for my ignorance.

The way ive managed to get this working is to:

Have BB still enabled.

Using Generatpress Hooks, load Bootstrap CDN CSS, but only on the Product and Archive pages.

It seems to have sorted the Layout issue out, and my Shortcodes seem fine now.

Its just alot of messing with CSS etc. But aslong as I achieve what I want.

This is what Ive manage to cobble together.

hidden link

Another question, would this layout be possible for the Archive Product Page?

hidden link

[Christian Cox]

Another question, would this layout be possible for the Archive Product Page?
There's a lot going on here so I can't say for sure. This is essentially a 2-column display in the main content area, with filters in the left column and a table of results in the right column. There is some responsive capability built in to display nicely on mobile devices. So it depends on how much you want to accomplish with BB and how much you are able to do with HTML.

To build this with Beaver Builder, you would need some way to separate the filters and results into separate modules to achieve the responsive column effect. That's not possible, as we have already discussed. Instead, you could copy this basic markup structure and transcribe that into your Toolset WordPress Archive's Output Editor panel. See the attached screenshot here for a very basic example. I have created two divs in my Output Editor, and placed the filters in one div and the results in another. Then I would use custom CSS to create the columns and responsive properties.

If you cannot see the "Output Editor" panel in your WordPress Archive, scroll to the top right corner and click "Screen Options" to active it.

[robertE-7]

Hi Christian

Sorry I was talking about Layouts.

The link to my site above was using layouts.

The bisonparts is what I essentially want to reproduce within Toolset Layouts.

So to confirm. I am making every other page using BB and now using Layouts to create the Product and Archive. I have managed to get this working by inputting CDN only on the archive and single product pages.

I'm not designing the product pages in BB now. Can I reproduce the bison basic layout using toolset layouts? Filter on the left or on the top of the product loop

[Christian Cox]

Oh okay, I see, but the answer is basically the same. There are no separate Layout cells for Archive Filters and Archive Results, so filters to the left are only possible by adding custom HTML inside the WordPress Archive Output Editor. Filters on top are possible but only in the same Layouts cell. In other words, you can't have a row with the filters, a row with some other cells or grid structure, and then a third row with the archive results. The archive filters and results must be output in the same WordPress Archive Layout cell.

[robertE-7]

Sort of understand,

This is the support thread from your colleauge Luo Yang. I tried following it, but got stuck on the "Views" portion. He mention setting a widget on the left, and info on the right.

I suggest you try these:
1) Create two post types:
- Brand
- Model
https://toolset.com/documentation/user-guides/create-a-custom-post-type/

2) Setup one-to-many relationship between post type "Brand" and "Model"
https://toolset.com/documentation/post-relationships/
So you can setup "Brand" and "Model" posts like this:
Brand A
-- Model 1
-- Model 2
Brand B
-- Model 3

3) Setup many-to-many relationship between post type "Model" and "Product"
https://toolset.com/documentation/post-relationships/how-to-set-up-post-relationships-using-toolset/
When you edit a single product post, you will be able to connect it with multiple "Model" posts

4) Create a post view, for example "my-view", with option "Full custom display mode":
- query product posts,
- in section "Custom Search Settings", enable option "AJAX results update when visitors change any filter values"
- in section "Search and Pagination", setup the post type relationship filter by with "Model" and "Product", see screenshot:
post-relationship-filters.JPG
- in section "Loop Editor" display the product posts information

5) Create a wordpress page, display above view's search result only, for example:
[wpv-view name="my-view" view_display="layout"]

6) In the sidebar, display an "WP Views Filter" widget of view "my-view"

Then it should be able to achieve what you want:
Ajax filter on the sidebar. A user should be able to choose Brand = Mercedes, then only Mercedes model numbers show

He also sent me this demo site

hidden link

username/password: xgren/111111

Would either of those to possible??