WooCommerce Single: Upsell (Pro)

Set the Upsell Products style in WooCommerce Single template. Make sure to set the Product Upsells in your Product pages > Linked Products > Upsells. This is where the Upsells widget gets the information from.

Content

Upsells

  1. Columns: Set how many columns will be displayed, from 1 to 12, for each device (Desktop, Tablet, Mobile)
  2. Order By: Set the order in which the upsells will be displayed. Options include Date, Title, Price, Popularity, Rating, Random, Menu Order
  3. 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.

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