WooCommerce Single: Product Related (Pro)

Insert and set the style for Related Products in WooCommerce Single template

Content

Related Products

  1. Products Per Page: Set the exact amount of related products to be displayed
  2. Columns: Set how many columns will be displayed, from 1 to 12, for each device (Desktop, Tablet, Mobile)
  3. Order By: Set the order in which the products will be displayed. Options include Date, Title, Price, Popularity, Rating, Random, Menu Order
  4. Order: Select ASC or DESC (ascending or descending) order

Style

  1. Columns Gap: Set the exact gap between the columns
  2. Rows Gap: Set the exact gap between the rows
  3. Alignment: Align the related products data to the left, right, or center

Image

  1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  2. Width: Control the thickness of the border around the related product images
  3. Color: Choose the border color
  4. Border Radius: Set the radius to control corner roundness of the border
  5. Spacing: Adjust the amount of space between the images and their data

Title

  1. Color: Choose the related product Title color
  2. Typography: Set the typography options for the Title text
  3. Spacing: Adjust the amount of space after the Title

Rating

  1. Star Color: Choose the color of a filled star
  2. Empty Star Color: Choose the color of an empty star
  3. Star Size: Set the size of stars
  4. Spacing: Adjust the amount of space after the Rating Stars

Price

  1. Color: Choose the color of the related product Price
  2. Typography: Set the typography options for the related product Price

Regular price

  1. Color: Choose the color of the related product’s Regular Price
  2. Typography: Set the typography options for the related product’s Regular Price

Button

Normal | Hover

The following options can be set independently for both the normal and hover states.

  1. Text Color: Choose the color of the related product’s Button Text
  2. Background Color: Choose the background color of the related product’s Button
  3. Border Color: Choose the border color of the related product’s Button
  1. Typography: Set the typography options for the related product’s Button Text
  2. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  3. Width: Control the thickness of the border around the related product’s Button
  4. Border Radius: Control corner roundness of the button’s border
  5. Text Padding: Set the padding within the button
  6. Spacing: Adjust the amount of space above the buttons

View Cart

  1. Color: Choose the color of the View Cart text under the buttons
  2. Typography: Set the typography options for the View Cart text

Heading

  1. Heading: Show or Hide the Related Products heading
  2. Color: Choose the color of the related products heading text
  3. Typography: Set the typography options for the heading text
  4. Text Align: Align the related products Heading to the left, right, or center
  5. Spacing: Adjust the amount of space after the Heading

Box

  1. Border Width: Control the thickness of the border around the related product’s box
  2. Border Radius: Control corner roundness of the related products box
  3. Padding: Change the padding within the related products box

Normal | Hover

The following options can be set independently for both the normal and hover states.

  1. Box Shadow: Adjust box shadow options
  2. Background Color: Choose the background color of the related products box
  3. Border Color: Choose the border color of the related products box

Sale Flash

  1. Sale Flash: Show or Hide
  2. Text Color: Choose the color of the Sale Flash text
  3. Background Color: Choose the background color of the Sale Flash
  4. Typography: Set the typography options for the Sale Flash text
  5. Border Radius: Control the corner roundness of the Sale Flash
  6. Width: Control the thickness of the border for the Sale Flash
  7. Height: Set the height of the Sale Flash
  8. Position: Set the position of the Sale Flash, Left or Right, of the related products box
  9. Distance: Set the distance of the Sale Flash from the top of the related products box

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

Share it on social networks

Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page