I have copied the code from http://demo.woothemes.com/boutique/product/woo-ninja-3/
<ul id="site-header-cart" class="site-header-cart menu">
<li class="">
<a class="cart-contents" href="http://demo.woothemes.com/boutique/cart/" title="View your shopping cart">
<span class="amount">£168.00</span> <span class="count">12 items</span>
</a>
</li>
<li>
<div class="widget woocommerce widget_shopping_cart" style="opacity: 1;"><div class="widget_shopping_cart_content">
<ul class="cart_list product_list_widget ">
<li class="mini_cart_item">
× <a href="http://demo.woothemes.com/boutique/product/woo-ninja-3/">
<img width="150" height="150" src="//demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771456709_fc540cc175_b.jpg?w=150&h=150&crop=1" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" srcset="//demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771456709_fc540cc175_b-150x150.jpg 150w, //demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771456709_fc540cc175_b-500x500.jpg 500w, //demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771456709_fc540cc175_b-800x800.jpg 800w" sizes="(max-width: 150px) 100vw, 150px">Woo Ninja </a>
<span class="quantity">6 × <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>15.00</span></span> </li>
<li class="mini_cart_item">
× <a href="http://demo.woothemes.com/boutique/product/flying-ninja/">
<img width="150" height="150" src="//demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771457369_92e02576a8_o.jpg?w=150&h=150&crop=1" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" srcset="//demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771457369_92e02576a8_o-150x150.jpg 150w, //demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771457369_92e02576a8_o-500x500.jpg 500w" sizes="(max-width: 150px) 100vw, 150px">Flying Ninja </a>
<span class="quantity">4 × <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>12.00</span></span> </li>
<li class="mini_cart_item">
× <a href="http://demo.woothemes.com/boutique/product/ship-your-idea-3/">
<img width="150" height="150" src="//demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771457549_3838523969_b.jpg?w=150&h=150&crop=1" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" srcset="//demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771457549_3838523969_b-150x150.jpg 150w, //demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771457549_3838523969_b-500x500.jpg 500w" sizes="(max-width: 150px) 100vw, 150px">Ship Your Idea Silver Plated Ring </a>
<span class="quantity">2 × <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>15.00</span></span> </li>
</ul><!-- end product list -->
<p class="total"><strong>Subtotal:</strong> <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>168.00</span></p>
<p class="buttons">
View Cart
Checkout
</p>
</div></div> </li>
</ul>
Into my own template; but while widget is updating data just fine for some reason the "cart contents" area, shown below, doesn't update the amount and item count.
<li class="">
<a class="cart-contents" href="http://demo.woothemes.com/boutique/cart/" title="View your shopping cart">
<span class="amount">£168.00</span> <span class="count">12 items</span>
</a>
</li>
How can my problem be resolved? I assume some js is missing?
WooCommerce requires you to add cart area to its method.
More about it can be found below:
https://docs.woocommerce.com/document/show-cart-contents-total/
Related
Is there any option to change the output of the WP block gallery component in Gutenberg editor?
Currently I set some images with external links (link to media attachment) and I get this result:
<ul class="wp-block-gallery columns-2">
<li class="blocks-gallery-item">
<figure>
<a href="...">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<a href="...">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
</ul>
But I want to also set the title attribute for anchor element. This is the result that I want:
<ul class="wp-block-gallery columns-2">
<li class="blocks-gallery-item">
<figure>
<a href="..." title="some title">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<a href="..." title="some title">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
</ul>
Thanks
You can use the blocks.getSaveElement filter to alter existing blocks. Take a look at this post on Wordpress Development
I'm building a page using Bulma. Unfotunatly, I found something weird. When I hover over one of the two dropdown menus containing class "is hoverable", both of the dropdown menu's trigger, displaying both menu's at the same on.
I would like to only dropdown the one I hoover my mouse over. How could I make this?
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Projects
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href='/projects'>
Projects
</a>
<a class="navbar-item" href=''>
Edit
</a>
<a class="navbar-item" href="/projects/create">
create
</a>
</div>
<a class="navbar-item" href="/contact">
Contact
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Vue.js
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href='/vue'>
Page 1
</a>
<a class="navbar-item" href='/vue2'>
Page 2
</a>
<a class="navbar-item" href='/vue3'>
Page 3
</a>
</div>
You were not closing the divs correctly, two </div> were missing.
See below, now you can align them horizontally with respective Bulma classes/structure.
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Projects
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href='/projects'>
Projects
</a>
<a class="navbar-item" href=''>
Edit
</a>
<a class="navbar-item" href="/projects/create">
create
</a>
</div>
</div>
<a class="navbar-link" href="/contact">
Contact
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Vue.js
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href='/vue'>
Page 1
</a>
<a class="navbar-item" href='/vue2'>
Page 2
</a>
<a class="navbar-item" href='/vue3'>
Page 3
</a>
</div>
</div>
I'm gonna add my own icons on top of each section in menubar, for example: Home icon on top of home, or Car icon on top of Cars, and etc, now it's showing in left side
I tried all suggested ways but icons don't show on top of menu. how can I solve it?
Here is my code:
.navbar-wrapper2{min-height:0px; background:white; border-bottom:0px solid #cccccc; box-shadow: 0 0 5px rgba(0, 0, 0, 0.13); padding-bottom:0px;}
#media (min-width: 992px) {
.navbar-wrapper2{min-height:110px; background:white; border-bottom:0px solid #cccccc; box-shadow: 0 0 5px rgba(0, 0, 0, 0.13); padding-bottom:0px;}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top navbar-default ">
<div class="container">
<div class="navbar">
<!-- Navigation-->
<div class="navbar-header go-right">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="http://www.sothink.com/page/logo-design/images/company-logo10.jpg" alt="" class="moto">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right go-left">
<li class="dropdown active go-right">
<a class="dropdown-toggle" href=""> Home </a>
</li>
<li class="go-right ">
<a href="m/hotels" class="" target="_self">
<!--<i class='fa fa-building'></i>--> Hotels </a>
</li>
<li class="go-right ">
<a href="/tours" class="" target="_self">
<!--<i class='fa fa-briefcase'></i>--> Tours </a>
</li>
<li class="go-right ">
<a href="/cars" class="" target="_self">
<!--<i class='fa fa-car'></i>--> Cars </a>
</li>
<li class="go-right ">
<a href="/offers" class="" target="_self">
<!--<i class='fa fa-gift'></i>--> Offers </a>
</li>
<li class="go-right ">
<a href="/blog" class="" target="_self">
<!--<i class='fa fa-building'></i>--> Blog </a>
</li>
<li class="go-right ">
<a href="/flightsd" class="" target="_self">
<!--<i class='fa fa-building'></i>--> Flights </a>
</li>
<li class="go-right ">
<a href="/contact-us" class="" target="">
<!--<i class='glyphicon glyphicon-phone-alt'></i>--> Contact </a>
</li>
<form class="dropdown pull-right">
<div class="styled-select">
<select onchange="change_currency(this.value)" class="selectx" style="margin-top:10px;font-weight: 100;height: 2.3em;" name="currency" id="currency">
<option value="1" selected="">US Dollar</option>
<option value="3">GB Pound</option>
<option value="9">SR Saudi</option>
</select>
</div>
<div class="clearfix"></div>
</form>
<li class="dropdown pull-right">
<a style="border-bottom: 0px;" href="javascript: void();" class="dropdown-toggle" data-toggle="dropdown"><img src="/uploads/images/language/en.png" alt="English" height="14" width="21"> English </a>
<ul style="display: none;" class="dropdown-menu">
<li><img src="http://findicons.com/files/icons/282/flags/48/united_states_of_america_usa.png" alt="" height="14" width="21"> English</li>
<li><img src="http://icons.iconarchive.com/icons/gosquared/flag/64/Russia-icon.png" alt="" height="14" width="21"> Russia</li>
</ul>
</li>
<li class="dropdown pull-right">
My Account <b class="lightcaret mt-2"></b>
<ul style="display: none;" class="dropdown-menu">
<li> Login</li>
<li> Sign Up</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I highly appreciate it and thank you
you used inline element, so they are showed beside of each.
you should use block elements to take element down.
for example add <p> tag to Hotels
<li class="go-right ">
<a href="m/hotels" class="" target="_self">
<i class='fa fa-building'></i><p>Hotels</p> </a>
</li>
and if you want icons go center of buttons:
add text-align:center; to the parent class of font-awesome <i> tags.
please see this link and notice to editfromStack :
http://jsbin.com/kewahadike/edit?output
or you can add <span> to words like hotel and use span{display:block;} on stylesheet
please see this link:
http://jsbin.com/kumuvenanu/edit?html,output
Can someone tell me please how can i have different top menu when scrolling. You can see example on this site http://www.pizzafan.gr. It is static menu and if you scroll the menu items are changing.
You need to replace some coding in your header.html
First, you need to replace your below code:
<div class="sticky_logo_left">
<img src="/assets/site/images/logo_mobile.png" alt="Pizza Fan Logo" width="140" class="moblogo">
</div>
From:
<div class="sticky_logo_left">
<img src="/assets/site/images/logo_mobile.png" alt="Pizza Fan Logo" width="140" class="moblogo">
<ul class="quick_menu">
<li class="first desktop">
<a href="http://www.pizzafan.gr/el">
<img src="/assets/site/images/home.png" alt="" class="desktop">
<!--<img src="/assets/site/images/home-mobile.png" alt="" class="mobile" height="18">-->
<span>Αρχική</span>
</a>
</li>
<li class="first">
<a href="http://www.pizzafan.gr/el/menu/pizzas">
<img src="/assets/site/images/slice.png" alt="" class="desktop">
<img src="/assets/site/images/slice-mobile.png" alt="" class="mobile" height="18">
<span>Menu</span>
</a>
</li>
<li class="first">
<a href="http://www.pizzafan.gr/el/restaurants">
<img src="/assets/site/images/shopping.png" alt="" class="desktop">
<img src="/assets/site/images/shopping_mobile.png" alt="" class="mobile" height="18">
<span>Καταστήματα</span>
</a>
</li>
<li class="hover" data-toggle="modal" data-target="#callBackModal">
<a href="javascript:void();" class="callmeback">
<img src="/assets/site/images/call.png" alt="" class="desktop">
<img src="/assets/site/images/call_mobile.png" alt="" class="mobile" height="18">
<span>Call Me Back</span>
</a>
</li>
</ul>
</div>
And Then, change your static menu images with this color code: #00742D
just make your menu images with above mention color code.
and you will see same menu items in your scrolling menu check this similar scrolling menu example.. Menu both in simple and scrolling with same menu items/ options.
I trying to put few html elements to show them properly. But could not get how to place them inline.
CODEPEN : CODEPEN DEMO
<div class="jumbotron">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" height="35">
</a>
<div class="media-body">
<h6 class="media-heading"> This is small description of image </h6>
</div>
</li>
</ul>
<h6>Wat more? ....... </h6>
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
Only value
</a>
</li>
<span> Above code should look like this </span>
<img src="http://snag.gy/cPTCL.jpg">