Logo
Logo

Upsell Products

The Upsell Products Element in Breakdance allows you to display related products to encourage additional purchases. This element provides extensive customization options to ensure the upsell products align perfectly with your site’s design and functionality.

Please see the following article for more information on how to set up Upsell Products in WooCommerce.

Content Controls

Content

These controls manage which products are displayed and how they are sorted.

  • Product – Choose the products to display.
  • Product Count – Set the number of products to display.
  • Order By – Select how to sort the products.
  • Order – Choose the sorting order (ascending or descending).

Design Controls

Container

These controls adjust the overall appearance of the container holding the products, including size, background, borders, and padding.

  • Size – Adjust the container size.
  • Background – Set the background color of the container.
  • Borders – Customize the borders of the container.
  • Padding – Adjust the padding inside the container.

Elements

These controls customize individual elements within the upsells, such as images, titles, prices, and badges.

  • Image
    • Include – Choose whether to include an image.
    • Space Before – Set the space before the image.
    • Space After – Set the space after the image.
    • Order – Determine the display order of the image.
    • Borders – Customize the image borders.
  • Title
    • Include – Choose whether to include a title.
    • Space After – Set the space after the title.
    • Order – Determine the display order of the title.
    • Typography – Customize the typography of the title.
  • Price
    • Include – Choose whether to include a price.
    • Space After – Set the space after the price.
    • Order – Determine the display order of the price.
    • Old Price Typography – Customize the typography of the old price.
    • Current Price Typography – Customize the typography of the current price.
  • Rating
    • Include – Choose whether to include a rating.
    • Space After – Set the space after the rating.
    • Order – Determine the display order of the rating.
    • Review Count – Toggle the display of the review count.
    • Count Typography – Customize the typography of the review count.
  • Sale Badge
    • Include – Choose whether to include a sale badge.
    • Position – Set the position of the sale badge.
    • Background – Set the background color of the sale badge.
    • Typography – Customize the typography of the sale badge.
    • Borders – Customize the borders of the sale badge.
    • Padding – Adjust the padding inside the sale badge.
    • Nudge – Fine-tune the position of the sale badge.
      • X – Adjust the horizontal position of the sale badge.
      • Y – Adjust the vertical position of the sale badge.
  • Excerpt
    • Include – Choose whether to include an excerpt.
    • Space After – Set the space after the excerpt.
    • Order – Determine the display order of the excerpt.
    • Typography – Customize the typography of the excerpt.
  • Categories
    • Include – Choose whether to include categories.
    • Space After – Set the space after the categories.
    • Order – Determine the display order of the categories.
    • Typography – Customize the typography of the categories.
  • Quantity Input
    • Include – Choose whether to include a quantity input.
    • Space After – Set the space after the quantity input.
  • Button
    • Include – Choose whether to include a button. (This control is only available when Include is enabled)
    • Space After – Set the space after the button.
    • Styles – Customize the styles of the button. For more information on styling buttons, please see the Button element.
  • Custom Areas
    • Areas – Add custom areas to the product display.
      • Global Block – Choose a global block to display.
      • Position – Set the position of the custom area.
      • Space Before – Set the space before the custom area.
      • Space After – Set the space after the custom area.
      • Order – Determine the display order of the custom area.

Layout

These controls manage the layout of the upsell products, including slider settings and pagination.

  • Layout – Choose the layout style for the upsell products.
  • Slider – Configure slider settings. (This control is only available when Layout is set to slider)
    • Slider Settings – Information regarding Slider settings may be found in the Basic Slider element.
  • Products Per Row – Set the number of products per row. (This control is only available when Layout is not slider)
  • Between Products – Set the space between products. (This control is only available when Layout is not slider)

Product Wrapper

These controls manage the styling of the product wrapper, including alignment, background, borders, and padding.

  • Align Content – Set the alignment of the content within the product wrapper.
  • Background – Set the background color of the product wrapper.
  • Borders – Customize the borders of the product wrapper.
  • Padding – Adjust the padding inside the product wrapper.

Title

These controls manage the display and styling of the product title.

  • Disable – Toggle the visibility of the title.
  • Typography – Customize the title’s typography.

Spacing

These controls manage the spacing around the upsell products, including margins and spacing below the title.

  • Below Title – Set the space below the title.
  • Container – Adjust the margins of the container.
    • Margin Top – Set the top margin of the container.
    • Margin Bottom – Set the bottom margin of the container.

Advanced

These controls provide customization options to override Global WooCommerce Styles for the Upsell Products section.