If you’re a developer and familiar with WordPress at all, you quickly realize that adding and removing fields from Jigoshop’s checkout is nothing more than working a little bit of filtering magic and adding a few hooks. This gets the job done, but if you get the same request time and again, you soon realize that this type of functionality really would be an ideal candidate for an extension, which is why we developed the Jigoshop Checkout Field Manager.

The REALLY cool thing about this extension, is that not only can you add the same type of fields that the Jigoshop checkout already supports – inputs, textareas, checkboxes, etc – but it also introduces a new type of field that you can use: the date field.

Jigoshop Date Fields

The response we’ve received for this extension so far has been really great and we have a lot more cool stuff planned for this extension, as well as a lot of cool other extensions for Jigoshop that we’ll be releasing soon, so stay tuned!

Jigoshop Checkout Field Manager

How the QuickBooks Point-of-Sale Integration  Works

Here’s how the integration works:

1. You install the qbpos extension just like any other WordPress Plugin.
2. Generate a WebConnector Key file from the extension’s webconnector tab
3. Load it into the QuickBooks WebConnector on your desktop
4. Map your QuickBooks Point-of-Sale settings in WooCommerce and off you go!

After you establish the sync between QuickBooks Point-of-Sale and WooCommerce, once orders reach a completed status, they’ll automatically be sent to QBPOS as a Sales Receipt. Similarly, once setup, on-hand inventory and pricing will be pulled directly from QBPOS and updated on your WooCommerce shop.  Just think of the time-savings for updating qty on-hand and pricing on your website. All of this information is seamlessly synced using this extension.

What you need to get started using QuickBooks POS Integration

1. QuickBooks Point-of-Sale – version 8.0 or newer. Unfortunately, this extension does not work with the FREE version of QuickBooks POS v10.
2. QuickBooks Point-of-Sale Company File – this might sound silly, but you do need to have a Company setup in QuickBooks Point-of-Sale for the integration to work. So, if you’re just getting started, take a few minutes to get QuickBooks Point-of-Sale setup properly and then connect it to WooCommerce.
3. QuickBooks Web Connector – this is a cool program that lets QuickBooks POS and WooCommerce talk. If you need to download it, you can get it here:QuickBooks WebConnector (it’s FREE) .
4. A PC – Right now, the integration only works with QuickBooks POS running on a PC (that means Windows) because QuickBooks Web Connector isn’t available for Macs

Click to Get Quickbooks Point-of-Sale Integration!

Overview

Just released today is the official QuickBooks integration extension for WooCommerce. WooCommerce is one of the fastest growing shopping cart plugins for WordPress, and we’re extremely happy to have just released verion 1.0 of our extremely powerful QuickBooks connector for WooCommerce. If you’re using Woo and QuickBooks, this extension is a MUST HAVE!. Gone are the days of having to rekey order info into QuickBooks or struggling to keep your online inventory up-to-date. Instead, now you can just setup our handy little plugin and it’ll do all of the work for you and you can focus on growing your business and your brand.

How the QuickBooks Integration Works

Here’s how the extension works:

1. You install the extension just like any other WordPress Plugin.
2. Generate a WebConnector Key file from the extension
3. Load it into the QuickBooks WebConnector
4. Map your QuickBooks settings in WooCommerce and off you go!

After you establish the sync between QuickBooks and WooCommerce, once orders reach a completed status, they’ll automatically be sent to QuickBooks as either a Sales Receipt or Sales Order / Invoice / Payment. Similarly, once setup, on-hand inventory and pricing will be pulled directly from QuickBooks and updated on your WooCommerce shop. Just think of all of the time and money saved by not having to manually re-enter data between the two.

Screenshots

What you need to get started

1. QuickBooks Desktop – right now, the plugin works for QuickBooks Desktop (v9.0 or newer), but if you need it for QuickBooks Online or Point-of-Sale, let us know and we’ll see what we can do.
2. QuickBooks Company File – this might sound silly, but you do need to have a Company setup in QuickBooks for the integration to work. So, if you’re just getting started, take a few minutes to get QuickBooks setup and then connect it to WooCommerce.
3. QuickBooks Web Connector – this is a cool little program that ships with QuickBooks and helps us let QuickBooks and WooCommerce talk. If you need to download it, you can get it here: QuickBooks WebConnector (it’s FREE) .
4. A PC – Right now, the integration only works with QuickBooks running on a PC (that means Windows) because QuickBooks Web Connector isn’t available for Macs.

