Archive Page

The Archive Page allows you to display products available on your website according to the settings you apply.

Set up a query and filters to narrow down a search, and then sort products by price, popularity, or rating.

You can add accordions to display or hide content.

We can build a simple Archive Page for WooCommerce as follows:

Products Page

You need to have previously set up a Products page in the Dashboard.

Create a Product Catalog Template

Open the Themer in the Cwicly tab of the Dashboard.
In the Templates tab, select Product Catalog template.

You can choose to keep the WooCommerce defaults.
Alternately, with Cwicly, we will be building our own, so we will remove them.

The template should now look like this.

Activate the Quick Inserter. This will facilitate adding blocks.

pageQuick Inserter

Section

Add a section.

In the Primary tab, open the Layout tab and set a Column direction .

Div

With the Section selected, add a Div.

Rename it Titles Div as it will contain the Brand name and the Archive title.

In the Primary tab, open the Layout tab and set a Column direction.

In the Margin and Padding tab, set a 50px bottom Margin.

Brand Heading

With the Titles Div selected, add a Heading.

Rename it Brand Name.

With the Brand name heading selected, input required text.
Style text as required.

Title Heading

With the Titles div selected, add a Heading.

Rename to Title heading.
Input required title.

Style as required (Primary tab, Typography tab).

Query

With the Section selected, add a Query.
Click "+ Add Query Template" to add a Query Template.

Query Template

In the Layout tab of the Primary tab:
Set a Row Gap of 50px.
Set a Column Gap of 50px.

In the Spacing tab of the Margin and Padding tab, set a bottom margin of 90px.

Frontend Rendering

Let's set up the Query Block before adding blocks to the Query Template.
With the Query selected, in the Primary tab and Settings tab, in the Settings tab:
Toggle off "Inherit Query from URL".
Toggle on "Frontend Rendering".

In the Primary tab, open the Query Editor.

Query Editor

In the Posts dropdown, select "Products".

Product

Product allows you to set the parameters for the product catalogue.

Find Product.
Click Dynamic icon to Activate.
Set Source to Wordpress.
Set Wordpress to URL parameter.
Input category as Key.

Pagination

Pagination allows you to see which page you are on and navigate between pages.

Find Pagination.
Set Number of Items per page to 6.

Click Dynamic icon to Activate.
Set Source to WordPress.
Set Wordpress to URL Parameter.
Set Key to pager.

Taxonomy Query

Open Taxonomy Query and click the "+" icon to

Click "Taxonomy Query #1 to add a Taxonomy Query.

Rename as Taxonomy Query Size.
Input "product size" in Taxonomy search field and select "Product Size - (product) in dropdown.

Click dynamic to enable dynamic data.
Set Source to WordPress.
Set WordPress to URL Parameter.
Set Key to Size.

Find Field window and select "slug".

Click Return icon to go back.

Click "+" icon to add another Taxonomy Query.

Click Taxonomy Query #2 to open modem.

Rename as Taxonomy Query Colour.
Input "product color" in Taxonomy search field and select "Product Color- (product) in dropdown.

Click dynamic icon to enable dynamic data.
Set Source to WordPress.
Set WordPress to URL Parameter.
Set Key to color.

Set Field to Slug.

Click Return icon to go back to Editor.

Click "+" icon to add another Taxonomy Query.

Open Taxonomy Query #3.

Rename as Taxonomy Query Brand.
Input product brand in Taxonomy search window and select Product Brand (product) in dropdown.

Set Source to WordPress.
Set WordPress to URL Parameter.
Set Key to Brand.

Select Slug in Field dropdown.

Meta Query

Click Meta Query to open window.

Click Meta Query #1 to add a Meta Query.

Rename as Meta Query Price
Set Meta Key to _price

Find Meta Value and enable dynamic data.
Set Source to WordPress
Set WordPress to URL Parameter.
Set Key to price.

Find Meta Compare.
Input "BETWEEN".

Find Meta Types.
Select "NUMERIC" in the dropdown.

