WooCommerce Single - Product Related (Pro)

Insert and set style for related products in WooCommerce unique template

Content

related products

1. Products by page: Sets the exact number of related products to be displayed
2. Columns: Set how many columns to display, from 1 to 12, for each device (desktop, tablet, mobile)
3. Sort by: Sets the order in which the products will be displayed. Options include Date, Title, Price, Popularity, Rating, Random, Menu Order
4. Order: Select the ASC or DESC order (ascending or descending)

Style

1. Column spacing: Sets the exact space between the columns
2. Row spacing: Sets the exact space between the rows
3. Alignment: Aligns related product data to the left, right, or center

Image

1. Border type: Select the type of edge, choosing from none, solid, double, dotted, dashed or grooved
2. Width: Control border thickness around related product images
3. Colour: Choose the border color
4. Edge radius: Sets the radius to control the roundness of the edge corners
5. Spacing: Adjusts the amount of space between images and their data

Title

1. Colour: Choose the title color of the related product
2. Typography: Sets the typography options for the title text
3. Spacing: Adjusts the amount of space after the title

Classification

1. Star color: Choose the color of a full star
2. Empty star color: Choose the color of an empty star
3. Star size: Sets the size of the stars
4. Spacing: Adjusts the amount of space after the rating stars

Price

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

Regular price

1. Colour: Choose the color from the regular price of the related product
2. Typography: Sets the font options for the regular price of the related product

Button

Normal | Float up

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

1. Text color: Choose the text color of the related product button
2. Background color: Choose the background color of the related product button
3. Border color: Choose the border color of the related product button

1. Typography: Sets the typography options for the related product button text
2. Border type: Select the type of edge, choosing from none, solid, double, dotted, dashed or grooved
3. Width: Controls the thickness of the border around the related product button
4. Edge radius: Controls the roundness of the button border corner
5. Text fill: Sets the padding inside the button
6. Spacing: Adjusts the amount of space above the buttons

See small car

1. Colour: Choose the color of the text See cart below the buttons
2. Typography: Sets the typography options for the text View cart

Vault

1. Vault: Show or hide the Related Products heading
2. Colour: Choose the header text color for related products
3. Typography: Sets the font options for the header text
4. Aligned text: Align related products left, right, or center
5. Spacing: Adjusts the amount of space after the header

Box

1. Border width: Controls the thickness of the border around the related product box
2. Edge radius: Check the roundness of the corners of the related product box
3. Filling: Change the padding within the related products box

Normal | Float up

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

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

Flash sale

1. Flash sale: Show or Hide
2. Text color: Choose the color of the Flash sale text
3. Background color: Choose the background color of the Sales Flash
4. Typography: Sets the font options for the Flash Sale text
5. Edge radius: Controls the roundness of the Vending Flash corners
6. Width: Control the border thickness for the Sales Flash
7. Height: Sets the height of the Sales Flash
8. Position: Sets the position of the sales flash, left or right, of the related products box
9. Distance: Set the Sales Flash distance from the top of the Related Products box

Note: The style of this widget is usually affected by the theme and plugins. If you experience any of these issues, try switching to a basic theme and disabling related plugins, or adjust the style within your theme settings.