dev-resources.site
for different kinds of informations.
WooCommerce Info Boxes under Add to Cart
Published at
12/23/2024
Categories
woocommerce
wordpress
css
html
Author
SnippFlow
Put informative Woocommerce Info Boxes below the “Add to Cart” button and you’ll supercharge your WooCommerce product pages.
// 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 );
Read full article: WooCommerce Info Boxes under Add to Cart
WordPress Snippets
Articles
12 articles in total
Truncating Text with Text-Overflow
read article
Using the currentColor property to change SVG color
read article
Author Bio Box CSS in WordPress
read article
Reading Progress Bar
read article
Animated Gradient Background
read article
Gallery with varied image sizes using aspect-ratio and object-fit
read article
Back to Top button with smooth scroll
read article
Tooltips with Positioning (Top, Bottom, Left, Right)
read article
Center elements with flexbox
read article
Unordered and Ordered Lists with Auto-Increment Using Pseudoclasses
read article
Custom Mouse Cursor Using External Image
read article
WooCommerce Info Boxes under Add to Cart
currently reading
Featured ones: