Kadence Theme has a very nice side cart feature which opens up after someone has added product to the cart. It looks nice and clean but currently it shows nothing but the cart itself. So, if you want to know how to add cross sell products inside Kadence Theme Side cart then this tutorial is for you.
What is a Cross Sell Product?
Cross-selling gives you an opportunity to show your customers products that will their meet additional or complementary needs which are unfulfilled by the original product.
For example, if you sell a band T-Shirt then the cross sell product can be a band cap or a hoodie. The main goal of the cross sell product is to point your customers to purchase something more in a moment when they are already in cart page. Therefore, those cross sell products are shown in the cart page.
How to Add Cross Sell Products Inside Kadence Theme Side Cart?
Step 1: Add Cross Sells Products
So, let’s start by adding some cross sell products. Go to Products >> All products >> Open a product >> Choose Linked products and search for suitable products inside “Cross-sells products” box. See the screenshot below.
Step 2: Add cross sell products inside Kadence side cart
There are two ways to do that. First, copy the code here below inside your functions.php file. Do that only if you are using a child theme. Otherwise, after theme update the modifications will be lost.
Second option is the one I prefer. Install a free Code Snippets plugin and add the code to the code box over there. That ensures that all your custom functions will be OK even after the theme update.
So, grab the code here below.
add_action( 'kadence-after-side-cart', 'woocommerce_cross_sell_display' );Step 3: Add additional CSS
That ensures that cross sell products columns are shown in two columns and that the “You may be interested in…” heading looks good.
/* Sets columns to be 45% wide inside the side cart */
.drawer-inner .grid-lg-col-4 {
grid-template-columns: 45% 45%;
}
/* Makes columns and row gaps smaller */
.drawer-inner .grid-cols {
column-gap: 1rem;
row-gap: 1rem;
}
/* This modifies the "You may be interested in..." text above the products
.drawer-inner h2 {
font-size: 20px;
font-weight: 400;
}Video: How to Add Cross Sell Products Inside Kadence Theme Side Cart?
Take a look at the video where I’ll show you everything I talked about in this post.
