Instantly share code, notes, and snippets.

View Woocommerce friendly single detail page murkup
<section class="single-product">
<div class="container">
<div class="product-thumb">
<img src="media/images/woocommerce/product-detail.png" class="attachment-shop_catalog" alt="Product">
</div>
<div class="single-product-details">
<h2 class="product_title entry-title">Event tee shirt(Maroon)</h2>
<p class="price">
<ins>
<span class="woocommerce-Price-amount amount">
View Woocommerce friendly cart page murkup
<section class="woocommerce-cart cart-content-area">
<div class="container">
<article class="type-page hentry">
<div class="entry-content">
<div class="woocommerce">
<form class="woocommerce-cart-form" action="#" method="post">
<table class="woocommerce-cart-form__contents">
<thead>
<tr>
<th class="product-remove"></th>
View Woocommerce friendly murkup
<div class="woocommerce columns-4 ">
<ul class="products">
<li class="product">
<a href="#" class="woocommerce-LoopProduct-link">
<div class="product-thumb">
<img src="media/images/woocommerce/tshirt-one.png" class="attachment-shop_catalog" alt="Product">
</div>
<h2 class="woocommerce-loop-product__title">Event tee shirt(Maroon)</h2>
<div class="star-rating">
View svgcode
// Convert All Image to SVG
$('img.svg').each(function() {
var $img = $(this),
imgID = $img.attr('id'),
imgClass = $img.attr('class'),
imgURL = $img.attr('src');
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
View hovertab
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Open on mouseover</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
View tab
<div class="tab_area">
<ul class="tabmenu">
<li class="active">
<a href="#creative" data-toggle="tab">menu one</a>
</li>
<li>
<a href="#consultation" data-toggle="tab">menu two</a>
</li>
<li>
<a href="#marketing" data-toggle="tab">menu three</a>
View comment section
<div id="comments" class="comment-area">
<div class="comments-title">
<h2>Comments (03)</h2>
</div>
<ul class="comment-list">
<li class="comment">
<article class="comment-body">
<footer class="comment-meta">
<div class="comment-author"></div>
View inputType
Input Type Description
button Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox Defines a checkbox
color Defines a color picker
date Defines a date control (year, month and day (no time))
datetime-local Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)
email Defines a field for an e-mail address
file Defines a file-select field and a "Browse..." button (for file uploads)
hidden Defines a hidden input field
View accordion code
html code::
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo">
<div class="panel-title">
<p></p>
</div>
</a>
<div id="collapsetwo" class="panel-collapse collapse">
<div class="panel-body">
View jquery
//window height
var windowHeight= $(window).height();
var headerHeight= $('.header-area').height()
$(".hero-area").css('height', windowHeight - headerHeight + 'px');
$(".hero-area .item").css('height', windowHeight - headerHeight + 'px');
$(".hero-area .item img").css('height', windowHeight - headerHeight + 'px');