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.

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