Woocommerce

Tooltip description for woocommerce shipping method options

    
// 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:left; /* Change this to left if you'd like the tooltip to appear before the shipping method name */ text-align:left; /* 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: #e2e8f0; 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 }

Leave a Reply