[Resolved] How do i make a shoppage with productcatagories and products as a list

[Author]

Posts

[jesperh]

I want to design my shoppage as:

ProductCatagory Boots

Brown Boots
Red Boots
etc.

ProductCatatgory Jeans
Blue jeans
red Jeaans

[jesperh]

I still need assistance

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Jesper

There is an easy way to do something similar but not quite the same, or there is a more complex way of achieving what you want. Let me explain, and you can decide which route you want to go down.

So, products are a custom post type made by WooCommerce, and like all custom post types it can have an archive (a list of product posts), which in WC is the 'shop' page. The shop page is central to WC, and once you have defined which page will be used in the settings it gets added to the menus generated by WC and so on.

First, the easy option.

In WooCommerce > Settings > Products > Display under "Shop Page Display" you can specify what is output on the Shop page. If you choose "Show categories and products" then when you visit the shop page you would see the categories first with the number of products in that category in parentheses, followed by a list of products (which may be from different categories depending on your sorting option).

You can see how that looks in the screenshot (note that in your actual shop you would add images for the categories, what is shown are placeholders).

So you could have your Boots, Jeans etc. categories appearing first across the top, and when you click on any of those it takes you to that product category to show just those products.

That is working with WooCommerce and is straightforward, but isn't quite what you asked for.

If it sounds like I am encouraging you to go down that route it is only because what you ask for is more complex.

You cannot add the kind of ordering (by product category, or any taxonomy) to a post archive.

To order your products in such a way you first need to create a taxonomy view which lists your product categories, and then in the loop output section of those add a nested view which lists the products for the current category.

You would normally add the parent taxonomy view to a static page, but if you want WooCommerce to treat it as the shop page then you need to effectively hijack the product archive by making a custom WordPress archive for products and in the output section not output anything from the loop and insert your parent taxonomy view created above outside the loop tags.

That will work but is slightly wasteful because your normal product archive query will still be run and looped over, but will just output nothing.

I'm not sure how familiar you are with how WordPress queries work, but that is what's involved.

If you want to go down that route then let me know and I can help you set it up.

[jesperh]

Hi
Thank you for a quick answer, i am familiar with "In WooCommerce > Settings > Products > Display under "Shop Page Display" you can specify what is output on the Shop page. If you choose "Show categories and products"

But i need to go the hard way so I need alle the help i can get.

Jesper

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Jesper

Sorry, I didn't get time to come back to this today, I will give you directions in the morning.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Jesper

So, sleeves rolled up?

I described above what you would need to do, so let's review that.

Create a new View which is a taxonomy view called, say, "Product Category Terms" which will output your product categories.

So for Content Selection you will choose Taxonomy and Product Categories.

Set your ordering preferences (e.g. Term Name Ascending).

In the Loop Output section you want to output the term title (maybe as a link to the product category page, using [wpv-taxonomy-link]).

Now, underneath each product category name we want to list the matching products. To do that we need to add a nest view here. So let's create that now and then come back here to insert it.

So create a new view, called, say, "Products of a category" which will display products.

You need to add a Query Filter here to specify which products, so add a filter for the product category, and specify that product categories are set by the parent taxonomy view (i.e. the view where we will insert this view).

Then design your loop output section for how you want the products to be listed. You will want the title as a link and possibly additional fields to appear in this summary such as price etc., which you can insert using the Fields and Views buttons.

Save when done and go back to edit the Product Category Terms view.

Go to the loop output section and use the Fields and Views button to insert the "Products of a category" view beneath your taxonomy title.

That's mostly it.

You then need to insert the parent view somewhere. You could create a static page and add it to that page.

But if you want to replace the standard shop page with this view then you will need to make a custom WordPress archive for products and in the output section not output anything from the loop and insert your parent taxonomy view created above outside the loop tags.

So go into Toolset > WooCommerce Views and for Product Archive Template File specify WooCommerce Views plugin default product archive template.

We can now create a custom products archive, by visiting Toolset > WordPress Archives.

Your Loop Output section should look something like this:

[wpv-layout-start]
	[wpv-items-found]
	[wpv-view name="product-category-terms"]
	<!-- wpv-loop-start -->
		<wpv-loop>
		</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No products found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

