Canvas Extension: WooCommerce Button

Customizing WooFramework shortcode buttons in WooThemes Canvas theme. Allows creating 4 types of buttons which can be used as many times as desired.

It basically uses WooThemes button shortcode to create a button with custom class and and has customizer controls to let users customize them 🙂

It adds 1 panel, with title Buttons in customizer, which contains 4 sections Button 1 to  Button 4. Each section has following options-

  • Button background color
  • Button text color
  • Button hover background color
  • Typography ( Font, size and weight including Google Fonts )
  • Padding ( top/bottom and left/right )
  • Border width and color

Pootle Button

pootle button is a wonderful lightweight TinyMCE plugin to add buttons in WordPress editor.

What does pootle button do?

pootle button makes it incredibly easy to add buttons to WordPress editor. It allows setting background, border radius (for rounded corners), text color an much more!

What’s cool about pootle button?

pootle button allows adding custom hover color which because of the complexity in implementation is not implemented in any button building/adding plugin for WordPress, It also offers adding beautiful custom gradients just pick 2 colors and bingo your button has a beautiful gradient as background! It also has an option to choose icons for buttons which come from WordPress’ dashicons for making professional looking buttons without a single line of code!

Any challenges with pootle button?

Hover color was an issue for button because inline styles don’t allow styling hover states, that’s why none of the button builders have not implemented this… So to solve this issue we add hover color as a data attribute to button and and set it as background on hover using jQuery.

Also, gradients were a very interesting implementation, taking into consideration that some browsers don’t support gradients, we added a fallback to first color as background in case browser does not support gradients.

How is pootle button developed/structured?

pootle button has following components:

  • PHP to register tinyMCE plugin components and scripts.
  • TinyMCE plugin written in JS.
  • Dialog rendering PHP code.
  • Dashicons selecting jQuery plugin.

Can I see pootle button User Interface?

Aye! Check this video out 😉