[Resolved] Split: show woo-commerce product archive in columns

[Author]

Posts

[mouneebS-2]

Perfect. Now another thing:
1. I want to show products in 2 columns for this I have added this in Loop Editor.

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<table width="100%" class="wpv-loop js-wpv-loop">
	<wpv-loop wrap="2" pad="true">
		[wpv-item index=1]
		<tr>
			<td>
				[wpv-post-body view_template="Loop item in Custom woo-commerce products cat tem"]
			</td>
		[wpv-item index=other]
			<td>
				[wpv-post-body view_template="Loop item in Custom woo-commerce products cat tem"]
			</td>
		[wpv-item index=2]
			<td>
				[wpv-post-body view_template="Loop item in Custom woo-commerce products cat tem"]
			</td>
		</tr>
		[wpv-item index=pad]
			<td></td>
		[wpv-item index=pad-last]
			<td></td>
		</tr>
	</wpv-loop>
	</table>
	<!-- 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]

2. I'm using DIVI to show contents like products and other sections (image 1).
3. But I only want show products in 2 column not the whole page.
4. Issue is when I add other section in DIVI it appears in 2 columns (image 2).

You understand the issue? I want to display products in 2 columns not the whole page/sections.

[Nigel]

Sorry, I'm not sure I do understand.

This is the product category archive, so it queries the database for products, and then outputs them according to what you specify in the Loop Editor.

There you have said that the products should be displayed in two columns.

What is shown for each product is determined by what is in the linked template "Loop item in Custom woo-commerce products cat tem".

You've designed that template with Divi.

Whatever you include in that Divi template will be output for every product displayed (and these products are shown in two columns).

(You may want to check this documentation about certain styling issues that arise when using Divi with Toolset: https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/)

If you want to include some content on the archive page that is not part of the Loop, e.g. after the list of products, then you would have to insert that content directly in the Loop Editor, but outside of the wpv-loop tags (which is what is shown for every iteration of the Loop).

So you could insert some content (with HTML markup and shortcodes) just before the closing wpv-layout-end shortcode.

That wouldn't be shown in columns, because only the products output within the loop itself are set to be shown in columns.

Does that help?

If not, please clarify.

[mouneebS-2]

Hi Nigel perfect plan, but you have to guide me here:
You said
"If you want to include some content on the archive page that is not part of the Loop, e.g. after the list of products, then you would have to insert that content directly in the Loop Editor, but outside of the wpv-loop tags (which is what is shown for every iteration of the Loop)."
So my question is how to insert that content directly in the Loop Editor because the part I'm going to list on product category page is build in DIVI and loop editor will not allow me to add DIVI code.
I understand your point but kindly guide me how?
For better understanding I'm sharing some screenshots and code below:
Loop Editor:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<table width="100%" class="wpv-loop js-wpv-loop">
	<wpv-loop wrap="2" pad="true">
		[wpv-item index=1]
		<tr>
			<td>
				[wpv-post-body view_template="Loop item in Custom woo-commerce products cat tem"]
			</td>
		[wpv-item index=other]
			<td>
				[wpv-post-body view_template="Loop item in Custom woo-commerce products cat tem"]
			</td>
		[wpv-item index=2]
			<td>
				[wpv-post-body view_template="Loop item in Custom woo-commerce products cat tem"]
			</td>
		</tr>
		[wpv-item index=pad]
			<td></td>
		[wpv-item index=pad-last]
			<td></td>
		</tr>
	</wpv-loop>
	</table>
	<!-- 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]

Templates for this WordPress Archive:
see image 1

DIVI editor text Module:
see image 2

DIVI editor text Module Code:

<div class="custom-product-cat-page">
  <div class="image">
  	[wpv-post-featured-image size="custom" width="120"]
  </div>
                                                    
  <div class="desc">
  <h4>[wpv-post-title]</h4>
  [types field='key-benefits'][/types]
  
  
  </div>
  
  <a href="[wpv-post-url]">
	Know more
  </a>
</div>

Thank you

[Nigel]

You are customising the archive using Toolset but designing the output of the archive—specifically, what fields are output for each post returned by the archive—using Divi.

Try adding an h2 tag near the end of your Loop Editor to see where you can add content that is separate from the products themselves (which you are displaying in columns), like so:

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <table width="100%" class="wpv-loop js-wpv-loop">
    <wpv-loop wrap="2" pad="true">
        [wpv-item index=1]
        <tr>
            <td>
                [wpv-post-body view_template="Loop item in Custom woo-commerce products cat tem"]
            </td>
        [wpv-item index=other]
            <td>
                [wpv-post-body view_template="Loop item in Custom woo-commerce products cat tem"]
            </td>
        [wpv-item index=2]
            <td>
                [wpv-post-body view_template="Loop item in Custom woo-commerce products cat tem"]
            </td>
        </tr>
        [wpv-item index=pad]
            <td></td>
        [wpv-item index=pad-last]
            <td></td>
        </tr>
    </wpv-loop>
    </table>
    <!-- wpv-loop-end -->
    <h2>MORE CONTENT OUTSIDE THE COLUMNS HERE</h2>
    [/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]

Hopefully if you look at the archive on the front end you'll see the h2 header where you expect.

Now, you cannot insert Divi modules into output generated by Toolset, there is no shortcode to output a Divi module where we just added the header.

But.

You can make a new Content Template which isn't assigned to any content type and which is just a container for HTML, you can design that template using Divi, and then you can insert that template using the wpv-post-body shortcode where we added the test header.

So,
- go to Toolset > Content Templates and create an unassigned template
- design the template using Divi
- where we added the h2 header, use the Field and Views button to insert the template (you should find it at the bottom of the dialog)