Click to get QuickBooks Integration!

Click here to download from the wordpress plugin repository

They wanted something simple, but that would convey fun and excitement as well as showcase what they are capable of.  They also wanted to be able to post updates and images from recent events they worked.  And, with a very large event proposal in the works for them, this site needed to be done ASAP.

Being the busy company that they are, the folks at Albe gave us a bit of creative freedom – knowing this would allow the site to get done faster (and save them a little money, too).  We are proud to say that we finished the site within the time constraint and under budget!

Be sure to check out their service!  http://albeevents.com

Thanks for the opportunity, Albe Events!

1). Cloning the Meta Box

Really, the easiest step in the whole ordeal, was cloning the meta box.  If you read up on adding meta boxes, you’ll see that adding a new meta box is as easy as this:

function add_custom_categories_box() {
    add_meta_box('customcategorydiv', 'Sliders', 'custom_post_categories_meta_box', 'slides', 'side', 'low', array( 'taxonomy' => 'sliders' ));
}
add_action('admin_menu', 'add_custom_categories_box');

From that bit above, the thing we care about the most is custom_post_categories_meta_box. This is the function that will output the content of our new meta box. The form is nearly identical to the old, except we want to replace the code the creates a drop-down of available categories, with a drop-down that lists available slider types

  $taxonomy, 'hide_empty' => 0, 'name' => 'new'.$taxonomy.'_parent', 'orderby' => 'name', 'hierarchical' => 1, 'show_option_none' => '— ' . $tax->labels->parent_item . ' —', 'tab_index' => 3 ) )*/
 'Nivo Slider',
		'cycle_content'=>'Cycle Content Slider',
		'cycle_active'=>'Cycle Active Slider'
		);
 ?>
 $value){?>


  

And that’s really all that we need to do to get a new Slider meta box on the slides page with a drop down that lists the slider type instead of the parent category. But, slider_type is a custom meta field and will not be saved to the new slider once you click the “Add New Slider” button. This is where the ajax comes in.

2). PHP Function to Catch Ajax Post

Originally, my thought was that I would try and alter the default wordpress jquery to pass my new custom meta slider_type. Then I realized this was going to be more work than necessary. Instead, I’d just write a quick php function to catch my ajax post and save it to the database. Here’s the code on how I accomplished that:

function ajaxResponse(){
    Try{
 	$new_term = wp_insert_term( $_POST['slider_name'], 'sliders', $args = array() );
	$t_id = $new_term['term_id'];
	$term_meta['slider_type'] = $_POST['type'];
        // Save the option array.
	$term = "taxonomy_".$t_id;
	update_option($term, $term_meta );
	echo $t_id;
 } catch (Exception $e){
	exit;
 }
 exit;
 }
add_action('wp_ajax_ak_attach', 'ajaxResponse');

The important thing to notice about that code is action – wp_ajax_ak_attach. You can call pretty much any hook in jQuery, provided that the name of the hook begins with wp_ajax_. Pretty cool, right. Otherwise, the php function itself is pretty self explanatory – grab $_POST variables (from jQuery), add a new slider, update the new slider using id with the slider_type info. Now we just need a bit of jQuery to make that happen.

3). Tying it together with jQuery

The jQuery is pretty simple as well. We’re listening for the click event of our “Add New Slider” button, and then we’re going to make a jQuery.post and call our php function:

