Browsing Category

Uncategorized

Uncategorized, WordPress Plugins

5 most popular plugins for Ecommerce site 2018

June 20, 2018

Thanks to Wordrpress, now anyone also can build an ecommerce site for their own. There are so many plugins so you can find the right plugin to solve a particular problem on your site, it’s easy to feel like a kid in a candy store.

In this article, we will show you the 5 of the most popular plugins for creating an ecommerce site. Almost these plugins which have the clean user interface and good user experience so the users can easy to use.

Woocommerce (Free, 4+ milion active installations)

It’s very famous plugin, powers 30% of all online stores. No need to worry if your favourite theme is compatible with Woocommerce. Virtually all the themes need to support Woocommerce, even the theme need to be updated when Woocommerce releases a new version.

Woocommerce is completely free plugin. By defalt, it nearly provides all the basic functions for creating an ecommerce site. But if you are finding more advanced features, maybe you can find out here

Demo on Unidash theme

Easy Digital Downloads (Free, 60,000+ active installations)

As its name would suggest, Easy Digital Downloads is a complete eCommerce solution for selling digital products on WordPress. Not like Woocommerce, this plugin just provides a complete system for effortlessly selling your digital products (software, documents, photos, ebooks, songs…).

In the free version, Easy Digital Downloads supports 2 payment gateways only: Paypal Standard and Amazon Payments. You can extend this through their extension. If you are curious, visit here to see all extensions.

Demo on Business Hub theme

JigoShop (Free, 56000+ downloads from their site)

 

Jigoshop supports both physical and downloadable products. Jigoshop eCommerce provides you with the features necessary to complete your shop in minutes. They also supply their own theme, in this case, you want an assurance that theme will be worked perfectly with the plugin, you can choose their theme

It also supports the extensions so you feel free extend their shop

If you are not good at imagining, we suggest you visit their site for demo

WordPress Simple Paypal Shopping Cart (Free, 40000+ active installations)

This plugin is a lightweight solution. It allows you to add an ‘Add to Cart’ button for your product on any posts or pages. It also allows you to add/display the shopping cart on any post or page or sidebar easily. You will be able to create products by using shortcodes dynamically.

 WP-Ecommerce (Free, 20000+ active installations) 

The plugin supports product uploads, a dashboard for managing orders and inventory, and tax management.

WP eCommerce offers three free payment gateways such as ProPay, PayPal, and WorldPay. Other Payment gateways are available courtesy of extensions. WP-Ecommerce allows making WP eCommerce do anything you can imagine with hundreds of available hooks.

We have suggested you the 5 of most popular plugins for building ecommerce site, hope you can find what you want.

CSS, Front-end, Front-end Develop, Uncategorized

Simple tooltip without JavaScript

March 27, 2018

Tooltip is a comment that appears when hovering over an object such as text, images, links, and other interface elements. Content in the tooltip can be text, images or any other information. The purpose of the tooltip is to tell the user what the object is for or to display more information about the object being dragged. We can easily see this application on e-commerce sites. Tooltip often displays additional information about the image, specifications, price of the product you are viewing. The biggest advantage of the tooltip is that it not only displays more information about the object but also saves space on the interface. Let’s learn how to create a tooltip

Create tooltip with extremely simple bootstrap. You simply add the data-toggle = “tooltip” attribute to any element, using the title attribute to define the text that should display the tooltip. Besides, you can also use some other libraries. Today we will guide you to create tooltip without javascript or any library

HTML:

<div class=”container”>

<h1>CSS Directional c-tooltips</h1>

<div class=”demo”>

<p>Data attribute only<a href=”#” data-c-tooltip=”I’m the c-tooltip text”>c-tooltip</a></p>

<p><code>.c-tooltip</code> <a href=”#” class=”c-tooltip” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a></p>

<p><code>.c-tooltip-top</code> <a href=”#” class=”c-tooltip-top” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a></p>

<p><code>.c-tooltip-right</code> <a href=”#” class=”c-tooltip-right” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a></p>

<p><code>.c-tooltip-bottom</code> <a href=”#” class=”c-tooltip-bottom” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a></p>

<p><a href=”#” class=”c-tooltip-left” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a> <code>.c-tooltip-left</code></p>

</div>

</div>

Css:

a:hover {

  text-decoration: none;

}

header,

.demo,

.demo p {

  margin: 4em 0;

  text-align: center;

}

 

/* Base styles for the element that has a c-tooltip */

[data-c-tooltip],

.c-tooltip {

  position: relative;

  cursor: pointer;

}

/* Base styles for the entire c-tooltip */

[data-c-tooltip]:before,

[data-c-tooltip]:after,

.c-tooltip:before,

.c-tooltip:after {

  position: absolute;

  visibility: hidden;

  -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;

  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

  opacity: 0;

  -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

  -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

  -webkit-transform: translate3d(0, 0, 0);

  -moz-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

  pointer-events: none;

}

