The Related Products element is designed to display products related to the currently viewed product on a WooCommerce site. It helps to enhance user engagement and increase sales by suggesting complementary or similar items based on the current product’s attributes or categories. This element can be customized in terms of layout, style, and criteria for selecting related products, providing a seamless integration into the overall design of the site.
Please see the following article for more information on how to set up Related Products in WooCommerce.
Content Controls
Content
Use these controls to define which products are shown and how they are ordered.
- Product – Choose specific products to display.
- Product Count – Set the number of products to show.
- Order By – Decide the sorting criteria for the products.
- Order – Specify the order direction (ascending or descending).
Design Controls
Container
These controls allow you to customize the overall container of the related products, including its size, background, borders, and padding.
- Size – Adjust the size of the container.
- Background -Choose a background color for the container.
- Borders – Configure the borders around the container.
- Radius – Set the border radius for rounded corners.
- Styling – Style the borders with various effects.
- Shadow – Add a shadow effect to the container.
- Padding – Adjust the padding inside the container.
Elements
Elements
These controls allow you to manage and style the individual components within the related products section, such as images, titles, prices, ratings, badges, and buttons.
- Image – Customize the product image display.
- Include – Decide whether to include the 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 – Adjust the borders around the image.
- Radius – Set the border radius for the image.
- Styling – Style the image borders.
- Shadow – Add a shadow effect to the image.
- Title – Customize the product title display.
- Include – Decide whether to include the title.
- Space After – Set the space after the title.
- Order – Determine the title’s display order.
- Typography – Adjust the typography settings for the title.
- Price – Customize the product price display.
- Include – Decide whether to include the price.
- Space After – Set the space after the price.
- Order – Determine the display order of the price.
- Old Price Typography – Adjust the typography settings for the old price.
- Current Price Typography – Adjust the typography settings for the current price.
- Rating – Customize the product rating display.
- Include – Decide whether to include the 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 – Adjust the typography settings for the review count.
- Sale Badge – Customize the sale badge display.
- Include – Decide whether to include the sale badge.
- Position – Set the position of the sale badge.
- Background – Choose a background color for the sale badge.
- Typography – Adjust the typography settings for the sale badge.
- Borders – Adjust the borders around the sale badge.
- Padding – Adjust the padding inside the sale badge.
- Nudge – Slightly adjust the position of the sale badge.
- X – Nudge the sale badge horizontally.
- Y – Nudge the sale badge vertically.
- Excerpt – Customize the product excerpt display.
- Include – Decide whether to include the excerpt.
- Space After – Set the space after the excerpt.
- Order – Determine the display order of the excerpt.
- Typography – Adjust the typography settings for the excerpt.
- Categories – Customize the product categories display.
- Include – Decide whether to include the categories.
- Space After – Set the space after the categories.
- Order – Determine the display order of the categories.
- Typography – Adjust the typography settings for the categories.
- Quantity Input – Customize the quantity input display.
- Include – Decide whether to include the quantity input.
- Space After – Set the space after the quantity input.
- Button – Customize the button display.
- Include – Decide whether to include the button. (This control is only available when the Include control is set to “enable”)
- Space After – Set the space after the button.
- Styles – Style the button appearance.
- Custom Areas – Customize additional content areas.
- Areas – Add and configure custom content areas.
- Global Block – Choose a global block for the custom area.
- 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
Layout
These controls allow you to define the overall layout for the related products, including grid or slider views and various settings for each layout type.
- Layout – Choose the overall layout style.
- Slider – Configure the slider settings. (This control is only available when the Layout control is set to “slider”).
- Products Per Row – Set the number of products per row. (This control is only available when the Layout control is not set to “slider”)
- Between Products – Set the space between products. (This control is only available when the Layout control is not set to “slider”)
Product Wrapper
Product Wrapper
These controls allow you to customize the container for individual products, including alignment, background, borders, and padding.
- Align Content – Set the alignment of the content within the product wrapper.
- Background – Choose a background color for the product wrapper.
- Borders – Adjust the borders around the product wrapper.
- Padding – Adjust the padding inside the product wrapper.
Title
Title
These controls allow you to manage the title display and styling within the related products section.
- Disable – Toggle the Product title on and off display.
- Typography – Adjust the typography settings for the title.
Spacing
Spacing
These controls allow you to manage the spacing around the related products section, including margins and padding.
- Below Title – Set the space below the title.
- Container – Adjust the container spacing settings.
- Margin Top – Set the top margin for the container.
- Margin Bottom – Set the bottom margin for the container.
Advanced
These controls provide advanced customization options to override Global WooCommerce Styles for the Related Products section.
