Flexbox button with 3 styles and variations
July 22, 2024
WooCommerce Info Boxes under Add to Cart
July 23, 2024

July 22, 2024

WooCommerce Custom Product Tab – How to Order

Table of contents

Snippet 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.

Based on Twenty Twenty-Four Theme

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; }
}

Table of contents

Advert

Leave a Reply

Your email address will not be published. Required fields are marked *

WooCommerce Custom Product Tab – How to Order
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more