[Resolved] Help!?!?!?!?!?! Im losing my mind

[Author]

Posts

[robertE-7]

Hi,

Been on this for about 2 weeks now.

I'm slowly losing my mid, and near the point of just getting a refund. I know you have tried your best to help me, but Im getting massively confused and I'm getting told, that yes its possible in one thread, and told its not in another?

I have tried following your help steps, watching Videos on YouTube and Reading your documentation. Its just not working, and I have no idea why not, or what I should be doing.

You should be able to see my other support tickets where I'm declaring what I want to achieve. Its too long winded to type out again.

I use Beaver Builder as a page builder, I know you will say its not compatible. I have however managed to get my Single product page looking how I want. It displays the information I want, and looks fine. This was Achieved using Layouts. Its looks fine, and works fine so obvisouly BB isnt effecting it that much.

This has been achieved by called the Bootstrap CDN via Generatepress Hooks and only inputting the hook on the Woocommerce Single and Archive pages.

I want to achieve a products archive page like this>

hidden link

A list on the left, displaying products. The filter on the left, the filter can be on the top, Im not bothered aslong as it works!

The issue I have, is that i don't know whether to use, Tool Set Views, Tool Set Content Templates, Tool Set Layouts?

If you go to this page,

hidden link

its a complete mess, and I know its something I am doing wrong, again forgive me for being dumb, and if Im annoying you, but I just want to achieve this.

hidden link

If you tell me its 100% not possible, then I will just give up and ask for a refund, as its clearly not what I need.

To be fair, I sent a pre-sales question and was told, "yes its possible".

I mean, if its at all possible, for someone from your support to login to my site, and just set it up for me how I want, I can pay for this, and it will mean I stop pestering you.

But this is my last shot at getting this working. please understand, not everyone of your customers as a background in development.

[Nigel]

Hi Rob

