当鼠标移动到woocommerce中的购物车图标时，如何创建幻灯片以显示产品？
Posted
技术标签:
【中文标题】当鼠标移动到woocommerce中的购物车图标时，如何创建幻灯片以显示产品？【英文标题】：How to create a slide to show product when mouse moving to cart icon in woocommerce? 【发布时间】：2016-01-10 17:20:39 【问题描述】：当鼠标移动到 woocommerce 中的购物车图标时，如何创建幻灯片以显示产品？ 如下图所示
这是我的 header.php 脚本
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package themetest
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'gg' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<nav id="site-navigation" class="main-navigation2" role="navigation">
<button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"><?php esc_html_e( 'Top Menu', 'gg' ); ?></button>
<?php
global $woocommerce;
// get cart quantity
$qty = $woocommerce->cart->get_cart_contents_count();
// get cart total
$total = $woocommerce->cart->get_cart_total();
// get cart url
$cart_url = $woocommerce->cart->get_cart_url();
// if multiple products in cart
if($qty>1)
echo '<ul class="menu nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="'.$cart_url.'">'.$qty.' <i class="cart_control">::before</i></a></li> </ul>';
// if single product in cart
if($qty==1)
echo '<a href="'.$cart_url.'">1 product | '.$total.'</a>';
?>
<?php wp_nav_menu( array( 'theme_location' => 'top', 'menu_id' => 'top-menu' ) ); ?>
</nav><!-- #site-navigation -->
<div class="site-branding">
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php endif; ?>
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'gg' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<div id="content" class="site-content">
它的 style.css 仅用于顶部栏导航
/* top bar. */
.main-navigation2
float: none;
height: 50px;
background: #fff;
.main-navigation2 ul
display: none;
list-style: none;
margin: 0;
padding-left: 0;
.main-navigation2 li
float: right;
position: relative;
.main-navigation2 a
padding: 0 20px 0 20px;
display: block;
text-decoration: none;
line-height: 50px;
color: #000;
font-family: sans-serif;
background: #ff3400 url(img/arrow.png) no-repeat scroll right / 20% 20%;
.main-navigation2 a:first-child
padding: 0 20px 0 20px;
display: block;
text-decoration: none;
line-height: 50px;
color: #000;
font-family: sans-serif;
-webkit-border-bottom-left-radius: 60px;
-moz-border-radius-bottomleft: 60px;
border-bottom-left-radius: 60px;
background: #ff3400 url(img/arrow.png) no-repeat scroll right / 20% 20%;
border: 3px solid #ccc;
.main-navigation2 a:last-child
padding: 0 20px 0 20px;
display: block;
text-decoration: none;
line-height: 50px;
color: #000;
font-family: sans-serif;
background: #ff3400 url(img/arrow.png) no-repeat scroll right / 20% 20%;
.main-navigation2 ul ul
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 1.5em;
left: -999em;
z-index: 99999;
.main-navigation2 ul ul ul
left: -999em;
top: 0;
.main-navigation2 ul ul a
width: 200px;
line-height: 40px;
padding: 0 20px;
display: block;
.main-navigation2 ul ul li
.main-navigation2 li:hover > a,
.main-navigation2 li.focus > a
background: #e6370a;
.main-navigation2 ul ul :hover > a,
.main-navigation2 ul ul .focus > a
.main-navigation2 ul ul a:hover,
.main-navigation2 ul ul a.focus
.main-navigation2 ul li:hover > ul,
.main-navigation2 ul li.focus > ul
left: auto;
.main-navigation2 ul ul li:hover > ul,
.main-navigation2 ul ul li.focus > ul
left: 100%;
.main-navigation2 .current_page_item > a,
.main-navigation2 .current-menu-item > a,
.main-navigation2 .current_page_ancestor > a
.main-navigation2 .cart_control
display: block;
margin: 10px 0 10px 0;
padding: 0 20px 0 19px;
width: 30px;
float: right;
background: url('img/icons/set_icons/cart-grey.png') center no-repeat;
height: 30px;
line-height: 9999em;
overflow: hidden;
.main-navigation2 .cart_wrapper
text-align: left;
position: absolute;
width: 300px;
right: -2px;
background-color: #494949;
z-index: 1000;
padding: 20px 12px;
color: #fff;
/* Small menu. */
.menu-toggle,
.main-navigation2.toggled ul,
.main-navigation.toggled ul
display: block;
@media screen and (min-width: 37.5em)
.menu-toggle
display: none;
.main-navigation ul
display: block;
.main-navigation2 ul
display: block;
或者您可以像我上面所说的那样查看this website 以获取更多信息。 我正在使用最新的 woocommerce 插件。
【问题讨论】：
您能否在其中添加 html 而不是 PHP 脚本。所以了解您的导航结构。 @Mitul 完成。请重新检查！ 【参考方案1】：换过来
先改代码
if($qty==1)
echo '<ul class='mini-cart'><li><a href="'.$cart_url.'">1 product | '.$total.'</a><div class="cart-Items">' woocommerce_mini_cart() '</div> <li></ul>';
CSS 变化
.mini-cart li
position:relative;
.mini-cart li ul
position:absolute;
display:none;
.mini-cart li:hover ul
display:block;
这不是完整的设计，但您将获得迷你推车并在悬停时显示该推车。
【讨论】：
您的代码有语法错误并已修复，但给出的错误结果如下：imgur.com/YjNEiiS以上是关于当鼠标移动到woocommerce中的购物车图标时，如何创建幻灯片以显示产品？的主要内容，如果未能解决你的问题，请参考以下文章
删除快速视图，添加到购物篮并添加到愿望清单胡佛图标 - woocommerce
php 活动门票加 - 当WooCommerce Ticket添加到购物车时，将其他WooCommerce产品添加到购物车
php 活动门票加 - 当WooCommerce Ticket添加到购物车时，将其他WooCommerce产品添加到购物车