WooCommerce Archive Products Element

The Archive Products Element will provide adding the products to your page to style and design the layout of the archive. The Archive Product Element is a dynamic element that will generate the title dynamically onto the page. 

Content Tab 

Layout

1. Columns - Set the number of columns to be displayed from 1 to 6
2. Posts per Page - Set the number of products you want to be displayed on a page 
3. Carousel - Set your archive posts in a carousel display 
4. Layout - Set the layout for your products archive to either be Grid, Masonry, or Metro 
5. Image Size - Set the image size from thumbnail to full 
6. Image Ratio - Set the ration for your product's archive image 
7. Title - Choose to either show or hide the title of the products 
8. HTML Tag - Set the HTML Tag for the title from H1 to H6 
9. Ratings - Choose to either show or hide the ratings of the products archive 
10. Price - Choose to either show or hide the price of the products 
11. Add To Cart - Choose to display the add to cart button by switching the handle on
12. Text - Type here the text for the add to cart button 
13. Icon - Select to show an icon for the add to cart button 
14. Icon Positioning - Set the position of the add to cart button 
15. Icon Spacing - Set the spacing between the icon and the add to cart text  

Pagination

1. Allow Order - This option will let you add order to your products, you can have your users order your product archive either by default, popularity, average rating, latest and more. 
2. Results Count - Choose to either show or hide the results count for your archive products 

Style Tab

Layout  

1. Columns Gap - Set the gap between the columns 
2. Row Gap - Set the gap between the rows 
3. Initial Animation - Set an entrance animation for your archive products 
4. Alignment - Set the alignment of your products archive to either be Left, Center or Right 

Box

1. Border Width - Set the border width for the products' box
2. Border Radius - Set the border radius for the archive products' box
3. Padding - Set the padding within the archive products' box
4. Box Shadow - Choose to add a shadow around the archive products' box 
5. Background Color - Choose to add a background color for the archive products' box
6. Border Color - Select the border color of the archive products' box 

Image

1. Spacing - Add spacing between the image and the content 
2. CSS Filters - Add filters to the products' image 

Content 

Title

1. Color - Set the color of the products' title 
2. Typography - Tweak the typography options for the title 
3. Spacing - Set the spacing between the title and the content 

Price

1. Color - Set the color for the price 
2. Typography - Tweak the typography options for the price 
3. Alignment - Align the position for the price to either be Left or Right 
4. Spacing - Set the spacing between the price and the add to cart button 

Star Rating

1. Color - Set the color for the star ratings 
2. Typography - Tweak the typography options for the star rating 
3. Alignment - Align the position for the star rating to either be Left or Right 
4. Spacing - Set the spacing between the star rating and the price 
5. Border Type - Choose to add a border for the ratings 
6. Border Radius - Make the border rounder by adjusting the border-radius 
7. Padding - Set the padding for the star rating 

Sale Flash

1. Sale Flash - Choose to add a sale flash for the products when they are on sale 
2. Text Color - Set the color for the sales flash text 
3. Background Color - Set the color for the sales flash background 
4. Typography - Tweak the typography options for the sales flash text 
5. Border Radius - Set a border-radius to make the sales flash edges rounder 
6. Width - Set the width for the sales flash 
7. Height - Set the height for the sales flash 
8. Position - Position the sales flash either Left or Right 
9. Distance - Set the distance between the sales flash and the product's image 

Add To Cart 

1. Text Color - Set the color for the add to cart text 
2. Background Color - Set the color for the add to cart background 
3. Typography - Tweak the typography options for the add to cart text
4. Border Type - Choose to add a border for the add to cart button 
5. Border Radius - Set a border-radius to make the add to cart button edges rounder 
6. Box Shadow - Set a shadow for the add to cart button 
7. Padding - Add padding values around the add to cart button 
8. Horizontal Position - Set the horizontal position for the add to cart button either Left, Center, Right, or Justified 
9. Vertical Position - Set the vertical position for the add to cart button either Top, Center, or Bottom