<!doctype html>
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Display Product for WooCommerce [Shortcode]</title>
<meta name="description" content="An easy way to generate your product list">
<meta name="author" content="Preukson">
<meta name="copyright" content="Preukson">
<meta name="generator" content="Documenter v2.0 http://rxa.li/documenter">
<meta name="date" content="2013-11-17T00:00:00+01:00">
<link rel="stylesheet" href="assets/css/documenter_style.css" media="all">
<link rel="stylesheet" href="assets/css/custom.css" media="screen">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<script src="assets/js/jquery.js"></script>
<script src="assets/js/cufon.js"></script><script src="assets/js/font.js"></script><script>Cufon.replace("h1, h2, h3, h4, h5, h6");</script>
<script src="assets/js/jquery.scrollTo.js"></script>
<script src="assets/js/jquery.easing.js"></script>
<script>document.createElement('section');var duration='450',easing='easeOutExpo';</script>
<script src="assets/js/script.js"></script>
<style>
html{background-color:#F3F3F3;color:#363636;}
::-moz-selection{background:#474747;color:#E8175D;}
::selection{background:#474747;color:#E8175D;}
#documenter_sidebar #documenter_logo{background-image:url(assets/images/image_1.png);}
a{color:#E8175D;}
.btn {
border-radius:3px;
}
.btn-primary {
background-image: -moz-linear-gradient(top, #FF5E9F, #E8175D);
background-image: -ms-linear-gradient(top, #FF5E9F, #E8175D);
background-image: -webkit-gradient(linear, 0 0, 0 FF5E9F% , from(#363636), to(#E8175D));
background-image: -webkit-linear-gradient(top, #FF5E9F, #E8175D);
background-image: -o-linear-gradient(top, #FF5E9F, #E8175D);
background-image: linear-gradient(top, #FF5E9F, #E8175D);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF5E9F', endColorstr='#E8175D', GradientType=0);
border-color: #E8175D #E8175D #bfbfbf;
color:#363636;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
border-color: #FF5E9F #FF5E9F #bfbfbf;
background-color: #E8175D;
}
hr{border-top:1px solid #858484;border-bottom:1px solid #CFCDCD;}
#documenter_sidebar, #documenter_sidebar ul a{background-color:#363636;color:#A8A7A7;http://static.revaxarts-themes.com/noise.gif}
#documenter_sidebar ul a{-webkit-text-shadow:1px 1px 0px #575757;-moz-text-shadow:1px 1px 0px #575757;text-shadow:1px 1px 0px #575757;}
#documenter_sidebar ul{border-top:1px solid #242424;}
#documenter_sidebar ul a{border-top:1px solid #575757;border-bottom:1px solid #242424;color:#A8A7A7;}
#documenter_sidebar ul a:hover{background:#474747;color:#E8175D;border-top:1px solid #474747;}
#documenter_sidebar ul a.current{background:#474747;color:#E8175D;border-top:1px solid #474747;}
#documenter_copyright{display:block !important;visibility:visible !important;}
.dp-step li img{
max-width: 750px;
height: auto;
}
</style>
</head>
<body class="documenter-project-display-product-for-woocommerce-shortcode">
<div id="documenter_sidebar">
<a href="#documenter_cover" id="documenter_logo"></a>
<ul id="documenter_nav">
<li><a class="current" href="#documenter_cover">Start</a></li>
<li><a href="#overview" title="Overview">Overview</a></li>
<li><a href="#features" title="Features">Features</a></li>
<li><a href="#installation" title="Installation">Installation</a></li>
<li><a href="#quick_start" title="Quick Start">Quick Start</a></li>
<li><a href="#layout" title="Layout">Layout</a></li>
<li><a href="#filter" title="Filter">Filter</a></li>
<li><a href="#display_options" title="Display Options">Display Options</a></li>
<li><a href="#skin_animation" title="Skin & Animation">Skin & Animation</a></li>
<li><a href="#template_codex" title="Template Codex">Template Codex</a></li>
<li><a href="#changelog" title="Changelog">Changelog</a></li>
<li><a href="#support" title="support">support</a></li>
</ul>
<div id="documenter_copyright">Copyright Preukson 2013<br>
made with the <a href="http://rxa.li/documenter">Documenter v2.0</a>
</div>
</div>
<div id="documenter_content">
<section id="documenter_cover">
<h1>Display Product for WooCommerce [Shortcode]</h1>
<p>Display Product - Multi-Layout Responsive WooCommerce Plugin</p>
<div id="documenter_buttons">
</div>
<hr>
<ul>
<li>created: 11/16/2013</li>
<li>latest update: 11/17/2013</li>
<li>by: Sureshopress</li>
<li><a href=""></a></li>
<li>email: <a href="mailto:preukson@gmail.com">preukson@gmail.com</a></li>
</ul>
<p></p>
</section>
<section id="overview">
<div class="page-header"><h3>Overview</h3><hr class="notop"></div>
<p>
<span style="font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', sans-serif; font-size: 15px; line-height: 20px; text-align: justify;">If you have the problem concerning to product item display of WooCommerce plug in which can display as required. Plug- In Display Product for woocommerce with shortcode will be an auxiliary equipment which provides you can control product display in everywhere and every form as your desire.</span></p>
</section>
<section id="features">
<div class="page-header"><h3>Features</h3><hr class="notop"></div>
<ul style="border: 0px; margin: 20px 0px 0px 50px; padding-right: 0px; padding-left: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', sans-serif; font-size: 15px; line-height: 20px; text-shadow: white 0px 1px 1px; text-align: justify; list-style: circle;">
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
<span style="letter-spacing: 0px;">Easy-to-use with Shortcode Generator</span></li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">6 Layouts. Ex. Grid ,List ,Table ,Box ,Carousel Box ,Carousel Grid</li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
<span style="letter-spacing: 0px;">Supports all major browsers (including IE7, but for using the Display Product for WooCommerce WP admin we recommend Chrome, Safari or Firefox)</span></li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
<span style="letter-spacing: 0px;">Touch-control for mobile devices</span></li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
<span style="letter-spacing: 0px;">SEO friendly</span></li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
Skin support with 9 skins</li>
</ul>
</section>
<section id="installation">
<div class="page-header"><h3>Installation</h3><hr class="notop"></div>
<h4 id="installation_installation_via_wp_plugin_installer">Installation via WP plugin installer</h4>
<ol style="border: 0px; margin: 20px 0px 0px 50px; padding-right: 0px; padding-left: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', sans-serif; font-size: 15px; line-height: 20px; text-align: justify;">
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
Extract the plugin package on your machine that you downloaded from CodeCanyon.</li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
Hover over the plugins menu item on your left sidebar in your WordPress admin area and select "Add New".</li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
In the new page click on the "Upload" menu item on top of the page.</li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
Choose the "displayproductwoo-2.0.0.installable.zip" file that you extracted from the downloaded package and click "Install Now".</li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
WordPress may ask you to type your FTP login credentials to install the plugin. Click on "Proceed" when you finished.</li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
The plugin is now installed, click on the "Activate Plugin" button.</li>
</ol>
<p>
</p>
<h4 id="installation_installation_via_ftp">Installation via FTP</h4>
<ol style="border: 0px; margin: 20px 0px 0px 50px; padding-right: 0px; padding-left: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', sans-serif; font-size: 15px; line-height: 20px; text-align: justify;">
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
Extract the plugin package on your machine that you downloaded from CodeCanyon.</li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
Find the "displayproductwoo-2.0.2.installable.zip" file in the extracted content and extract it also.</li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
Open your favourite FTP application and connect and navigate to your "/wp-content/plugins/" folder</li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
Copy over the folder extracted from "displayproductwoo-2.0.2.installable.zip" file</li>
<li style="border: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; text-shadow: white 0px 1px 1px; text-align: justify;">
Navigate to your plugins page on your WordPress admin area and click the "Activate" button below LayerSlider WP</li>
</ol>
</section>
<section id="quick_start">
<div class="page-header"><h3>Quick Start</h3><hr class="notop"></div>
<h1>Step 1. Create Shortcode</h1>
<ol class="dp-step">
<li><p>Go to Display product menu from admin menu</p><img src="assets/images/step/1.png" alt=""/></li>
<li><p>Click add new button</p><img src="assets/images/step/2.jpg" alt=""/></li>
<li><p>This is a display product shortcode generator.</p><img src="assets/images/step/3.png" alt=""/></li>
<li><p>Insert a template name and select template > Publish!!</p><img src="assets/images/step/4.png" alt=""/></li>
</ol>
<h1>Step 2. Insert Shortcode to post or page</h1>
<h3>Manual</h3>
<ol class="dp-step">
<li><p>Go to Display product menu from admin menu.You will see the shortcode. Copy this shortcode!</p>
<img src="assets/images/step/5.png" alt=""/></li>
<li><p>Go to post or page and paste it to editor.</p>
<img src="assets/images/step/6.png" alt=""/></li>
</ol>
<h3>D button</h3>
<ol class="dp-step">
<li><p>Go to post or page and click pink D button.</p>
<img src="assets/images/step/7.png" alt=""/></li>
<li><p>Select a template name and click insert product shortcode button.</p>
<img src="assets/images/step/8.png" alt=""/></li>
</ol>
<h3>Visual Composer</h3>
<ol class="dp-step">
<li><p>Go to post or page and click backend editor from visual composer navigate button.</p>
<img src="assets/images/step/9.png" alt=""/></li>
<li><p>Click Add element button</p>
<img src="assets/images/step/10.png" alt=""/></li>
<li><p>Click display product for woocommerce button.</p>
<img src="assets/images/step/11.png" alt=""/></li>
<li><p>Select a template name and click save change button.</p>
<img src="assets/images/step/12.png" alt=""/></li>
</ol>
<h3>Out put</h3>
<img src="assets/images/step/13.png" alt=""/>
<p> </p>
<h3>
Example Shortcode</h3>
<p>
<span style="color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 19px;">[displayProduct id="1"]</span></p>
</section>
<section id="layout">
<div class="page-header"><h3>Layout</h3><hr class="notop">
</div>
<h4>Grid</h4>
<ul style="list-style:none; list-style-type:none">
<li style="list-style:none; list-style-type:none"><img src="assets/images/icon_grid.png" width="85" height="73"><br>
<br>
<strong>Example</strong></li>
<li style="list-style:none; list-style-type:none"><img src="assets/images/Grid.png" width="735" height="844"></li>
</ul>
<h4>List</h4>
<ul style="list-style:none; list-style-type:none">
<li style="list-style:none; list-style-type:none"><img src="assets/images/icon_list.png" width="85" height="73"><br>
<br>
<strong>Example</strong> </li>
<li style="list-style:none; list-style-type:none"><img src="assets/images/List.png" width="734" height="605"></li>
</ul>
<h4>Table</h4>
<ul style="list-style:none; list-style-type:none">
<li style="list-style:none; list-style-type:none"><img src="assets/images/icon_table.png" width="85" height="73"><br>
<br>
<strong>Example</strong> </li>
<li style="list-style:none; list-style-type:none"><img src="assets/images/Table.png" width="735" height="607"></li>
</ul>
<h4>Box</h4>
<ul style="list-style:none; list-style-type:none">
<li style="list-style:none; list-style-type:none"><img src="assets/images/icon_box.png" width="85" height="73"><br>
<br>
<strong>Example</strong></li>
<li style="list-style:none; list-style-type:none"><img src="assets/images/Box.png" width="738" height="609"></li>
</ul>
<h4> Carousel Box</h4>
<ul style="list-style:none; list-style-type:none">
<li style="list-style:none; list-style-type:none"><img src="assets/images/icon_carousel_box.png" width="85" height="73"><br>
<strong><br>
Example</strong> </li>
<li style="list-style:none; list-style-type:none"><img src="assets/images/Carousel Box.png" width="736" height="362"></li>
</ul>
<p> </p>
<h4>Carousel Grid</h4>
<ul style="list-style:none; list-style-type:none">
<li style="list-style:none; list-style-type:none"><img src="assets/images/icon_carousel_grid.png" width="85" height="73"><br>
<br>
<strong>Example</strong></li>
<li style="list-style:none; list-style-type:none"><img src="assets/images/Carousel Grid.png" width="734" height="505"></li>
</ul>
</section>
<section id="filter">
<div class="page-header"><h3>Filter</h3><hr class="notop">
<ul>
<li>Select Product
<ul>
<li>All Product </li>
<li>Filter Product
<ul>
<li>Featured Product</li>
<li>Sales Product</li>
<li>In Stock Product</li>
<li>Out of Stock Product</li>
</ul>
</li>
</ul>
</li>
<li>Product Category
<ul>
<li>All Category</li>
<li>Custom Category </li>
</ul>
</li>
</ul>
</div>
</section>
<section id="display_options">
<div class="page-header"><h3>Display Options</h3><hr class="notop"></div>
<ul>
<li>Title </li>
<li>Excerpt </li>
<li>Thumbnail</li>
<li> Price </li>
<li>Star </li>
<li>SKU </li>
<li>Category </li>
<li>Tag </li>
<li>Add to Cart & Other Button </li>
<li>Sale </li>
<li>Out of Stock </li>
<li>Link to Product Page</li>
</ul>
</section>
<section id="skin_animation">
<div class="page-header"><h3>Skin & Animation</h3><hr class="notop">
<h3>Skin</h3>
<ul>
<li>Default</li>
<li>Blue</li>
<li>Green</li>
<li>Orange</li>
<li>Pink</li>
<li>Dark</li>
<li>Brown</li>
<li>Other</li>
</ul>
<p> </p>
</div>
<h3>Animations</h3>
<ul>
<li>fadeIn</li>
<li>fadeInLeft</li>
<li>fadeInRight</li>
<li>fadeInUp</li>
<li>fadeInDown</li>
<li>rotateIn</li>
<li>rotateInLeft</li>
<li>rotateInRight</li>
<li>rotateInUp</li>
<li>rotateInDown</li>
<li>bounce</li>
<li>bounceInLeft</li>
<li>bounceInRight</li>
<li>bounceInUp</li>
<li>bounceInDown</li>
<li>elasticInLeft</li>
<li>elasticInRight</li>
<li>elasticInUp</li>
<li>elasticInDown</li>
<li>zoomIn</li>
<li>zoomInLeft</li>
<li>zoomInRight</li>
<li>zoomInUp</li>
<li>zoomInDown</li>
<li>jellyInLeft</li>
<li>jellyInRight</li>
<li>jellyInDown</li>
<li>jellyInUp</li>
<li>flipInLeft</li>
<li>flipInRight</li>
<li>flipInUp</li>
<li>flipInDown</li>
<li>flipInV</li>
<li>flipInH</li>
<li>shake</li>
<li>pendulum</li>
</ul>
<p> </p>
</section>
<section id="template_codex">
<div class="page-header"><h3>Template Codex</h3><hr class="notop">
<h2>Usage</h2>
</div>
<p>
<?php echo do_shortcode('<span style="color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 19px;">Product Shortcode</span>');?></p>
<h2> </h2>
<h2>Examples</h2>
<pre>// Use shortcode in a PHP file (outside the post editor).
</pre>
<p><?php echo do_shortcode('<span style="color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 19px;">[displayProduct type="grid" skin="pink"]</span>'); ?></p>
</section>
<section id="changelog">
<div class="page-header"><h3>Changelog</h3><hr class="notop"></div>
<h2>
1.1.4</h2>
<ul>
<li>
first release</li>
</ul>
</section>
<section id="support">
<div class="page-header"><h3>support</h3><hr class="notop"></div>
<p>
If you have any questions about Display Product for WooCommerce plugin contact us on preukson@gmail.com :)</p>
</section>
</div>
</body>
</html>