jQuery(document).ready(function(){
	jQuery('input#sliders-add').click(function(){
		//jQuery(formid+"_contactForm button").hide();
		jQuery.post(
			site.siteurl+"/wp-admin/admin-ajax.php",
			//Data
			{
				action:"ak_attach",
				'cookie': encodeURIComponent(document.cookie),
				'slider_name':jQuery('input#newsliders').val(),
				'type':jQuery('#term_meta_slider_type').val()
			},
			//on success function
                       function(id){
                        /* Do Some Stuff in here to update elements on the page...*/
                       /*Reset the form*/
                       jQuery('input#newsliders').val('');
		       jQuery('#sliders-adder').addClass('wp-hidden-children');

	      	       return false;
			};
		);
	return false;
});

The jQuery code above is a pretty standard jQuery.post example. The important thing to notice in it is this part:

//Data
{
  action:"ak_attach",
  'cookie': encodeURIComponent(document.cookie),
  'slider_name':jQuery('input#newsliders').val(),
  'type':jQuery('#term_meta_slider_type').val()
}

The “action” is the name of our php function that we created, minus “wp_ajax_”, and our post variables are defined as well – “slider_name”, “type”. So now when someone presses the “Add New Slider” button, it’ll trigger an ajax post to our server-side function, which’ll pickup the post data that we’re defining and add the new slider and assign it the custom meta data slider_type Here’s some screenshots of it in action:

We recently were presented with the challenge of creating a custom post type meta box in WordPress’s Admin section. The new custom post type (slide) would need a set of new meta boxes when adding a new slide. This new meta box would be called slide type and it’s main purpose is to determine what other meta boxes should be displayed when a certain slide type was selected. The reason for this approach is to keep the UI for the slide custom post type clean. There are three options of our slide type - Nivo, Cycle Content, and Cycle Active.

Nivo

Nivo slide type is used for the nivo slider. When creating a new nivo slide, the user will be able to input the images as well as a caption for the image

Cycle Content

A Cycle Content slide is basically ANY content that can be entered through the wordpress TinyMCE editor. This includes shortcodes, images, videos etc.

Cycle Active

Cycle Active Sliders are really cool and the input form for a slide of this type is basically three spots for images that make up a single slide. The idea here is to have the three images have transparent backgrounds and “fall” on top of each other to create some pretty cool effects

As you can see, each slide type requires a different type of input form. So, to keep the UI clean and uncluttered, when a user clicks Add New Slide, the first thing they are presented with is a radio group which gives them the option to choose which type of slider they’d like to create:

Once they select what type of slide they’re creating, the appropriate input form is presented for that slide type. This keeps the UI clean and easy to understand. Here’s the basics on how we go this to work:

Step 1 – Add the Meta Box

add_action( 'add_meta_boxes', 'add_slides_metaboxes', 1 ); // priority 1
function add_slides_metaboxes() {
add_meta_box('slide_type','Slide Type', 'slide_type','slides','normal','high');
}

Step 2 – Meta Box Content Function

In the add_meta_box function call above, we said that our callback function was slide_type (the third parameter). This means that we now need a function that called slide_type that will output the html/jquery content of our new meta box.

function slide_type(){
       //Function to output the html of the meta box form. jQuery to hide all content and show when a certain radio is selected
		}

Ater your have your function built with the necessary php/jQuery to perform the work, when a user clicks Add New Slide, they’re only shown the radio list meta box to select the slide type. Once they choose a slide type, the proper UI input form for that particular slide type appears.

61 Designs recently launched a new website for OMeOMy Products. This was a ground up build using the Magento shopping cart framework. Originally omeomyproducts.com was a wordpress site with a shopping cart plugin. They were unhappy with how their site looked, so we decided to do a ground up rebuild for the launch of their product lines. We worked closely with the partners at OMeOMy to come up with a design and layout that they were happy with. For those that don’t know, OMeOMy are the makers of the Sweaty Bag, the Wet Bag and the Dirty Bag. They were great clients to have and we are glad to hear that they are happy with the final product. Here’s a little info on the company and their products.

Be sure to check out their site here: OMeOMy Products Website

Believe it or not, even today, this is still a common problem for a lot of small to medium sized businesses – exactly the people that can benefit from online referrals the most. Even the best designed website might not have been “built” in a way that makes it easy to find. That’s why at 61 Designs, we make sure that all of our websites are search engine optimized, easily indexed in the major search engines, and have the proper content strategy – what’s on the site is just as important as how’s it’s built. If you already have a site that no one can find or need a new site that you want to make sure people will find, get in touch. We’d be more than happy to look and see what services we could offer.