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.
In this post
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