Show product categories on Shop page « Support Forum | Kriesi.at

Support Forum » Abundance

Show product categories on Shop page

4 posts from 2 voices

Started 4 months ago by colaja
Latest reply from Ismael
This topic is not a support question

Tags:

colaja
Member

Is there a way to display Product categories on Shop page instead of the traditional "shop" page that displays all the products?
Can you help me with this?

Posted 4 months ago #
Ismael
Moderator

Hi colaja,

Kindly go to Appearance > Widgets and look for Woocommerce Product Categories and drag it to Shop Overview Page (left) or Shop Overview Page (right). This depends where your sidebar is located or you can drag it on both.

Hope this helps. :)

Regards,
Ismael

Posted 4 months ago #
colaja
Member

Actually no. For the sidebar it's ok, but I don't need it in the sidebar.

Here's the thing, take a look at abundance demo:
http://www.kriesi.at/themes/abundance/shop/

This is the first "shop" page, right? And you have all products there.

Instead of products I want to have just product categories, not listed all products, just images for the product categories. I can set images for the categories, but I don't have an idea how show them on that page.

Any help?

Posted 4 months ago #

Ismael
Moderator

Hi,

You can create a new page then name it "Category Shop Page" for example. Paste this code on the editor, this has a 3 column image container.

<div class='template-shop content'>

	<ul class="products">

		<li class="product first">

			<div class='thumbnail_container'>

				<div class='thumbnail_container_inner'>

				<a href="http://www.kriesi.at/themes/abundance/shop/CATEGORY-1"><img width="300" height="300" src="http://www.kriesi.at/themes/abundance/files/2011/11/CATEGORY-1.jpg" class="attachment-shop_catalog wp-post-image" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." /></a>

				</div>

			</div>

			<a href="http://www.kriesi.at/themes/abundance/shop/CATEGORY-1">

			<h3>CATEGORY 1</h3>

			</a>

		</li>

		<li class="product ">

			<div class='thumbnail_container'>

				<div class='thumbnail_container_inner'>

				<a href="http://www.kriesi.at/themes/abundance/shop/CATEGORY-2"><img width="300" height="300" src="http://www.kriesi.at/themes/abundance/files/2011/11/CATEGORY-1.jpg" class="attachment-shop_catalog wp-post-image" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." /></a>

				</div>

			</div>

			<a href="http://www.kriesi.at/themes/abundance/shop/CATEGORY-2">

			<h3>CATEGORY 2</h3>

			</a>

		</li>

		<li class="product last">

			<div class='thumbnail_container'>

				<div class='thumbnail_container_inner'>

				<a href="http://www.kriesi.at/themes/abundance/shop/CATEGORY-3"><img width="300" height="300" src="http://www.kriesi.at/themes/abundance/files/2011/11/CATEGORY-1.jpg" class="attachment-shop_catalog wp-post-image" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." /></a>

				</div>

			</div>

			<a href="http://www.kriesi.at/themes/abundance/shop/CATEGORY-3">

			<h3>CATEGORY 3</h3>

			</a>

		</li>

	</div>

You need to change this http://www.kriesi.at/themes/abundance/shop/CATEGORY-1 with your category url. You also need to supply the image for each of the category product. Just change this image link http://www.kriesi.at/themes/abundance/files/2011/11/CATEGORY-1.jpg with your image link
Now go to appearance > menu then replace the existing "Shop" menu with a new custom link directing to the newly created "Category Shop Page".