Flexbox button with 3 styles and variations
July 22, 2024WooCommerce Info Boxes under Add to Cart
July 23, 2024Snippet enhances the WooCommerce product details page by adding a custom tab that provides detailed instructions on how to place an order, making the purchasing process clearer for customers.
PHP
// Add a product tab with order process
add_filter( 'woocommerce_product_tabs', 'sf_product_tab_how_to_order' );
function sf_product_tab_how_to_order( $tabs ) {
$tabs['custom_tab'] = array(
'title' => __( 'How to order?' ),
'priority' => 50,
'callback' => 'sf_product_tab_how_to_order_content'
);
return $tabs;
}
// The content of the order process tab
function sf_product_tab_how_to_order_content() {
echo '<div class="sf-product-tab-order">';
echo '<h2>How to place your order?</h2>';
echo '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam eiusmod tempor incididunt.</p>';
echo '<ul class="sf-product-tab-order-list">';
echo '<li>';
echo '<h3>1</h3>';
echo '<h4>Select Your Products</h4>';
echo '<p>Browse our store and add the items you wish to purchase to your cart.</p>';
echo '</li>';
echo '<li>';
echo '<h3>2</h3>';
echo '<h4>Review Your Cart</h4>';
echo '<p>Check the items in your cart to ensure everything is correct.</p>';
echo '</li>';
echo '<li>';
echo '<h3>3</h3>';
echo '<h4>Make Payment</h4>';
echo '<p>Proceed to checkout and complete the payment process using your preferred payment method.</p>';
echo '</li>';
echo '<li>';
echo '<h3>4</h3>';
echo '<h4>Confirmation</h4>';
echo '<p>You will receive an email confirmation with your order details and estimated delivery time.</p>';
echo '</li>';
echo '</ul>';
echo '<a class="wp-block-button__link wp-element-button" href="#">See detailed description</a>';
echo '</div>';
}
CSS
/* ---------------------------------------------------------- */
/* Snippflow Custom Product Tab - How to Order */
/* ---------------------------------------------------------- */
.sf-product-tab-order { text-align: center; width: 1000px; max-width: 100%; margin: 0 auto; }
.sf-product-tab-order-list { display: flex; list-style: none; margin: 30px 0; padding: 0; }
.sf-product-tab-order-list li { flex: 1; margin: 0 20px; text-align: center; }
.sf-product-tab-order-list li h3 { font-size: 50px; line-height: 1; color: #7F54B3; margin: 0 0 20px; }
.sf-product-tab-order-list li h4 { font-size: 22px; line-height: 1.2; font-weight: 700; margin: 0 0 20px 0; }
.sf-product-tab-order-list li p { font-size: 85%; opacity: .7; }
@media only screen and (max-width: 767px) {
.sf-product-tab-order-list { flex-direction: column; }
.sf-product-tab-order-list li:not(:last-child) { margin-bottom: 20px; }
}