[英]Add tooltip to “flat rate” shipping method in WooCommerce
I want to make a tooltip for the "Flat Rate" delivery option.我想为“统一费率”交付选项制作一个工具提示。 I need to put the "Question mark" icon next to "Flat Rate" and when I click on it, a prompt should tooltip with a description of the delivery terms.
我需要将“问号”图标放在“统一费率”旁边,当我点击它时,应该会出现一个提示工具提示,其中包含对交付条款的描述。
I have a code that shows an icon, which pops up a shows when clicked.我有一个显示图标的代码,单击时会弹出一个节目。
<div class="popup" onclick="myFunction()"><i class="pe-7s-help1"></i>
<span class="popuptext" id="myPopup">
<?php if ( is_active_sidebar( 'tooltip_sidebar' ) ) : ?>
<div id="tooltip-sidebar" class="sidebar">
<?php dynamic_sidebar( 'tooltip_sidebar' ); ?>
</div>
<?php endif; ?>
</span>
</div>
I am also registering a new sidebar in which I will write the shipping terms.我还注册了一个新的侧边栏,我将在其中写下运输条款。
add_action( 'widgets_init', 'register_new_sidebar' );
function register_new_sidebar() {
register_sidebar(
array(
'id' => 'tooltip_sidebar',
'name' => 'Tooltip Sidebar',
'description' => '',
'before_widget' => '<div id="%1$s" class="tooltip widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>'
)
);
}
CSS style for a tooltip:工具提示的 CSS 样式:
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 320px;
background: #fff;
color: #222;
text-align: center;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
-webkit-box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.3);
box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.3);
}
/* Popup arrow */
.popup .popuptext::after {
content: "X";
position: absolute;
top: 0;
right: 5%;
border-width: 5px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
Script for a tooltip:工具提示的脚本:
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
Tell me how this icon can be added to the "Flat Rate" delivery option using hooks in the Functions.php file?告诉我如何使用 Functions.php 文件中的挂钩将此图标添加到“统一费率”交付选项? I just don't want to add this code to WooCommerce templates.
我只是不想将此代码添加到 WooCommerce 模板中。 And how can you make this code work in the cart and on the checkout page?
以及如何使此代码在购物车和结帐页面上工作?
I will be glad for your help!我会很高兴你的帮助!
Thanks @7uc1f3r for the help: I needed to replace my HTML code with this one:感谢@7uc1f3r 的帮助:我需要用这个替换我的 HTML 代码:
function action_woocommerce_after_shipping_rate( $method, $index ) {
// Compare (adjust as needed)
if( $method->get_id() == 'flat_rate:1' ) {
echo '<span class="popup" onclick="myFunction()"><i class="pe-7s-help1"></i><span class="popuptext" id="myPopup">';
dynamic_sidebar( 'tooltip_sidebar' );
echo '</span></span>';
}
}
add_action( 'woocommerce_after_shipping_rate', 'action_woocommerce_after_shipping_rate', 10, 2 );
Add the code to your child theme's functions.php file.将代码添加到您的子主题的 functions.php 文件中。 The code has been tested and works.
该代码已经过测试并且可以工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.