Introduction to jCanvas: jQuery Meets HTML5 Canvas

HTML5 lets you draw graphics straight into your web page using the <canvas> element and its related JavaScript API.

In this post, I’m going to introduce you to jCanvas, a free and open source jQuery-based library for the HTML5 Canvas API.

If you develop with jQuery, jCanvas makes it easier and quicker to code cool canvas drawings and interactive applications using jQuery syntax.

What is jCanvas?

The jCanvas website explains:

jCanvas is a JavaScript library, written using jQuery and for jQuery, that wraps around the HTML5 canvas API, adding new features and capabilities, many of which are customizable. Capabilities include layers, events, drag-and-drop, animation, and much more.

The result is a flexible API wrapped up in a sugary, jQuery-esque syntax that brings power and ease to the HTML5 canvas.

jCanvas enables you to do everything you can do with the native Canvas API and more. If you prefer, you can also use native HTML5 Canvas API methods with jCanvas. The draw() method serves just this purpose. Furthermore, you can easily extend jCanvas with your own methods and properties using its extend() feature.


Adding jCanvas to Your Project

To include jCanvas in your project, download the script from the official website or the GitHub page, then include it in your project folder. As mentioned, jCanvas needs jQuery to work, so be sure to include that too.

Your project’s script files will look something like this:

[code language=”html”]
<script src=”js/jquery.min.js></script>
<script src=”js/jcanvas.min.js></script>
<script src=”js/script.js></script>

The last one would be where you put your custom JavaScript using the jCanvas API. Now let’s take jCanvas for a test drive.

Setting up the HTML Document

To follow along with the examples, start by adding a <canvas> element tag to a basic HTML5 document.

[code language=”html”]
<canvas id=”myCanvas” width=”600″ height=”300″>
<p>This is fallback content
for users of assistive technologies
or of browsers that don’t have
full support for the Canvas API.</p>

Here are a few points of interest about the code snippet above.

  • By default, the dimensions of the <canvas> drawing surface are 300px by 150px. You can modify this default size in the width and height attributes inside the element’s markup.
  • Adding an id attribute is not required but will be an easy way to access the element with JavaScript.
  • Content inside the <canvas> element is just a bitmap image. This makes it inaccessible to users of assistive technologies. Also, browsers that don’t have support for the Canvas API will not be able to access its content or interact with it in any way. Therefore, while techniques aiming to make <canvas> more accessible are yet to be made available, adding some fallback content for this category of users is the recommended practice.

If you were to use the native Canvas API, your JavaScript would look something like this:

[code language=”javascript”]
var canvas = document.getElementById(‘myCanvas’),
context = canvas.getContext(‘2d’);

The variable context in the code above stores a reference to the 2D context property of the Canvas object. It’s this property that enables you to access all other properties and methods exposed by the HTML5 Canvas API.

If you’d like to learn more about the topic, HTML5 Canvas Tutorial: An Introduction by Ivaylo Gerchev is a great read.

jCanvas methods and properties already contain a reference to the 2D context, therefore you can jump straight into drawing.

Drawing Shapes with jCanvas

Most jCanvas methods accept a map of property-value pairs that you can list in any order you like.

Let’s start by drawing a rectangle shape.

The Rectangle Shape

This is how you draw a rectangle shape using the drawRect() method of the jCanvas object.

