Archive Page Elements

These elements below can be used in all Archive pages regarding WooCommerce, so also in Category, Specific Category, Tag, Specific Tag. How to set pages here.

Archive Title

Archive Title is a dynamic text that you can use to inform users of the current page functionality, for example by default Archive Title on a category page will show

Category: my category

To create it add the following attribute on a text element:

wcarchive-title

Copy Archive Title

Archive Description

Archive description is a dynamic text that you can use to give a description of the current page.

To create it add the following attribute on a text element:

wcarchive-description

Copy Archive Description

Archive Image

Archive Image is a dynamic image that will change based on the current archive, you can add featured image either to Shop Page (from Pages section in WordPress) and Categories and Tags respectively from (Products > Categories and Products > Tags).

To create it add the following attribute on a Image element, or if you want to use it as background image to any other element (don't forget to add a placeholder image and stylize it, the archive image will follow that image style) :

wcarchive-image

Copy Archive Image

Archive Products

Archive Products is the list of the products of the current archive, you can enable pagination from the Webflow ⚙️ menu, pressing on paginate elements. However keep in mind that the number of products per page is not defined in Webflow but in WordPress, following the path: Appearance > Customize > WooCommerce > Product Catalog, here you can find 2 options Products per row and Rows per page and the limit is?! 🥁🥁🥁 Their product so, just multiply the 2 values to obtain your limit 🧮

To create an Archive products list add the following attribute on a Collection List Wrapper:

wcarchive-products

Copy Archive Products List

Inside Collection List Item you can add all of the elements that you find in the page:

if you want, you can just copy a sample card and paste it inside the Collection List Item

Copy Simple Product Card

Masonry Products

Masonry products is a way to connect several collection lists to a single query, in this case we can connect more than 1 collection list to the main query, that is the Archive query. Using several collection lists, allows you to style different posts of the same query with a different layout.

Create a div and add the attribute:

wcmasonry-products

Inside this div add any collection list wrapper you want (minimum 2), and on every collection list wrapper add the attribute:

limitnumber of posts in the collection

Copy Masonry Products

Inside Collection List Item you can add all of the elements that you find in the page:

if you want, you can just copy a sample card and paste it inside the Collection List Item

Copy Simple Product Card

OrderBy

To make your archive products sortable you can add the OrderBy element, you have to create a form and on the Form Block add the attribute:

wcorderby

Inside the form you must have only a Select.

Copy Orderby

Results Count

How many times did you see texts like: "You are viewing products 0-16 of 32 etc, etc"? This text is called Results Count by WooCoomerce, and you can add it for you archive pages as well adding the attribute on any text element:

wcresults-count

Copy Results Count

Breadcrumbs is a navigational aid that allows visitors to understand their current location in the context of your archive page. To create them, you have to use a list with the attribute:

wcbreadcrumbs

This list must have 3 item list inside that will have the following behaviour:

  1. It must be a link and is the link to the parent category / tag;

  2. Can be anything you want and it will be used as a separator;

  3. It must be a text and it is the name of current category / tag;

Copy Breadcrumbs

Archive Categories and Tags

Archive Categories and Tags is a list of the categories and tags of the current archive. You can decide from Udesly > Settings > WooCommerce > Categories, you have the option to decide what you want to show as categories:

  1. All Categories, this means all the categories of the shop;
  2. Only Childrens, this means all the sub categories of the current category. (In the main archive it will show all the categories);
  3. Only Direct Childrens, this means all the direct sub categories of the current category. (In the main archive it will show all the first level categories).

To create Categories List add a Collection List Wrapper with the attribute:

wccategories

Copy Shop Categories

To create instead a Tags List add a Collection List Wrapper with the attribute:

wctags

Copy Shop Tags

Inside the Collection List Item you can add the following elements:

Title

Is the title of the category or tag, you can add it to texts or links, using the attribute:

itemtitle

Copy Title

This is the link to the category or tag, you can add it to links, using the attribute:

itempermalink

Copy Permalink

Description

Is the description of the category/tag and can be added in WordPress following the path: Posts > Categories or Posts > Tags. You can add it to texts, using the attribute:

itemdescription

Copy Description

The featured image can be added to images or divs as background and can be added in WordPress following the path: Posts > Categories or Posts > Tags. You have just to use the attribute:

itemfeatured-image

Copy Featured Image