Help Center

Common questions and support documentation

We're
by
All CollectionsUsing "The BUILD3R"WooCommerce Single: Product Related
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


Products


1. Columns Gap: Set the exact gap between the upsell products columns

2. Rows Gap: Set the exact gap between the upsell products rows

3. Alignment: Align the upsells 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 upsell 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 color of the upsell product title

2. Typography: Set the typography options for the upsell product title

3. Spacing: Adjust the amount of space after the upsell product 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 upsell product Price

2. Typography: Set the typography options for the upsell product Price

Regular price


1. Color: Choose the color of the upsell product's Regular Price

2. Typography: Set the typography options for the upsell 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 upsell product's Button Text

2. Background Color: Choose the background color of the upsell product's Button

3. Border Color: Choose the border color of the upsell product's Button

4. Typography: Set the typography options for the upsell product's Button Text

5. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved

6. Width: Control the thickness of the border around the upsell product's Button

7. Border Radius: Control corner roundness of the button's border

8. Text Padding: Set the padding within the button

9. 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


Heading: Show or Hide the upsell products heading

Box


1. Border Width: Control the thickness of the border around the upsell product's box

2. Border Radius: Control corner roundness of the upsell products box

3. Padding: Change the padding within the upsell 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 upsell products box

3. Border Color: Choose the border color of the upsell 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 upsell products box

9. Distance: Set the distance of the Sale Flash from the top of the upsell 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?