Let me know if that works.

[mouneebS-2]

Great it worked but still one issue is there.
Because of sidebar in [wpv-post-body view_template="Loop item in Custom woo-commerce products cat tem"] template it is effecting bottom part of other template.
Image 1 is what I see now and image 2 is what I expecting to see here. These sections are full width.

[Nigel]

I don't understand how the sidebar is being added.

Maybe I could look at your site to see how you are setting this up?

I will mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.

[mouneebS-2]

I need to show the sidebar in upper part on page.
Basically I want to design this page like the screenshot attached below this is the one whole page.

[Nigel]

The sidebar is added by your theme (and you have added the product category widget to it).

So on this page your theme has a main content area to the left, and a sidebar on the right.

The sidebar takes up about a quarter of the width, leaving about three quarters available to the main content.

When you create a custom archive with Toolset (or when creating any kind of Views output) it will only take up the space available to the loop output, i.e. the main content section.

So if you have a sidebar, you cannot have content take up the whole width.

I would suggest an alternative, but it gets messy because your theme is Divi.

I would suggest using Layouts to design the archive. You would create a Layout template that you assigned to the product category archive. You would add a row and in the left three quarters would insert a WordPress archive cell with your custom archive design, and in the right one quarter add a widget cell for your product categories widget. Then start a new row for other content such as the testimonials.

You can set the theme options to full width for this Layout, so the theme itself won't display the sidebar and will make the whole width available to the main content (generated by Layouts), and the Layouts template adds the sidebar.

The problem with this solution—and I don't think there is another solution—is that we explicitly discourage the use of Layouts with Divi (https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/#do-not-use-toolset-layouts), the reason being that the Divi theme is not compatible with Bootstrap, and Layouts uses Bootstrap for its grid.

So, it might be possible to adopt a similar solution, but it would likely require writing a lot of custom CSS rules to circumvent the Divi Bootstrap incompatibility yourself.

[mouneebS-2]

Hi Nigel,

Thanks for the solution but I'm not sure by using layout to design the archive. Let's say if I use layout then issue will be same, inner layout means current layout for archive will be full width and without side bar but when I assign sidebar to new layout it will still show the sidebar on whole page. Outer layout will be 2/3 for (inner layout) and 1/3 for (sidebar) for the whole page. I will be glad if I can you can setup a meeting call for this issue if you can?

Thank you

[Nigel]

That's not right.

The idea would be that you assign a Layout to the archive.

In the theme options for that Layout you specify no sidebar, so that the content area (available to Layouts) will occupy the full width.

You then add your first row.

This row has the archive cell on the left 2/3, and you add a widget cell to the right 1/3 where you include your product category widget.

So you have the product category widget in what looks like a sidebar, but isn't a normal WordPress sidebar, it's the main content area divided up by Layouts.

You can then add another row beneath this which occupies the full width, and is not constrained by the fake sidebar in the row above.

But the problem with this solution is, as I mentioned above, that we specifically discourage the use of Layouts with Divi, because Layouts uses the Bootstrap grid, and Divi is not compatible with Bootstrap.

You could either disable Bootstrap in the Toolset settings, as directed, but that means were you to use Layouts you would have to add styling for the grid yourself. Or you could enable Bootstrap, and deal with the style conflicts that arise with Divi, which is again something you would need to deal with yourself.

There isn't really anything further I can help you with, because both options involve doing something we do not recommend.

What you are aiming for is unusual in any case—having a sidebar, but wanting content to appear beneath the sidebar, which is not how they normally work.

Probably the most correct solution would be to create a custom theme PHP file (in a child theme) for this particular archive, and add content directly in the theme template below the main content and sidebar (effectively like a footer-before-the-footer), but that requires familiarity with writing PHP and editing theme files.

(If you were using a different theme than Divi which supported theme options in Layouts but wasn't incompatible with Bootstrap then you could employ the solution I described above easily enough.)

[mouneebS-2]

Hi Nigel,

Can you please explain more?
unfortunately, I didn't get you point.

Thank you

[Nigel]

You have three options that I can't help you with (two that involve using Divi and Layouts together, which is explicitly discouraged, and one that involves manually creating a theme PHP template for this particular archive), and one that I can.

I won't go over the suggestions that I can't help you with again.

But if you want to explore the fourth option, I can continue.

That requires using a different theme than Divi, one which isn't incompatible with Bootstrap. Take a look at the list of recommended themes (https://toolset.com/documentation/recommended-themes/) and if you are able to use a theme such as GeneratePress or OceanWP that works well with Bootstrap (and therefore Layouts) then let me know, and I'll describe again how you would use Layouts to create a custom design for the archive that included the product categories widget within the Layout template so that you could add full-width content below it.

[mouneebS-2]

Hi Nigel,

Finally found a way for this problem, but before that I want to enable fullwidth for the achieve page.
Issue is I can't see the option for fullwidth here. Can you help me in that?

As you can see in "Screen Shot 2018-10-18 at 2.33.37 PM.png" I was able to disable sidebar from achieve page but the space for side bar is still there.

Thank you

[Nigel]

Hi there

You might be in luck.

Checking, I see that there is no full-width option for archives because Divi has no such option (and the theme options available in Toolset reflect the available theme options).

But.

If you go to the Divi theme options themselves at Divi > Theme options > General, you'll see that WooCommerce archives are a special case, it has a Fullwidth option available.

So try setting the option for the WC archives in Divi itself.

I haven't tested it myself, so let me know.

[mouneebS-2]

Hi Nigel,

Thanks for the solution, I have select the option form DIVI for woo-commerce achieve page but still 80% of screen is covered 20% is blank.

Thank you