How to create a slide to show product when mouse moving to cart icon in woocommerce?
Like screenshot below
Its my header.php script
<?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">
Its style.css just for top bar navigation
/* 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;
}
}
Or you can checkout this website for further info like I said above.
I am using latest woocommerce plugin.
Change over here
First change the code
CSS changes
This is not complete design but you will get the minicart and display that cart on hover.