Query Template

Now we need to set up the Query Template.

With the Query Template selected, add a Div that will contain the archive content.
Save and Refresh to view the Query display.

Let's rename it "Content Div".

Set Flex display and Column direction (Primary tab, Layout tab).

With the Content Div selected, add a Div that will contain the Images and Icon.

Rename it "Image & Icon" Div.

Set Flex display and Column direction (Primary tab, Layout tab).

To space the Div from the following elements, let's add a bottom margin (Primary tab, Margin and Padding tab).

With the Image & Icon Div selected, add an Image.

Rename it "Product Image".

In the Primary tab, open the Source tab and click the icon to select dynamic data.
Set Data to WordPress in the dropdown.

Set WordPress to Featured Image.

In the Size tab of the Primary tab, set a Height of 330px and Width of 100%.

You can see that the Images are deformed, so we need to set Object Fit to Cover.

Find Object Fit.
Set Cover in dropdown.

To soften the look, set an equal 5px Radius (Design tab, Borders tab, Radius and Width tab).

We need to add a Favourites Icon.

With the Image and Icon Div selected, add an icon.

Rename it Favourite Icon.

To select a heart shaped icon, open the Primary tab.
In the Icon tab, open the Icon panel.

Select required heart icon.

Set required size.

The Favourite icon is not very visible so let's move it to a more useful place.

In the Design tab, open the Layout tab and the Position tab.
Set an absolute position, 10px from the top and 10px from the right.

The Favourite icon needs to be placed relatively to the Content Div.

Select the Content Div and open the Design tab, the Layout tab and the Position tab.
Set position to "relative".

In the background tab and the Colours tab, open the Colour Picker.

Choose a white background to improve icon visibility.

Let's set a pleasant hover effect.

Enter hover mode.

Set a suitable hover background colour.

In the Background tab, Colours tab, set required hover background.
Return to normal mode.

Now let's style the icon.

In the Borders tab and the Radius and Width tab, set an equal 100% radius.

The icon looks squeezed.

In the Margin and Padding tab and Spacing tab, set an equal 10px padding.

Now let's add a transition to the hover effect for a smoother look.

In the Effects tab and the Transitions tab, click the "+" icon to add a transition.

Set a Duration of 0.6.

Select the Content Div and add a Div to contain the product details.

Rename it Products Details Div.

In the Primary tab and the Layout tab, set Flex display and Row direction.
Set Align centre and Justify space-between.

In the Margin and Padding tab, set a 2px bottom margin to space from the following element.

With the Product Details Div selected, add a paragraph to contain the title.

Rename it Product Title.

Open Dynamic Content dropdown and select WordPress as source.

Set WordPress to Post Title.

Let's add some style to the Product Title.

Open the Typography tab and set a suitable Size and Weight and Capitalize.

With the Product Details Div selected, add a Button.

Rename it Buy Now Button.

Input "Buy Now" or suitable message.
Add a suitable text colour.

Adjust font size as required.

Now we need to set up the link for the Buy Now Button.

Click link icon to open the Link modal.
Set Type to URL.
Set Source to Dynamic.
Select or input target URL.

Select the Content Div and add a Paragraph to contain the Price.

Rename it " Product Price".

Click Dynamic Values to open the Dynamic Content modal.
Set Source to WooCommerce.

Set WooCommerce to Price.

Set Type to "Formatted Tax Currency".

Select an appropriate text colour (Primary tab, Colours tab).

In the Typography tab, select an appropriate font size and weight.

Pagination

Now let's set up the Pagination to separate digital content into different pages, so your visitors can navigate between different pages by clicking links, usually in the form of numbers at the bottom of each page.

Select the Query block and add a Query Pagination block.

Click "+Dismiss" as we want to add a Previous and Next button as well as Pagination Numbers.

Now let's set up the layout.

With the Query Pagination block selected, in the Primary tab, open the Layout tab and set a Flex Display, Row direction Align centre and Justify space-between.