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
- Columns: Set how many columns will be displayed, from 1 to 12, for each device (Desktop, Tablet, Mobile)
- Order By: Set the order in which the upsells will be displayed. Options include Date, Title, Price, Popularity, Rating, Random, Menu Order
- Order: Select ASC or DESC (ascending or descending) order
Style
Products
- Columns Gap: Set the exact gap between the upsell products columns
- Rows Gap: Set the exact gap between the upsell products rows
- Alignment: Align the upsells data to the left, right, or center
Image
- Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
- Width: Control the thickness of the border around the upsell product images
- Color: Choose the border color
- Border Radius: Set the radius to control corner roundness of the border
- Spacing: Adjust the amount of space between the images and their data
Title
- Color: Choose the color of the upsell product title
- Typography: Set the typography options for the upsell product title
- Spacing: Adjust the amount of space after the upsell product title
Rating
- Star Color: Choose the color of a filled star
- Empty Star Color: Choose the color of an empty star
- Star Size: Set the size of stars
- Spacing: Adjust the amount of space after the Rating Stars
Price
- Color: Choose the color of the upsell product Price
- Typography: Set the typography options for the upsell product Price
Regular price
- Color: Choose the color of the upsell product’s Regular Price
- 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.
- Text Color: Choose the color of the upsell product’s Button Text
- Background Color: Choose the background color of the upsell product’s Button
- Border Color: Choose the border color of the upsell product’s Button
- Typography: Set the typography options for the upsell product’s Button Text
- Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
- Width: Control the thickness of the border around the upsell product’s Button
- Border Radius: Control corner roundness of the button’s border
- Text Padding: Set the padding within the button
- Spacing: Adjust the amount of space above the buttons
View Cart
- Color: Choose the color of the View Cart text under the buttons
- Typography: Set the typography options for the View Cart text
Heading
Heading: Show or Hide the upsell products heading
Box
- Border Width: Control the thickness of the border around the upsell product’s box
- Border Radius: Control corner roundness of the upsell products box
- 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.
- Box Shadow: Adjust box shadow options
- Background Color: Choose the background color of the upsell products box
- Border Color: Choose the border color of the upsell products box
Sale Flash
- Sale Flash: Show or Hide
- Text Color: Choose the color of the Sale Flash text
- Background Color: Choose the background color of the Sale Flash
- Typography: Set the typography options for the Sale Flash text
- Border Radius: Control the corner roundness of the Sale Flash
- Width: Control the thickness of the border for the Sale Flash
- Height: Set the height of the Sale Flash
- Position: Set the position of the Sale Flash, Left or Right, of the upsell products box
- 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.
