Products Element

The Products Element will allow you to extract and display all your products and present a stunning and captivating showcase of them. You can style and design the element to match your site's brand and personality. 

Content Tab 

Layout

  1. Columns - Choose how many products you want displaying 
  2. Post per Page - Select the number of products you want showing per page 
  3. Carousel - Choose to display your products in a carousel slideshow 
  4. Layout - Set the layout that you want your products displayed to either be Grid, Masonry, or Metro 
  5. Image Size - Set the image size of the products 
  6. Image Ratio - Set the exact image ratio of the products
  7. Title - Choose to either show or hide the title for the products
  8. HMTL Tag - Set the HTML tag for the product's title from H1 to H6 
  9. Rating - Choose to either display or not display the ratings
  10. Price Switch - Switch the handle on to show the Add to Cart button when users hover over the price 
  11. Add to Cart - Switch the handle on to show the Add to Cart on hover 
  12. Text - Set the text for the Add to Cart 
  13. Icon - Choose to have an icon for the Add to Cart 

Query 

  1. Source - Select the source you want your product's page to generate the content from. You can choose to either show content from Posts, Pages, Portfolio, Portfolio Gallery, Maula Selection, or Related Posts.

Include

  1. Include By - You can Include or Exclude products either by Term or Author. If you choose Author, you can choose which author you want to be displayed, or if you choose a Term, you can decide on category or other taxonomy.
  2. Date - Select the products from All, Past Day, Past Week, Past Month, Past Year, or Custom. If you choose Custom you can set a date for Before and After. 
  3. Order By - You can order your products either by Date, Title, Menu Order, or Random. 
  4. Order - You can also have your products to be ordered either Ascending or Descending. 
  5. Ignore Sticky Posts - Choose to either ignore or not the sticky posts. Note that they only work if zero terms have been selected. 

Exclude

  1. Exclude By - You can exclude products either by Current Post, Manual Selection, Term, or Author. 
  2. Offset - Use this setting to skip on certain products 
  3. Date - Select products from All, Past Day, Past Week, Past Month, Past Year, or Custom. If you choose Custom you can set a date for Before and After. 
  4. Order By - You can order your products either by Date, Title, Menu Order, or Random. 
  5. Order - You can also have your products to be ordered either Ascending or Descending. 
  6. Ignore Sticky Posts - Choose to either ignore or not the sticky posts. Note that they only work if zero terms have been selected. 

Pagination

  1. Allow Order - Switch the handle ON to have your users select and categorize products either by default, popularity, average ratings, newness, low to high, or high to low. 
  2. Allow Count - Switch the handle ON to allow users to see the number of results they are being presented with 
  3. Pagination - Choose to add pagination for your products to either be Numbers, Show More, Previous/Next, and Numbers + Previous/Next 

If you choose Numbers 

  1. Page Limit - Set the page limit in value to only show a certain amount of posts on the page
  2. Shorten - Choose to shorten the pagination row. It will show only the number of the first pages and the last one. 
  3. Alignment - Set the Alignment of the pagination either Left, Center, or Right 
  4. Spacing - Set the spacing between the posts and the pagination 

If you choose Show More

  1. Show More Text - Type in your custom text to replace Show More or leave it as it is
  2. Alignment - Set the Alignment of the pagination either Left, Center, or Right 
  3. Spacing - Set the spacing between the posts and the pagination 

If you choose Previous/Next

  1. Previous Label - Type in your custom Previous label 
  2. Next Label - Type in your custom Next label 
  3. Alignment - Set the Alignment of the pagination either Left, Center, or Right 
  4. Spacing - Set the spacing between the posts and the pagination 

If you choose Numbers + Previous/Next 

  1. Page Limit - Set the page limit in value to only show a certain amount of posts on the page
  2. Shorten - Choose to shorten the pagination row. It will show only the number of the first pages and the last one. 
  3. Previous Label - Type in your custom Previous label 
  4. Next Label - Type in your custom Next label 
  5. Alignment - Set the Alignment of the pagination either Left, Center, or Right 
  6. Spacing - Set the spacing between the posts and the pagination 

Filters 

  1. Filters - Choose to either show or hide the filters. 
  2. Taxonomy - Choose the taxonomy for your filters either Categories, Tags, Portfolio Categories, or Portfolio Tags
  3. Filter All - Choose to either show or hide the filter all taxonomy 
  4. String - If you choose to show the All categories, you can customize the text.

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 products
  4. Alignment - Set the alignment of your products 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 products' box
  3. Padding - Set the padding within the products' box
  4. Box Shadow - Choose to add a shadow around the products' box 
  5. Background Color - Choose to add a background color for the products' box
  6. Content Background Color - Set a background color for the content of your products 
  7. Border Color - Select the border color of the products' box

Image

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

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 of the price
  2. Typography - Tweak the typography options for the price
  3. Alignment - Align the price of your products to either be Left or Right
  4. Spacing - Set the spacing between the title and the content 

Star Rating

  1. Color - Set the color of the star ratings 
  2. Size - Set the size of the star ratings 
  3. Spacing - Set the spacing between the star ratings and the price
  4. Border Type - Choose to have a border for the products 
  5. Border Radius - Set the border-radius to make the edges rounder 
  6. Padding - Set the padding values for the products' border 

Pagination

Choose Normal, Hover or Active state 

  1. Typography - Tweak the typography options for the pagination text 
  2. Pointer - Choose to have a pointer under the pagination
  3. Text Color - Set a text color for the pagination
  4. Background Color - Set the background color of the pagination 
  5. Label Color - Set the color for the label 
  6. Border Radius - Set the border-radius for the pagination 
  7. Space Between - Set the space between the pagination 
  8. Padding - Add padding width to the pagination 

Sale Flash

  1. Sale Flash - Switch the handle ON to show the sale flash 
  2. Text Color - Set the color for the sale flash 
  3. Background Color - Set the background color for the sale flash 
  4. Typography - Set the typography options for the sale flash 
  5. Border Radius - Choose to add radius border for the sale flash 
  6. Width - Set the width for the sale flash 
  7. Height - Set the height value for the sale flash 
  8. Position - Set a position for the sale flash either Left or Right 
  9. Distance - Set the distance between the sea flash and the product 

Add to Cart

  1. Text Color - Set the color for the Add to Cart Text 
  2. Loading Color - Set the color for the loading icon 
  3. Background Color - Set the background color for Add to Cart 
  4. Typography - Tweak the typography options for the Add to Cart Text
  5. Border Type - Choose to have a border for the Add to Cart 
  6. Border Radius - Set the border-radius for the Add to Cart 
  7. Box Shadow - Choose to display shadow for the Add to Cart box 
  8. Padding - Add padding width to the Add to Cart border 
  9. Position - Choose to have your Add to Cart either Inside or Outside the product 
  10. Horizontal Position - Choose a position or the Add to Cart either Left, Center, Right, or Justified 
  11. Vertical Position - Choose a vertical position for the Add to Cart either Top, Center, or Bottom 


Advanced Tab that is appropriate for the element. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.