Adding Product Block to Cart Page

Description: 2 options to add a Product Block to Cart Page

Support: Free install, just send me an email with your site url + detail request, I will take a look. If it’s not complicated, I can install it for you.

Option 1. Adding Product Block to Footer then use code to move to Cart Page

First, add a Product Block in Site Footer

Next, add this code to Code Injection > Footer 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('footer.sections .product-block').insertAfter('div.cart-container');
});
</script>
<style>
div#sqs-cart-root .product-block {
    max-width: 300px;
}
</style>

Result

Option 2. Adding Product Block to Not Linked Page then use Plugin

First, Adding a Not Linked Page > Add a product block there

• Page Name: Product Block
• Page URL: /product-block

Next Install Section Loader Plugin (referral link)

Next, add this code to Design > Custom CSS

body:not(#cart) div.wm-load-container {
 	display: none !important;
 }

Next, add this code to Settings > Advanced > Code Injection > Footer (or Settings > Developer Tools > Code Injection > Footer)

<div data-wm-plugin="load" data-target="/product-block"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  setTimeout( function() {
          $('div.wm-load-container').insertAfter('div.cart-container');
    }, 3000);
});
</script>

Result