/* Show the entire c-tooltip on hover and focus */

[data-c-tooltip]:hover:before,

[data-c-tooltip]:hover:after,

[data-c-tooltip]:focus:before,

[data-c-tooltip]:focus:after,

.c-tooltip:hover:before,

.c-tooltip:hover:after,

.c-tooltip:focus:before,

.c-tooltip:focus:after {

  visibility: visible;

  -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;

  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

  opacity: 1;

}

/* Base styles for the c-tooltip’s  arrow */

.c-tooltip:before,

[data-c-tooltip]:before {

  z-index: 1001;

  border: 6px solid transparent;

  background: transparent;

  content: “”;

}

/* Base styles for the c-tooltip’s  */

.c-tooltip:after,

[data-c-tooltip]:after {

  z-index: 1000;

  padding: 8px;

  width: 160px;

  background-color: #000;

  background-color: rgba(51, 51, 51, 0.9);

  color: #fff;

  content: attr(data-c-tooltip);

  font-size: 14px;

  line-height: 1.2;

}

[data-c-tooltip]:before,

[data-c-tooltip]:after,

.c-tooltip:before,

.c-tooltip:after,

.c-tooltip-top:before,

.c-tooltip-top:after {

  bottom: 100%;

  left: 50%;

}

[data-c-tooltip]:before,

.c-tooltip:before,

.c-tooltip-top:before {

  margin-left: -6px;

  margin-bottom: -12px;

  border-top-color: #000;

  border-top-color: rgba(51, 51, 51, 0.9);

}

/* align top/bottom c-tooltips */

[data-c-tooltip]:after,

.c-tooltip:after,

.c-tooltip-top:after {

  margin-left: -80px;

}

[data-c-tooltip]:hover:before,

[data-c-tooltip]:hover:after,

[data-c-tooltip]:focus:before,

[data-c-tooltip]:focus:after,

.c-tooltip:hover:before,

.c-tooltip:hover:after,

.c-tooltip:focus:before,

.c-tooltip:focus:after,

.c-tooltip-top:hover:before,

.c-tooltip-top:hover:after,

.c-tooltip-top:focus:before,

.c-tooltip-top:focus:after {

  -webkit-transform: translateY(-12px);

  -moz-transform: translateY(-12px);

  transform: translateY(-12px);

}

/* Left */

.c-tooltip-left:before,

.c-tooltip-left:after {

  right: 100%;

  bottom: 50%;

  left: auto;

}

.c-tooltip-left:before {

  margin-left: 0;

  margin-right: -12px;

  margin-bottom: 0;

  border-top-color: transparent;

  border-left-color: #000;

  border-left-color: rgba(51, 51, 51, 0.9);

}

.c-tooltip-left:hover:before,

.c-tooltip-left:hover:after,

.c-tooltip-left:focus:before,

.c-tooltip-left:focus:after {

  -webkit-transform: translateX(-12px);

  -moz-transform: translateX(-12px);

  transform: translateX(-12px);

}

/* Bottom */

.c-tooltip-bottom:before,

.c-tooltip-bottom:after {

  top: 100%;

  bottom: auto;

  left: 50%;

}

.c-tooltip-bottom:before {

  margin-top: -12px;

  margin-bottom: 0;

  border-top-color: transparent;

  border-bottom-color: #000;

  border-bottom-color: rgba(51, 51, 51, 0.9);

}

.c-tooltip-bottom:hover:before,

.c-tooltip-bottom:hover:after,

.c-tooltip-bottom:focus:before,

.c-tooltip-bottom:focus:after {

  -webkit-transform: translateY(12px);

  -moz-transform: translateY(12px);

  transform: translateY(12px);

}

/* Right */

.c-tooltip-right:before,

.c-tooltip-right:after {

  bottom: 50%;

  left: 100%;

}

.c-tooltip-right:before {

  margin-bottom: 0;

  margin-left: -12px;

  border-top-color: transparent;

  border-right-color: #000;

  border-right-color: rgba(51, 51, 51, 0.9);

}

.c-tooltip-right:hover:before,

.c-tooltip-right:hover:after,

.c-tooltip-right:focus:before,

.c-tooltip-right:focus:after {

  -webkit-transform: translateX(12px);

  -moz-transform: translateX(12px);

  transform: translateX(12px);

}

/* Move directional arrows down a bit for left/right c-tooltips */

.c-tooltip-left:before,

.c-tooltip-right:before {

  top: 3px;

}

/* Vertically center c-tooltip content for left/right c-tooltips */

.c-tooltip-left:after,

.c-tooltip-right:after {

  margin-left: 0;

  margin-bottom: -16px;

}

Link demo:https://jsfiddle.net/TrinhThang/5p0f3r1n/1/