WooCommerce Info Boxes under Add to Cart

Put informative Woocommerce Info Boxes below the “Add to Cart” button and you’ll supercharge your WooCommerce product pages. These handy tools let you:

• Boost Sales and Conversions: Answer customer questions and concerns so they can make informed purchasing decisions.
• Highlight Key Benefits: Draw attention to special offers, unique selling points or exclusive deals.
• Convey Important Notes: Let customers know about shipping delays, product limitations or care instructions.

PHP

// Add Info Boxes under Add to Cart
function sf_add_to_cart_info_boxes(){

    echo '<div class="sf-add-to-cart-infobox">';
        echo '<i class="fa-solid fa-truck-fast"></i>';
        echo '<div class="desc">';
        echo '<h5>Need fast shipping?</h5>';
        echo '<p>Select the Express Service, and the shipping will be completed within 24 hours from project approval.</p>';
        echo '<a href="#">Read more</a>';
        echo '</div>';
    echo '</div>';

    echo '<div class="sf-add-to-cart-infobox">';
        echo '<i class="fa-regular fa-circle-question"></i>';
        echo '<div class="desc">';
        echo '<h5>How to place an order?</h5>';
        echo '<p>See the detailed step-by-step process for placing an order in our store.</p>';
        echo '<a href="#">Read more</a>';
        echo '</div>';
    echo '</div>';

}
add_action( 'woocommerce_after_add_to_cart_button', 'sf_add_to_cart_info_boxes', 25 );

CSS

/* ---------------------------------------------------------- */
/*     Snippflow WooCommerce Info Boxes under Add to Cart     */
/* ---------------------------------------------------------- */

.sf-add-to-cart-infobox { display: flex; align-items: center; background: rgba(217,214,210,.2); box-sizing: border-box; padding: 20px 25px; margin: 20px auto 0; width: 100%; }
.sf-add-to-cart-infobox > i { font-size: 30px; min-width: 50px; text-align: center; margin-right: 15px; flex-shrink: 0; }
.sf-add-to-cart-infobox .desc h5 { margin: 0 0 10px; }
.sf-add-to-cart-infobox .desc p { font-size: 15px; line-height: 1.4; margin: 0 0 5px; }
.sf-add-to-cart-infobox .desc a { font-size: 15px; line-height: 1.4; }

@media only screen and (max-width: 767px) {
	.sf-add-to-cart-infobox > i { font-size: 20px; min-width: 40px; }
	.sf-add-to-cart-infobox .desc p,
	.sf-add-to-cart-infobox .desc a { font-size: 13px; line-height: 1.2; }
}