[code language=”javascript”]
// Store the canvas object into a variable
var $myCanvas = $(‘#myCanvas’);

// rectangle shape
fillStyle: ‘steelblue’,
strokeStyle: ‘blue’,
strokeWidth: 4,
x: 150, y: 100,
fromCenter: false,
width: 200,
height: 100

The snippet above caches the canvas object into a variable called $myCanvas. The properties inside the drawRect() method are mostly self-explanatory, but here’s a brief rundown:

  • fillStyle sets the rectangle’s background color;
  • strokeStyle sets its border color;
  • strokeWidth sets the shape’s border width;
  • x and y set the coordinates corresponding to the rectangle’s horizontal and vertical position inside the canvas. A value of 0 for x and of 0 for y, i.e., (0, 0), corresponds to the top left corner of the canvas. The x coordinates increase to the right and the y coordinates increase towards the bottom of the canvas. When drawing the rectangle, by default, jCanvas takes the x and y coordinates to lie at the center of the shape.
  • To change this so that x and y correspond to the rectangle’s top left corner, set the fromCenter property to false.
  • Finally, the width and height properties set the dimensions of the rectangle.

Rectangle drawn on canvas with explanation of canvas coordinates system

Here is a demo with the rectangle shape:

See the Pen jCanvas example: Rectangle by SitePoint (@SitePoint) on CodePen.

Arcs and Circles

Arcs are portions of the rim of a circle. With jCanvas, drawing arcs is just a matter of setting the desired values for a few properties inside the drawArc() method:

[code language=”javascript”]
strokeStyle: ‘steelblue’,
strokeStyle: ‘blue’,
strokeWidth: 4,
x: 300, y: 100,
radius: 50,
// start and end angles in degrees
start: 0, end: 200

Drawing arcs involves setting a value for the radius property as well as the start and end angles in degrees. If you’d like the direction of your arc to be counterclockwise, add the ccw property to the code above and set it to true.

Continue reading %Introduction to jCanvas: jQuery Meets HTML5 Canvas%

Source: Sitepoint

All You Need to Know About Estonia’s E-Residency Program

Estonia's Capitol, Tallin

Estonia has become the first country in the world to offer a transnational digital identity. It’s attracted the attention of entrepreneurs and digital nomads worldwide, but there’s still a huge amount of confusion about the benefits of the E-Residency Program and what e-residency actually means. Let’s take a look.

What Is E-Residency?

It’s a way of accessing Estonia’s government services without ever actually visiting Estonia.


You can start a company with all the benefits of the EU legal framework as well as remotely access low maintenance administrative tools such as tax declaration and company formation. In 2009, Estonia broke a world record for the “fastest time to register a new legal entity” – 18 minutes.

In short, this beautiful Baltic country is offering remotely accessible services that would normally only be available to actual residents of Estonia. For digital nomad entrepreneurs that don’t have a fixed location, this is a huge deal and a big step towards full location-independence, and to top it off, it comes with minimal bureaucracy and a clear, desirable tax framework.

What Is E-Residency Not?

E-Residency does not mean actual residency. It’s not a visa, a right to remain, an identification card or citizenship, nor does it come with any of the social rights that Estonians locals have.

More importantly, it’s not a way of avoiding tax in any way, although I will elaborate on the tax benefits later on.

What Are the Benefits of Becoming An Estonian E-Resident?

Here’s a clearer, more concise list of benefits:

  • Very low administrative burden
  • 0% corporation tax (but 20% income tax)
  • A euro-currency or multi-currency bank account
  • More trust due to incorporating in a EU state
  • Access to more online services such as PayPal
  • Modern banking that can be managed remotely
  • You specifically want a business in Estonia
  • Save time and money by using government software

EU Benefits

But here’s the big question, do you need to be an Estonian e-resident to have all of this? Well, the answer to that is no. You can set up a more cost-effective international bank account to avoid currency conversion fees, and you can start a company in a country with minimal accounting requirements or zero tax.

However, depending on where you reside and where you’re setting up shop, it can be difficult; usually, it’s impossible without having to immigrate or at least spend time in the country while you set up a bank account and sign documents.

Bottom line: becoming a resident or starting a company in another country usually feels like a bit of a hack. It’s possible, but few countries have actually made the effort to make the ordeal convenient. E-residency is the solution for the digital era.

Continue reading %All You Need to Know About Estonia’s E-Residency Program%

Source: Sitepoint

How to Make Your Users Enjoy Waiting

Waiting is typically an enormously displeasurable activity: It’s unproductive, boring, and even tense. And so, if you ask users to wait, many of them will refuse. According to a study by Forrester Research, almost half of consumers expect a site to load in two seconds—and if it takes longer than three, 40% leave. So, should […]

Continue reading %How to Make Your Users Enjoy Waiting%

Source: Sitepoint

Hackable PDF Typesetting in Ruby with Prawn

Installing Prawn

If you’re running a Rails operation, LaTeX isn’t the most convenient approach for generating documents. There are some gems available, but it’s really nice when the logic and the presentation are in the same language. That’s what Prawn supplies.

First, we need to install the Prawn gem:

gem install prawn

We can verify that Prawn is working with the following test:

require "prawn"

Prawn::Document.generate("hello.pdf") do
  text "Hello World!"

Making Text

Most of Prawn’s commands are fairly minimalistic and what you would expect:

require "prawn"

Prawn::Document.generate("styling_text.pdf") do
  text "Default text styling"
  text "Blue 16pt Helvetica", size: 16, font: "Helvetica", color: "0000FF"
  text "Aligned Center", align: :center

  font_size 12
  font "Courier" do
    text "Size 12 Courier"
    font_size 10 do
      text "Slightly smaller Courier"
  text "Default font size 12"

  font "Helvetica"
  3.times do |i|
    text "Helvetica with leading 10 line #{i}", leading: 10

Continue reading %Hackable PDF Typesetting in Ruby with Prawn%

Source: Sitepoint

Build Your Own App from Scratch with This $39 Course for Beginners

Build your own app from scratch with this $39 course for beginners

Got an app idea…and not much else? No problem—the Full Stack iOS 9 School will take you from idea to finished product, no experience required. Get it for $39 at SitePoint Shop.

Get 16 online classes, 100 videos, and 30 hours of content that teach you how to turn an idea into a real app. You’ll get hands-on experience in everything from prototyping in Xocde to Swift 2 programming as you build 10 real apps for practice—and for your portfolio. You’ll complete the work at your own pace and even get access to a forum to get your questions answered as they come up.

Make that app idea happen. Get the Full Stack iOS 9 School for $39, a savings of 80%.

Continue reading %Build Your Own App from Scratch with This $39 Course for Beginners%

Source: Sitepoint

20 Useful WordPress Forms Available on CodeCanyon

Just about every WordPress-based website has some kind of online form.

They range from the most basic—contact forms, polls, and email subscriber submissions—to more advanced forms like payment, calculator, and user-submitted content.

WordPress users often use free plugins like Contact Form 7 or those included in Jetpack, while others may even take the plunge for a Gravity Forms subscription. But what other solutions are there?

Let’s start by taking a look at 20 of the most popular WordPress forms available on Envato Market.

1. FormCraft – Premium WordPress Form Builder

If you need to craft a form that’s more than your standard contact form, this is what you’re looking for.

FormCraft’s feature set includes powerful options that are sure to meet almost anything you need to build a WordPress form.

FormCraft - Premium WordPress Form Builder

Here are some of the highlights:

  • form validation
  • conditional logic
  • customized notifications
  • AJAX-powered interface
  • submissions in your inbox
  • drag and drop form builder
  • forms presented as popup, slide up, fly in, or widget
  • and much more

You’ll find it fully responsive, with retina-optimized images for fields. And if you need to integrate multi-page forms and payment gateways? You can look to the available FormCraft – Premium WordPress Form Builder add-ons.

2. Quform – WordPress Form Builder

Quform does a good job setting itself apart from other WordPress form plugins.

The easy to use drag and drop interface and flexible styling are where this WordPress form plugin shines the most.

Fully responsive and with the new Google reCAPTCHA, you’ll find this and more:

  • conditional logic
  • fully translatable
  • live design preview
  • drag and drop interface
  • edit CSS in the form builder admin
  • includes three themes with five variations
  • export submitted data to Excel/OpenOffice
  • entries submitted within WordPress and via email

The unique theming system makes it easy to make your forms look great, but without sacrificing many of the features users are looking for in a premium WordPress form plugin like Quform.

3. WordPress Form Builder – Survey & Quiz – FSQM Pro

The WordPress Form Builder – Survey & Quiz – FSQM Pro focus is beyond a simple online quiz solution.

Packed with plenty of form-building tools, this stylish plugin brings a unique feature set to WordPress forms.

WordPress Form Builder - Survey  Quiz - FSQM Pro

This is the ultimate online survey and quiz form-building plugin.

Build your forms with the drag and drop form builder, comb through detailed survey analytics, and set up custom redirection based on user scores.

Features also include:

  • quiz timer
  • file upload
  • user portal
  • auto-responder
  • conditional logic
  • star and scale ratings
  • standalone form pages
  • much more

With 35 form elements and 30 themes, you’ll find WordPress Form Builder – Survey & Quiz – FSQM Pro the best way to survey and collect user submitted data.

4. NEX-Forms – The Ultimate WordPress Form Builder

NEX-Forms – The Ultimate WordPress Form Builder may be just that.

The ultimate.

 NEX-Forms - The Ultimate WordPress Form Builder

At first glance, you’ll see features you would expect:

  • math logic
  • drag and drop
  • fully responsive
  • conditional logic
  • multi-step forms
  • email autoresponder
  • etc…

But when you begin to dig a little deeper, you’ll see “the ultimate” isn’t just over-zealous marketing.

More notable features include:

  • popup forms
  • 660+ vector icons
  • 50+ form elements
  • 1200+ Google Fonts
  • Font Awesome integration
  • more

Finally, it’s the NEX-Forms – The Ultimate WordPress Form Builder grid layout system that gives you a lot of drag and drop control with your form layout.

5. WP Estimation & Payment Forms Builder

This plugin is great for freelancers and small businesses, offering itemized products and services. And WP Estimation & Payment Forms Builder can be used in conjunction with both Gravity Forms and WooCommerce and set up using PayPal for payment.

WP Estimation  Payment Forms Builder

Setting up a cost estimation form with payment and subscription option has never been this easy. Additional features include:

  • Uses a powerful conditional system.
  • You can add a legal notice on the last step.
  • Display a summary before the form is submitted.
  • A progress bar can show either the total price or step number.
  • Call the form with a CSS class on the link or a WordPress shortcode.
  • And more!

The WP Estimation & Payment Forms Builder fills a niche in the WordPress form plugin space and fills it well.

6. ARForms: WordPress Form Builder Plugin

This WordPress form plugin hits a nice mix of features and easy customization.

ARForms is integrated with Twitter Bootstrap, supports seven autoresponder systems, and is fully compatible with

ARForms WordPress Form Builder Plugin

You can embed your forms in the page or choose to have them fly, stick, or pop up on page load. A great option for newsletter signups and announcements.

Additional features include:

  • CSV export
  • form analytics
  • conditional logic
  • supports Google Fonts
  • multi-column form support
  • password strength indicator
  • collection of commonly used form templates
  • and more

There are 24 elements and 500+ icons included with ARForms: WordPress Form Builder Plugin as well as a full-featured styling tool for CSS customization.

And if this isn’t enough to get the job done, there are many helpful add-ons available for this full-featured form builder.

7. Usernoise Pro Modal Feedback & Contact Form

Capturing user and customer feedback is quick and easy with this modal feedback form.

The Usernoise Pro Modal Feedback & Contact Form has a great minimal style and is highly configurable.

Usernoise Pro Modal Feedback  Contact Form

You can:

  • Use the four built-in categories or edit them as you like.
  • Reply to feedback via email when you receive a notification.
  • Insert a shortcode into any page to display feedback discussions.

And it integrates with Akismet to handle spam.

There aren’t a lot of bells and whistles with the Usernoise Pro Modal Feedback & Contact Form, but it is a powerful way to connect and collect feedback.

8. Ninja Kick: WordPress Contact Form Plugin

Ninja Kick: WordPress Contact Form Plugin puts an extra kick into your WordPress forms.

You can use this as a stand-alone contact form or use its unique styling and effects in conjunction with popular form plugins like Contact Form 7, Gravity Forms, and others.

Ninja Kick WordPress Contact Form Plugin

Website users can immediately call up the contact form without having to wait for a page to load—complete with slide-in animation.

It features:

  • MailChimp opt-in
  • responsive design
  • 30 built-in backgrounds
  • color picker for easy styling
  • supports swiping on mobile devices
  • and more

This form plugin does support WPML, but it should be noted that RTL needs to be customized to work properly in Google Chrome.

Ninja Kick: WordPress Contact Form Plugin is a stylish, fast-loading plugin that works great as a contact or newsletter submission form—or even more complicated forms built using more robust WordPress form plugins.

9. Gravity Forms Styler

Do you use Gravity Forms? Then take a look at this plugin.

The Gravity Forms Styler makes it easy to customize and style your Gravity Forms. This is not a standalone plugin for building forms, but is used in conjunction with Gravity Forms to easily style forms from within the WordPress Admin.

Gravity Forms Styler

You can customize all fields, titles, buttons, backgrounds, and more. It even comes with a shortcode builder and widget.

Styling your Gravity Forms is easy with Gravity Forms Styler.

10. Form Generator – WordPress Form Builder

This robust form plugin uses all standard HTML elements and six advanced fields with format and syntax validation.

You can completely style Form Generator with drag and drop tools and an easy to use visual form builder.

Form Generator - WordPress Form Builder

But don’t let the “easy to use” tools deter you from its functionality.

Options include, but are certainly not limited to:

  • SMTP sending
  • access 600+ Google fonts
  • customize your captcha field
  • notifications can also be sent via CC and BCC
  • date picker in 34 languages and 8 date formats

There are also several file upload options, including the ability to receive file uploads as email attachments.

The Form Generator – WordPress Form Builder has a strong feature set, while being easy to customize and configure.

11. TotalPoll Pro – WordPress Poll Plugin

One does not simply set up a poll on WordPress.

TotalPoll Pro is a pro poll plugin for WordPress—boasting over 70 features.

TotalPoll Pro - WordPress Poll Plugin

Fully responsive and easy to include in WordPress using a shortcode, widget, or direct link, additional features include:

  • custom fields
  • beautiful templates
  • six different anti-cheating layers
  • reCaptcha service to protect against bots
  • display archived poll results and export results as CSV
  • and much more

Several language translations are available, and if you’re planning on publishing many polls or building a site focused on polling, the TotalPoll Pro – WordPress Poll Plugin is SEO friendly.

12. ez Form Calculator – WordPress Plugin

The ez Form Calculator – WordPress Plugin can be used with WooCommerce and PayPal.

A few use case scenarios include:

  • real estate
  • event managers
  • media agencies
  • charity organizations
  • freight costs
  • photography studios
  • etc…
ez Form Calculator - WordPress Plugin

Build your forms using the drag and drop editor or use the import/export feature.

Additional features include:

  • discounts
  • file uploads
  • conditional logic
  • MailChimp integration
  • advanced calculation and backend security verification

Whether you’re using ez Form Calculator – WordPress Plugin as your primary form or along with WooCommerce, you’ll find that it really adds up.

13. AJAX Contact Forms (for WordPress)

AJAX Contact Forms (for WordPress) is a basic jQuery-based, AJAX-powered contact form.

With a curious twist.

You can easily integrate forms into WordPress pages, use anti-spam captcha, and set up multiple forms in the WordPress Admin; but what really sets AJAX Contact Forms (for WordPress) apart from the rest is Twitter integration:

  • submission notifications via Twitter Direct Message (as well as email)

A unique feature for this basic AJAX powered contact form.

14. Event Booking Pro: Forms Manager Add On

Event Booking Pro: Forms Manager Add On extends the power of Event Booking Pro, giving you the ability to add custom fields to your event booking pages.

This is an add-on, so Event Booking Pro is required for this to work.

Event Booking Pro Forms Manager Add On

The Event Booking Pro: Forms Manager Add On includes many input types, including:

  • text
  • email
  • select
  • text area
  • static text
  • check box
  • radio buttons
  • terms and conditions

If you are already using Event Booking Pro, using the Event Booking Pro: Forms Manager Add On really expands its usability.

15. Adults Only Age Verification System for WordPress

Here’s a straightforward way to place an age gate between web users and content.

The Adults Only Age Verification System for WordPress has multiple verification methods, is SEO friendly, and works with just about any WordPress theme.

Adults Only Age Verification System for WordPress

Verification methods include:

  • simple links
  • input fields
  • drop down

You can also change the order of dates. For example: MM/DD/YYYY or DD/MM/YYYY

Whether you’re using shortcodes or one of the three included templates, Adults Only Age Verification System for WordPress can send users to the right content.

16. Storage for Contact Form 7

Extend the power of Contact Form 7 with Storage for Contact Form 7.

This plugin add-on is a good way to avoid servers mishandling Contact Form 7 submissions and losing them into the Black Hole of the Internet.

Just to be clear, Contact Form 7 is required for this to work.

Storage for Contact Form 7

All form submissions are stored in your WordPress database—including attachments. You can also have submissions sent to you via email, but all data is collected in the Admin and can also be exported to CSV.

Additional data collected by Storage for Contact Form 7 includes:

  • time
  • date
  • email
  • subject
  • IP address
  • attachments
  • URL referrer
  • and more

This plugin add-on is a great way to extend Contact Form 7’s usability.

17. Exporter for FSQM Pro – Reports & Submissions

This is an add-on plugin; a very nice addition to WordPress Form Builder – Survey & Quiz – FSQM Pro.

Exporter for FSQM Pro – Reports & Submissions takes the user data collected and imports it into a number of useful formats.

Exporter for FSQM Pro - Reports  Submissions

Exportable formats include:

  • PDF
  • HTML
  • CSV
  • XLS
  • XLSX

You can also include charts with most export formats.

There are some extra customizations you can make to your PDF exports—handy for quick reports—but most users will find the raw data exports extremely useful.

Exporter for FSQM Pro – Reports & Submissions is a very useful add-on for the WordPress Form Builder – Survey & Quiz – FSQM Pro plugin.

18. AccessPress Anonymous Post Pro

Building a WordPress site that allows visitors to submit standard WordPress posts or post types, whether they’re logged in or not, requires a particular set of features.

AccessPress Anonymous Post Pro has that exact feature set.

AccessPress Anonymous Post Pro

In full HTML5 responsiveness, you can customize a front-end posting form with all the right options. It’s like having several plugins in one.

The included options and features are:

  • captcha
  • post details
  • custom fields
  • email notifications
  • field type selectors
  • media uploading tools
  • media library integration
  • drag and drop form builder
  • post types and taxonomies
  • templates and styling features
  • select or exclude categories and tags
  • and more

There are other plugins like this, but you’ll be hard pressed to find one that offers this much flexibility and options.

AccessPress Anonymous Post Pro does a great job of bringing everything that’s in the post admin side of WordPress and bringing it to the front end.

19. Frontend Publishing Pro

Much like the previous plugin, Frontend Publishing Pro brings the back end of WordPress to the front.

Configure an unlimited number of forms—with your settings and restrictions for each form—and easily add them to any page using a shortcode.

Frontend Publishing Pro

You have the option to give users full access to their own post management, including view, edit, and delete. Users can upload files within the limits you put in place, such as max upload size and file type.

Other features include:

  • custom fields
  • layered security
  • email notifications
  • CopyScape integration
  • drag and drop form builder
  • supports any post type and custom taxonomies
  • more!

Quickly and easily set up front-end publishing with Frontend Publishing Pro.

20. Filter Custom Fields & Taxonomies

WordPress sites using custom fields and taxonomies—online shops and real estate websites, for example—need an easy and effective way to make the content easy for the user to find.

That’s exactly what Filter Custom Fields & Taxonomies does.

Filter Custom Fields  Taxonomies

This plugin is fully customizable, can be placed via shortcode or widget, and has some great options:

  • range slider
  • map search
  • conditional fields
  • select, radio, and checkboxes
  • full text search with highlighting
  • min/max/equal or like searches

You can decide the results order, use hidden fields, and more.

Filter Custom Fields & Taxonomies will help connect users with the data they are searching for.


There are many different approaches to WordPress forms, each approach trying to solve a different problem. There are WordPress form plugins that make it easier to customize your forms, communicate with customers, collect survey data, and just about everywhere in between.

If a WordPress form plugin that you need wasn’t listed here, see what else you can find at Envato Market.

Otherwise, you might consider coding your own. Envato Tuts+ has WordPress tutorials, eBooks, and courses. Try WordPress Plugin Development Essentials or maybe the WordPress Hacker’s Guide to the Galaxy. Some helpful eBooks include Useful Tricks and Techniques for WordPress and Mastering WordPress.

What are some creative WordPress forms you’ve used or created?

Source: Nettuts Web Development

How to Make WooCommerce Product Attributes More Prominent

Final product image
What You’ll Be Creating

WooCommerce product attributes are a really useful feature, but by default they’re hidden quite a way down the page, in the Additional Information section. Depending on your theme, they might not be visible until the user clicks on a tab, which means many users may not look at them. 

Sometimes it’s more helpful to have them listed in the upper portion of the single product page along with product categories. In this tutorial I’ll show you how to move product attributes from the Additional Information tab to the top section of the page.

What You’ll Need

To follow along, you’ll need:

  • A development installation of WordPress.
  • A code editor.
  • WooCommerce installed and activated.
  • Products added—I’ve imported the dummy product data that comes with WooCommerce; for details of how to do this, see this guide.
  • One or more product attributes added (the built-in color attribute with the dummy data doesn’t work in the standard way).
  • A WooCommerce-compatible theme activated—I’m using Storefront.

To add the attributes nearer the top of the single product page, we’ll do the following things:

  1. Create an empty plugin and activate it.
  2. Look at the WooCommerce source code to identify the filter that controls product attributes being added to the tabs towards the bottom of the page.
  3. Add a function hooked to that filter to remove the tab for attributes.
  4. Look at the source files again to identify the hook that pulls in content at the top of the page.
  5. Hook a function to that instead.

Let’s start by taking a look at the way that our product attributes will be displayed by default. I’ve created an attribute called Size and I’ve added three values to it: small, medium and large. Here it is displayed in the Additional Information section at the bottom of a product page:

WooCommerce product page - default with product attributes tab

We want to move those product attributes from the bottom of the screen up to the top left-hand side, below the product description.

Creating the Plugin

In your wp-content/plugins folder, create a new file. I’m calling mine woocommerce-prominent-product-attributes.php. Open that file and add the following to it:

Save your file and go to the Plugins screen in your WordPress dashboard. Activate the plugin.

WooCommerce Source Code: Product Attribute Display

Let’s start by identifying the function and hook used to output product attributes. This involves journeying through a few of the plugin files:

  1. The template that outputs the single product page is woocommerce/templates/single-product.php.
  2. Within that file, there’s a get_template_part() call to the content-single-product.php file.
  3. In that file there’s an action called woocommerce_after_single_product_summary. Three functions are hooked to it: the one we need to look at is woocommerce_output_product_data_tabs().
  4. You can find the woocommerce_output_product_data_tabs() function in woocommerce/includes/wc-template-functions.php.
  5. The function uses wc_get_template() to fetch another template part, in this case wooocommerce/templates/single-product/tabs/tabs.php.
  6. In that file (we’re getting there, I promise!) there’s a variable called $tabs, which is defined as apply_filters( 'woocommerce_product_tabs', array() );.
  7. So to remove the product attributes tab, we need to create a function removing that tab and hook it to the woocommerce_product_tabs filter. 

Phew! We got there in the end.

Removing Product Attributes From the Tabs Using a Filter

Luckily, the WooCommerce documentation provides guidance on how to remove tabs using this filter, which makes our job a bit easier.

In your plugin file, add this code:

This function has $tabs as its object because that’s the variable we’re working with. It removes the 'additional_information' tab from the array of values stored by the $tabs variable. Note that I’ve used a high numbered priority of 100 when hooking my function to ensure it fires after the functions that add the tabs in the first place.

Save your file and refresh your product page:

WooCommerce product page - product attributes tab removed

So that’s the tab removed. Now we need to add the product attributes back in at the top of the page.

Finding the Place in the Code to Add Attributes

Once again we need to identify where in the code we need to add a function to display product attributes. In other words, we need to find an action hook.

Going back to the content-single-product.php file, there’s a hook called woocommerce_single_product_summary which is used by seven functions that each output a different bit of data about the product, namely:

  • the title
  • the rating
  • the price
  • the excerpt (i.e. the short description)
  • the add to cart button
  • metadata
  • sharing links

I want to add my attributes in the section for metadata, so let’s take a look at the function that outputs that.

The function is in the wc_template_functions.php file, and it uses wc_get_template() to call another include file, woocommerce/templates/single/product/meta.php.

In the meta.php file, there is code to output metadata about the product, with the woocommerce_product_meta_start hook before it and the woocommerce_product_meta_end hook after it. So we can use one of those two hooks to output our product attributes. Let’s use the last one, as that will make the attributes appear after the categories and tags.

Writing a Function to Output Product Attributes

Duplicating the Code Already Provided by WooCommerce

To output a list of taxonomy terms for our product, we can use the function that’s provided by WooCommerce called list_attributes(). You’ll find this function in the templates/single/product/tabs/additional-information.php file.

In your plugin file, add this:

Note that you don’t need to use a priority as WooCommerce doesn’t have any other functions hooked to that action hook.

Now refresh your product page:

WooCommerce product page - product attributes with product short description in table

Now the attributes are displayed. They’re using a tab-like interface with the Storefront theme as that’s what’s set up for the default Additional Information tab, and the output HTML uses a table, which provides the default layout. 

Alternative Approach Without a Table

That table isn’t ideal: it would be better to have a list of product attributes, to match the list of product categories above it. Let’s do that.

WooCommerce stores attributes as custom taxonomies. The slug you create for each of your attribute values is preceded by a pa_ suffix when the attribute is stored to the database. 

However, it doesn’t store these taxonomies in the wp_term_taxonomy table and wp_terms table as you would when registering a normal custom taxonomy in WordPress. Instead, WooCommerce creates tables for the attributes, meaning the data is stored differently. This means that we have to take a more roundabout approach to accessing the label for each taxonomy when outputting that list.

In your tutsplus_list_attributes() function, remove the two lines inside the function. Replace them with this code:

Here’s what that code does:

  • It defines the global $product variable (which is an object of our function).
  • It uses $product->get_attributes() to fetch all of the attributes for this product.
  • If there are none, it does nothing.
  • If there are attributes, it opens a foreach loop for each of them.
  • In order to fetch the label, it uses the wp_get_post_terms() and get_taxonomy() functions to fetch the array of data relating to this taxonomy for this post.
  • It then echoes out the name (or label) of the taxonomy (or attribute), followed by a list of links to the archives for each of the values using get_the_term_list().

The attributes are now displayed in a list:

WooCommerce product page - product attributes with product short description in list

Much better!

Credit: Thanks to Isabel Castillo for the code to display the attribute label. 


Moving product attributes in the product page takes a bit of work delving into the WooCommerce source code and identifying the template files, hooks and functions that play a part in displaying product attributes.

By finding the filter that controls which tabs are output, we were able to remove the Additional Information tab, which removed attributes from the bottom of the screen. Then by adding a new function to a hook higher up in the page, we were able to output them where we wanted.

If you’re interested in incorporating other WooCommerce functionality into your site, check out what’s available in the marketplace, as well.

Source: Nettuts Web Development

Create a Custom Shipping Method in OpenCart: Part Two

In this series, we’re discussing the implementation of a custom shipping method module in OpenCart. In the first part, we enabled and configured our custom shipping method using the configuration form in the back-end. Today, we’ll implement the files which are required by OpenCart so that it can detect the custom shipping method and list it along with the other enabled shipping methods during checkout. 

I hope that you’ve created all the files from the first part of this series. If you haven’t gone through the first part yet, I would encourage you to go through that before proceeding further. Also, I assume that you’re using the latest version of OpenCart.

A Glance at the File Setup in the Front-End

Let’s start with a list of the files required in the front-end.

  • catalog/language/english/shipping/custom.php: It’s a language file in which we’ll define the labels.
  • catalog/model/shipping/custom.php: It’s a model file, which is important as most of the shipping calculation logic goes here.

So that’s it as far as the front-end setup is concerned.

File Setup

Let’s start with the language file setup.

Create a Language File

Create a file catalog/language/english/shipping/custom.php and paste the following contents in that file.

I don’t think it requires any explanation, so let’s move on!

Create a Model File

Create a file catalog/model/shipping/custom.php and paste the following contents in that file.

As per the OpenCart conventions, the class name should be ModelShippingCustom and there’s a getQuote method which is a must for our shipping method to be picked up by OpenCart.

You should notice that the $address argument is passed in the getQuote method, which is the shipping address of the customer during checkout, and it allows us to decide if the current shipping method is applicable for the geo zone belonging to that address. It’s decided by the following code.

Next, if the shipping method is applicable, we prepare the required array variables as per the conventions.

As you can see, we’re using the $this->config->get method to load the values for the configuration variables like “custom_cost”, “custom_tax_class_id” and “custom_sort_order”. Recall the first part, in which we configured these values using the custom configuration form!

Also, an important snippet to notice is the value of the text key in the $quote_data array. It calculates and formats the total amount which will be charged for our custom shipping method. Specifically, it checks if any additional tax should be added to the “cost” of the shipping method. Recall the Tax Class setting we provided in our configuration form, in which we selected Taxable Goods. Thus, it’ll add an extra tax to the total amount of the shipping method!

We’ve tried to keep our model part simple, but you could do all the calculations in this file as per your shipping method APIs if any. So that’s it as far as the model part is concerned.

Demo in the Front-End

In the front-end, add a few products in the cart and start the checkout process. In Step 4: Delivery Method, you should be able to see our custom shipping method listed as shown in the following screenshot.

Shipping Method Demo

It’s listed with the title “Custom Shipping Rate – $14.00”. You may be surprised that although we configured the Cost parameter to 10, it’s showing 14 in the list. As I mentioned earlier, we configured Taxable Goods in the Tax Class field in the configuration form in the back-end.

Navigate to Localization > Taxes > Tax Classes, and edit Taxable Goods. You’ll see that 20% VAT and a flat 2$ Eco Tax are configured for this tax class. Thus, it adds a further $4 to the cost of the shipping method! Of course, if you set Tax Class to None, tax won’t be applied at all!

So, that’s it for today. We’ve now successfully created a fully fledged custom shipping method module in OpenCart!


I hope that you’ve enjoyed this two-part series and you’ve learned something useful. If you’re looking for more OpenCart applications, don’t forget to check out what we have available for sale on the market. Don’t forget to share your reviews and queries using the feed!

Source: Nettuts Web Development

Save 94% on a Seven-Course Data Mastery Bundle

Save 94% on a seven-course data mastery bundle

Add data management and analytics skills to your resume, and you’re on your way to a lucrative career in a field that’s growing every day. Want in? Get started with the Essential Data Mastery Bundle. We’ve got it for just $39 at SitePoint Shop, saving you 94%.

This bundle includes seven courses that’ll help you master the ins and outs of extract, manipulating, managing, and analyzing data. Get a handle on essential database systems and technologies like MongoDB, SQL, MySQL, MapReduce, Hadoop, and PostgreSQL. The courses are packed with hands-on projects that give you real experience you can feel confident about when applying to jobs. And you’ll learn how to save time while doing more by automating tasks.

Start a new career and be first in line for a promotion. Get the Essential Data Mastery Bundle for $39 at SitePoint Shop.

Continue reading %Save 94% on a Seven-Course Data Mastery Bundle%

Source: Sitepoint

Creating Amazing Projects with a $5 Raspberry Pi Computer

The Raspberry Pi is a tiny computer. In this article, I’ll explain more about what it is, and some of the amazing things we can do with it.

About the Raspberry Pi

As you can see in the picture below, the Raspberry Pi is about the size of your hand:

Raspberry Pi

First released in February, 2012, the Pi was created to let anyone learn how to use a computer. It’s a great product with an attractive price – typically varying from $20 to $40, depending on the version, though the Raspberry Pi Zero can be bought for just $5.

Several versions of the Raspberry Pi have been released, each with its own specifications. On some we find four USB ports, while on others there’s no Ethernet port, etc. You normally choose a version based on the requirements of your project. You can see obvious differences between one of the first Raspberry Pi versions (pictured above) and a Raspberry Pi 2 (pictured below):

Raspberry Pi 2

You can learn more about the components of the different Raspberry Pi computers on Wikipedia.

Power Supply and Operating System

The Raspberry Pi itself is just the motherboard you see pictured above. It’s powered through a microUSB port, and it doesn’t have any hard drive. Instead, it has an SD slot (or a microSD slot), and the OS is run from an SD card.

In terms of the operating system (OS), several are available for the Pi. Most of them are based on well-known Linux distributions such as Raspbian. But you can also install Windows on your Raspberry Pi 2 if you prefer. (The site shows lots of fun projects you can try on a Raspberry Pi with Windows.) There’s a dedicated page on Raspberry Pi’s official website that helps in deciding what OS is best for you.

Continue reading %Creating Amazing Projects with a $5 Raspberry Pi Computer%

Source: Sitepoint