[jesperh]

Hi Nigel

Sleeves rolled up - wearing a poloshirt so no problem 🙂

It working well and your help has been great. I have one last problem i want my product image, text,price and add to basket one the same line now its on 4 lines ?

How do i fix this problem ?

Jesper

[jesperh]

Code from loop output editor
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<ol class="wpv-loop js-wpv-loop">
<wpv-loop>

[wpv-post-featured-image size='shop_thumbnail']
<td><p style="font-size:18px">[wpv-post-title]
[wpv-woo-product-price] </p></td>
[wpv-woo-product-price] <p/></td>
<td>[wpv-woo-buy-or-select add_to_cart_text='Tilføj' link_to_product_text='' group_add_to_cart_text='' external_add_to_cart_text='' show_quantity_in_button='yes' show_variation_options='no']</td>

</wpv-loop>
</ol>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Jesper

I wonder if something went wrong when you pasted in your markup example in the previous reply, as what is in the items found section makes no sense.

Here it is, with some formatting:

[wpv-items-found]
<!-- wpv-loop-start -->
<ol class="wpv-loop js-wpv-loop">
<wpv-loop>
[wpv-post-featured-image size='shop_thumbnail']

<td>
	<p style="font-size:18px">[wpv-post-title][wpv-woo-product-price]</p>
</td>

[wpv-woo-product-price]<p/></td>

<td>[wpv-woo-buy-or-select add_to_cart_text='Tilføj' link_to_product_text='' group_add_to_cart_text='' external_add_to_cart_text='' show_quantity_in_button='yes' show_variation_options='no']</td>

</wpv-loop>
</ol>
<!-- wpv-loop-end -->
[/wpv-items-found]

Firstly, you are mixing an ordered list (the ol tag) with table cells (the td tags).

Secondly, where the product price is repeated you have closing p and td tags without corresponding opening tags.

How did you come up with this? Manually editing?

Did you try using the Loop Wizard to generate the required markup?

Can you just clarify what you want to appear on the page for each product listed, in what layout?

[jesperh]

Hi Nigel

This is the code from my loop out

[wpv-post-body view_template="Yogo Products Template"][wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<ol class="wpv-loop js-wpv-loop">
<wpv-loop>

[wpv-woo-product-image size='shop thumbnail']
[wpv-post-title]
[wpv-woo-product-price]
[wpv-woo-buy-or-select add_to_cart_text='' link_to_product_text='' group_add_to_cart_text='' external_add_to_cart_text='' show_quantity_in_button='yes' show_variation_options='no']

</wpv-loop>
</ol>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

I want the output on one line like this:
IMAGE DESCRIPTION PRICE ADD to cart

Jesper

[jesperh]

Hi
I still need some help with this, what do I need to change to have the setup as :
Image, description , price add to chart on one line in my view ?
Jesper

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Jesper

To keep those items on the same horizontal line there are a number of techniques you can use, the simplest of which is to probably make them an unordered list which you make display horizontally by floating the individual items left.

Your loop output should look like this:

<!-- wpv-loop-start -->
<wpv-loop>
	<ul class="product-list">
		<li>[wpv-woo-product-image size='shop_thumbnail']</li>
		<li>[wpv-post-title]</li>
		<li>[wpv-woo-product-price]</li>
		<li>[wpv-woo-buy-or-select add_to_cart_text='' link_to_product_text='' group_add_to_cart_text='' external_add_to_cart_text='' show_quantity_in_button='no' show_variation_options='no']</li>
	</ul>
</wpv-loop>
<!-- wpv-loop-end -->

And you will need to add the following to the custom CSS section. You will also want to add additional styles for margin or padding etc.

.product-list > li {
  float: left;
}

[jesperh]

Hi Nigel

Thank you for you input, it all working fine but i have one problem left.
I have quantity on my add to cart button - so i get two lines one with

image/description/price / quantity and one line with add to cart.

Do you have a fix for this ?

Jesper

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Jesper

I'm not sure what you mean. Could you show me a screenshot of how it looks, and copy and paste the loop output section here so I can see how you are generating it?

Thanks

[jesperh]

Hi Nigel

I need the "tilføj" button (Danish for add) at the same line as quantity.

Jesper