Cart, Checkout

WooCommerce Shipping Method Description Tooltips

WooCommerce shipping methods showing a custom description in a tooltip popup

Pre-Requisites

There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

About This Solution

This snippet creates a custom text area field when creating a new shipping method and outputs the data entered as a tooltip on the cart and checkout where the shipping methods are shown. There are a few plugins out there which has this functionality minus the tooltip. Putting the custom shipping method description in a tooltip popup allows for a much cleaner checkout process rather than it being cluttered with lots of text. More than likely, you are going to need to tweak the CSS in this snippet. This CSS has been taken from W3schools Tooltip guide. The style of the shipping methods is typically generated by the theme. This snippet is tailored towards WooCommerce’s Storefront Theme but can easily be tweaked to work with your theme. You’ll see from the CSS part of this snippet, Font Awesome icons are loaded – this is for the circular question mark. You don’t need this line of code if your theme already loads Font Awesome.

/**
 * Snippet Name:	WooCommerce Shipping Method Description Tooltips
 * Snippet Author:	ecommercehints.com
 */

// Create a filter for each shipping method
add_action( 'init', 'ecommercehints_init', 100 );
function ecommercehints_init() {
	$shipping_methods = WC()->shipping->get_shipping_methods();
	foreach ( $shipping_methods as $id => $shipping_method ) {
		add_filter( "woocommerce_shipping_instance_form_fields_$id", 'ecommercehints_create_shipping_method_description_field' );
	}
}

// Create custom description field in shipping method editor and identify where it will be shown
function ecommercehints_create_shipping_method_description_field( $fields ) {
	$new_fields = array(
		'description' => array(
			'title' => 'Description',
			'type'  => 'textarea',
		),
	);
	$keys  = array_keys( $fields );
	$index = array_search( 'title', $keys, true );
	$pos   = false === $index ? count( $fields ) : $index + 1;
	return array_merge( array_slice( $fields, 0, $pos ), $new_fields, array_slice( $fields, $pos ) );
}

// Create the description field as meta
add_filter( 'woocommerce_shipping_method_add_rate_args', 'ecommercehints_create_description_as_meta', 10, 2 );
function ecommercehints_create_description_as_meta( $args, $method ) {
	$args['meta_data']['description'] = htmlentities( $method->get_option( 'description' ) );
	return $args;
}

// Display the tooltip next to the shipping method title
add_action( 'woocommerce_after_shipping_rate', 'ecommercehints_output_shipping_method_tooltips', 10 );
function ecommercehints_output_shipping_method_tooltips( $method ) {
	$meta_data = $method->get_meta_data();
	if ( array_key_exists( 'description', $meta_data ) ) {
		$description = apply_filters( 'ecommercehints_description_output', html_entity_decode( $meta_data['description'] ), $method );
		if ($description) {
			$html = '<div class="tooltip"> <i class="fa fa-question-circle" aria-hidden="true"></i><span class="tooltiptext">' .  wp_kses( $description, wp_kses_allowed_html( 'post' ) ) . '</span></div>';
			echo apply_filters( 'ecommercehints_description_output_html', $html, $description, $method  );
		}
	}
}

// Tooltip styling
add_action('wp_head', 'ecommercehints_tooltip_css');
function ecommercehints_tooltip_css() { ?>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
		.tooltip {
			position: relative;
			display: inline-block;
			float:right;			/* Change this to left if you'd like the tooltip to appear before the shipping method name */
			text-align:right;		/* Change this to left if you'd like the tooltip to appear before the shipping method name */
		}
		.tooltip .tooltiptext {
			display:inline-block;
			text-indent:0;
			visibility: hidden;
			width: 120px;
			background-color: #ff6666;
			color: #000;
			text-align: center;
			border-radius: 3px;
			padding: 15px;
			position: absolute;
			z-index: 1;
			bottom: 100%;
			left: 50%;
			margin-left: -68px;
			font-size: small;
			line-height:1;
		}
		.tooltip .tooltiptext::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: #ff6666 transparent transparent transparent;
		}
		.tooltip:hover .tooltiptext {
			visibility: visible;
		}
	</style>
<?php
}

WooCommerce Custom Shipping Method Description Field

WooCommerce custom description field for shipping methods

Snippet Benefits

  • Present to the customer more detail information about a shipping method like the expected delivery date, information about the cost, the courier used etc. Output literally any content you like.
  • Allow for a cleaner checkout with shipping method descriptions only being shown via a tooltip popup when interacted with.

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 20% off on your first month with us.

26027
WELCOME OFFER