How to add custom category text, products with add to cart on Shop Page

[tuanphan]

To add custom text, products with Add to Cart on Shop Page, we can use Summary Block, then use code to pull add to cart button.

#1. First, click edit Shop Page > Add a Section

#2. Next, you can add your desired text, Summary Block. Here is an example.

#3. Next, edit Products Section on Shop Page > Enable Add to Cart

#4. Next, find ID of Products Section

#5. Use this code to Shop Page Header Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // add to cart
    $('.summary-item').each(function() {
        var $summaryItem = $(this);
        var productUrl = $summaryItem.find('.summary-title-link').attr('href');
        
        // add to cart
        var $addToCartBtn = $('<div class="summary-add-to-cart-wrapper">' +
            '<button class="summary-add-to-cart-btn sqs-button-element--primary">' +
            '<span>Add To Cart</span>' +
            '</button>' +
            '</div>');
        
        $summaryItem.find('.summary-excerpt').after($addToCartBtn);
        
        $addToCartBtn.find('.summary-add-to-cart-btn').on('click', function(e) {
            e.preventDefault();
            
            var $correspondingProduct = $('.product-list-item').filter(function() {
                return $(this).find('.product-list-item-link').attr('href') === productUrl;
            });
            
            if ($correspondingProduct.length > 0) {
                $correspondingProduct.find('.sqs-add-to-cart-button').trigger('click');
                var $btnText = $(this).find('span');
                var originalText = $btnText.text();
                $btnText.text('Added!');
                
                setTimeout(function() {
                    $btnText.text(originalText);
                }, 2000);
            }
        });
    });
});
</script>

#6. Result

#7. To hide Products Section, use this code under #5 code.

<style>
section[data-section-id="67e3cd210fb9e460a936d002"] {
    display: none !important;
}
</style>

#8. To hide Excerpt in Summary Block, use this under #5 code

<style>
.summary-excerpt.summary-excerpt-only {
    display: none !important;
}
</style>

#9. Result