Archive Page
Last updated
Last updated
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:
You need to have previously set up a Products page in the Dashboard.
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.
Add a section.
In the Primary tab, open the Layout tab and set a Column direction .
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.
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.
With the Titles div selected, add a Heading.
Rename to Title heading.
Input required title.
Style as required (Primary tab, Typography tab).
With the Section selected, add a Query.
Click "+ Add Query Template" to add a 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.
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.
In the Posts dropdown, select "Products".
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 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.
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.
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.
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.
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.
Add a button which will be used to navigate to the previous page.
Rename it "Previous Button" and Input "Prev".
Let's add some styling. On hover, let's change the text colour.
Change to Hover mode.
In the Primary tab, open the Colours tab and choose a suitable text colour.
Return to Normal mode.
Let's add a transition to give a smooth effect.
Set a duration of 0.4.
Set an appropriate size (Typography tab).
Let's set up the "Previous" arrow.
Open the Icon tab and toggle Active on.
Choose an appropriate "previous" icon.
Choose a suitable Size and Spacing.
In the Layout tab, set a Flex Display, Row direction and Align centre.
Let's link the "Previous" button to the previous query or page.
With the Pagination Button selected, open the Link modal.
Set Type to Action.
Set Action to Previous Query.
Now let's add the Query Pagination Numbers block.
The Query Pagination Numbers block is automatically linked to the Query, so no need to attach it.
With the Query Pagination block selected, add a Query Pagination Numbers block.
To space the numbers, in the Margin and Padding tab, add a 10px right and left margin.
Let's add a colour to the pagination numbers.
In the Typography tab, set a suitable text colour and size.
Now let's add a "Next" button to allow your user to navigate to the following page.
To speed things up, let's copy the styles of the "Previous Button block.
In the navigator, select the Previous Button block using keyboard shortcuts.
Select the Query Pagination block and paste in the copied block.
Rename it "Next Button".
Change text to "Next".
In the Primary tab, open the Icon tab.
Open the icon selector and choose a suitable forward arrow.
Change Position to "After" in the dropdown.
Open the Link modal.
Change Action from Previous Query to Next Query.
Save and check it out on the Front End.
To view on the front end, go to Pages in the WordPress Dashboard.
Find your Shop page.
Click View.
