[Share] Summary Block Add to Cart

Description

• Adding add to cart button to Summary Block
• Click Add to cart >> add product to Cart
• This works with Summary Block List/Grid design only

If code doesn't work, you can share link to page where you use Summary Block, I will check again.

#1. Suppose we have a Summary Block with these Products. We will find the way to add “Add to Cart” button here.

#2. First, edit each product > Additional Info > Add text "Add to Cart"

Highlight it > Enter this URL:

#product100

(each product, you will enter a different number, you can use any numbers what you want, but read carefully below steps to make sure number here and number in next steps are consistent).

Make sure "Open in New Tab" is disabled.

We will have

#3.1. Next, add a Section under Summary Block > Then add 3 Product Blocks

Make sure you enabled "Add to Cart button"

We will have

#3.2. Next, find ID of this Section

 

In my example, we will have:

section[data-section-id="671ec9546d81bb36bbe7db2d"]

Next, use this code to Custom CSS box. Code will hide this Section from Preview/Live Mode, and show it in Edit Mode only.

body:not(.sqs-edit-mode-active) section[data-section-id="671ec9546d81bb36bbe7db2d"] {
  display:none;
}

#4. Find ID of 3 Product Blocks. Use tool in #3.2.

In my example, we will have:

• 100. One-hundred: #block-yui_3_17_2_1_1730070417388_21392 99
• Ninety-nine: #block-yui_3_17_2_1_1730070417388_22146 98
• Ninety-eight: #block-01208d116f9191496bd8

#5. Use this code to Code Injection Footer (or Page Header Injection, Page where you use Summary Block).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  const products = {
    "product100": "block-yui_3_17_2_1_1730070417388_21392",
    "product99": "block-yui_3_17_2_1_1730070417388_22146",
    "product98": "block-01208d116f9191496bd8"
  };
  $.each(products, function(productID, blockID) {
    $(`a[href="#${productID}"]`).on("click", function(event){
      event.preventDefault();
      $(`#${blockID} .sqs-add-to-cart-button`)[0].click();
    });
  });
});
</script>

When users click Add to Cart in Summary Block >> It will click Add to Cart in hidden Section Product Block.

You need to change these values in the code

#6. To style "Add to Cart" link, you can use this code to Custom CSS box

div.summary-item [href*="#product"] {
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
}
div.summary-item [href*="#product"]:hover {
    opacity: 0.7;
    transition: all 0.3s;
}

Result

#7. If you want to remove Excerpt under Price, you can use this CSS code

div.summary-item:has([href*="#product"]) p {
    display: none;
}
div.summary-item:has([href*="#product"]) p:has([href*="#product"]) {
    display: inline-block;
}

Result

#8. If you want to remove Add to cart link in Product Description

You can use this code to Custom CSS box

body.view-item .product-details p:has([href*="#product"]) {
    display: none;
}