Logo
Logo

Cart Cross Sells

The Cart Cross Sells Element in Breakdance allows you to showcase additional products that complement items in a customer’s cart, encouraging them to add more items before checking out. This element is highly customizable, letting you control the display, layout, and styling to fit seamlessly with your site’s design.

The following WooCommerce article discusses how to set up Cross Sell products in WooCommerce.

Design Controls

Cross Sells

These controls customize the appearance and behavior of the cross-sell product suggestions within the cart.

  • Title – Customize the title section of the cross-sells.
  • Space After Title – Set the spacing after the title.
  • Layout – Define the layout of the cross-sells.
    • Layout – Choose the layout style.
    • Slider – Configure the slider layout. (This control is only available when Layout is set to slider)
      • Slider Settings – Adjust settings for the slider layout. More information about these settings may be found in the Basic Slider document.
    • 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)
  • Elements – These controls manage the individual elements within the cross-sells, including images, titles, prices, ratings, 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.
      • 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.
  • 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.

Spacing

These controls manage the spacing around the cross-sell products, including margins.

  • Margin Top – Set the top margin of the container.
  • Margin Bottom – Set the bottom margin of the container.