Do you want to provide site credentials in your next reply so I can take a look at how you have currently set up the problem page? (It will also ask for FTP credentials, I don't need those.)

I won't set up the search for you, but I will look to see what is wrong and advise you of what to change.

[Nigel]

I can't tell how you are customising the shop page (hidden link).

With Toolset you can either:

- assign a Template Layout to the product archive, but visiting Toolset > Layouts there are no such Layouts; or
- assign a custom archive design (much like a View) directly at Toolset > WordPress Archives, but there are no such custom archives.

So I can't see how you have made this page in the first place, could you clarify that before I go any further?

However you have made it I can see you have inserted a View ("My View") on the page, but I'd like to know how.

Although the recommended way to customise the shop page would be one of the two methods above, but I'd like to see if there is a good reason you are not doing either of those.

[robertE-7]

Hi Nigel

To be honest no idea how ive managed it, was just trying different things. I think i just pasted the shortcode on to the products page.

Im happy to remove it all for the archive.

But im still not going to be able to create a new archives page that looks I want, becuase I dont know how to do it.

[Nigel]

OK, let's take this a few steps at a time.

First, we want Toolset to take control of the shop page.

The shop page is an archive page, specifically the archive of product posts, so we need to create a custom archive for it.

I mentioned the two ways you can do that above, and I suggest you start without Layouts and only add Layouts to the mix if you need it.

So step 1 is to go to Toolset > WordPress Archives and create a new custom archive, which you assign to the Products custom post archive. You have the option to include custom search, which you should go ahead and add.

You'll see that this page is much like creating a View, and I suggest you go ahead and set it up with the search in a similar way as you did with your View.

When it comes to the output, use the Loop Output wizard to help you create the markup required for a grid, for example, choosing to group the fields you add into a linked content template (which will be shown immediately below).

This content template is for the content that will be shown for each product. You can either create the markup for a card-like structure more-or-less manually, or if you are not too comfortable writing the HTML you can use a page builder to help with the design. So you could edit this template with Beaver Builder, for example.

Now, one last part of this particular jigsaw is that you are customising the WooCommerce product archive, and WooCommerce handles this differently than standard WordPress archives.

Which means that we need to tell Toolset that, yes, we want to use Toolset templates for displaying the product archive rather than the special WooCommerce template, which we do by choosing "WooCommerce Views plugin default product archive template" for the Product Archive Template File at Toolset > WooCommerce Views.

When you have done the above you should find that you have a functioning product search created with Toolset displaying on your shop page.

When you've got this far—and confirmed that it is working—we can discuss further about how you want to customise it in terms of the page layout etc., but try to follow the above first and then we can continue.

[robertE-7]

Hi Nigel

Thanks for your help, your description has helped me understand it a little more.

I think its now just a case of editing the style of the page

Although can anything be done with the filter. Id prefer it to be on the left hand side, but if easier it can stay on the top

But is there a way to use ToolSet to style the Filter, say add product categories into the filter, and sort by etc. But putting the filters into a column format?

[Nigel]

Hi Rob

There's something odd about that page.

I'm not familiar with your theme, but I'm wondering if you have customised the theme templates or if you have something else which is affecting the layout of the page.

You'll notice on the page that the content area (where the custom archive including search filters is showing) is taking up the right 3/4's of the page, with the left 1/4 blank.

That looks like a typical sidebar/content arrangement, and when examining the page source with the browser dev tools I can see that within a full width #content container div there is a #primary div with classes push-25 and grid-75 that are responsible for splitting the screen in this way.

I tested adding a widget to the left sidebar, but nothing appears on screen, so the widget area on this page doesn't appear to work, and I edited the page settings and for sidebars chose "Content (no sidebars)", and yet it still shows the same page split.

Toolset templates—including this custom archive template—will only take over the content area of the screen.

For filter controls in a left column you have two options.

One is to have a left sidebar on the page and add the filter controls as a widget (but you then need a submit button as ajax updates won't work).

The other is to use a no-sidebars page layout so that Toolset has the full screen width available to it, and then use some CSS to show the filter controls on the left of the results on the right.

But because of the issues I describe with your page layout above, neither of these options is currently possible.

Do you have any insights as to why your page layout seems broken?

[robertE-7]

I've had to use GeneratePress layouts element, as I've also had that issue.

Whats strange is that when I preview the page in Beaver Builder, the footer is full width, then the footer is full width.

When i then view the actual page, it goes back to contained.

I have raised a ticket with GeneratePress, however it only seems to happen on this page, so it could be Toolset causing it.

[robertE-7]

Im also looking for this, i think the page would look better full width.

The screen shot is what I am after ideally. Is that something that is possible with toolset?

[Nigel]

Looks like you fixed the issue with full-width.

In which case if you want to display the filter controls in-line then you will need to add a little CSS for that.

The simplest way would be to use flexbox to evenly space the filter controls.

Something like this:

  .wpv-filter-form {
    display: flex;
  	justify-content: space-around;
  }
  .wpv-filter-form .form-group {
    flex: 0 1 auto;
  }

Note that the "Sort by popularity" dropdown is added by WooCommerce and the way the markup is inserted is such that you cannot readily combine it in the same line with the Toolset filter controls.

You can either live with it being in a different location, or don't show it at all, or don't show it but add Toolset front-end ordering controls (let me know if you need more info about that).

To hide the WooCommerce sorting control you can also add the following CSS:

form.woocommerce-ordering {
  display: none;
}

[robertE-7]

Thanks, applied both.

So how do I add more filters to that?

And can I just have a submit button?

Select Make
Select model
select category
submit.

Also, the sort by needs to be there too, if you can let me know please.

[Nigel]

Hi Rob

I tweaked the markup in your archive, it was getting a little tangled, so each filter control is in it's own .form-group container so that they are spread out evenly.

I also inserted the missing product category filter control (product categories was greyed-out for some reason when I first looked, it was only after cleaning up the markup that it because possible to insert it, I'm not sure why).

One last thing would be to update your CSS slightly so that the filter controls are vertically aligned nicely with the submit/reset buttons, like so:

.wpv-filter-form {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

[robertE-7]

Thankyou, thankyou! 🙂

Finally getting somewhere,

Any advice on why the images are disappering when i use the filter?

Please see attached.

They come back if I reset the filter, or refresh the screen.

Also, is the filter capable of reposnive layout? Or is that pure CSS ammendments?

[Nigel]

Re: the disappearing images, I forgot that we have a current open issue with the Beaver Builder integration where some of the Beaver content/styling is lost with ajax updates. It will get fixed, but I can't say when.

In the meantime change the archive settings so that the results update with a page refresh instead of by ajax, I expect that to fix it.

To make the filter controls responsive, add another tweak to the CSS:

.wpv-filter-form {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

That should have the positioning of the filter controls adjust as you change the screen size, though you may find you need some final tweaks to add margins or padding.

[robertE-7]

Great stuff Nigel,

It works fine now.

Can you help me with something else, this time on the single product page?

Or should I create a new ticket?

I basically want a "this part also fits" as a tab on the bottom, when that tab is clicked it displays all the model that a product is assigned to.

As a table or list.

New threads created by Nigel and linked to this one are listed below:

https://toolset.com/forums/topic/split-add-this-product-also-fits-section-to-a-woocommerce-product-page/