Product Related Element

The Product-Related element will display all the other products related based on a query. 

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 related products in a carousel display 
  4. Layout - Set the layout for your products related 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 related 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 rating 
  10. Price - Choose to either show or hide the price of the products 
  11. Price Switch - Switch this option on to switch the price to an add to cart button when the user hovers over the price 
  12. Add To Cart - Choose to display the add to cart button by switching the handle on
  13. Text - Type here the text for the add to cart button 
  14. Icon - Select to show an icon for the add to cart button 
  15. Icon Positioning - Set the position of the add to cart button 
  16. Icon Spacing - Set the spacing between the icon and the add to cart 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 related  
  4. Alignment - Set the alignment of your products related 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 related products' box
  3. Padding - Set the padding within the related products' box
  4. Box Shadow - Choose to add a shadow around the related products' box 
  5. Background Color - Choose to add a background color for the related products' box
  6. Border Color - Select the border color of the related 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. Size - Set the color for the star ratings 
  3. Spacing - Set the spacing between the star rating and the price 
  4. Border Type - Choose to add a border for the ratings 
  5. Border Radius - Make the border rounder by adjusting the border-radius 
  6. 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 - Set the vertical position for the add to cart button either Top, Center, or Bottom


Set the settings for the 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.