jPlayer Product Sampler

The jPlayer Product Sampler plugin for WooCommerce is a music and video player that enables your customers to preview digital music and video files before they buy them. You simply upload a sample file in the backend and jPlayer Product Sampler will take care of the rest. You have full control over positioning the player on the product page through the smart built in hooks WooCommerce offers you. jPlayer Product Sampler also support jPlayer skins, it comes bundled with a few but should find one that’s not there you can simply upload your skin to the skins folder and the plugin will take care of the rest for you. jPlayer Product Sampler support HTML 5 playback as well as Flash, should your preferred playback method not work for a client it will automatically fall back to the other method.

Installation

↑ Back to top

1. Upload ‘woocommerce-jplayer-product-sampler’ to your ‘plugins’ directory.
2. Activate ‘WooCommerce jPlayer Product Sampler’ through the ‘plugins’ menu in your WordPress admin area.

Setup and Configuration

↑ Back to top

1. Go to: WooCommerce > Settings > Products > JPlayer Product Sampler.

• Playback Solution: This is your preferred playback method to use, should this method not work for your clients it will fall back to the other option.
• jPlayer Skin: The plugin has support for jPlayer skins, it comes bundled with a few, but should you wish to use another skin, you can simply upload a new skin and choose it here.
• Loop: If this option is checked, the player will loop playing the sample.
• Use Shortcode for Player Placement: When enabled you can use the [woo_jplayer] shortcode anywhere on the product page to position your player, please note that this setting overrides the jPlayer Location settings.
• jPlayer Location: By making use of the hooks WooCommerce provides you can literally place the player anywhere on the product page.
• Location Priority: This option combined with the jPlayer Location, gives you even more control over where to place the player. Because we make use of hooks to place the player on the product page we are competing with other data/function for realestate space, playing around with this option can enable you to place the player before or after certain content. A lower number gives  you higher priority and will place your content above other with a higher priority then yours.

Uploading Sample Files

↑ Back to top

Uploading sample files is a painless process, simply head to your products page in the WordPress admin area, edit or add a product and you will see a new field called Upload a Preview File underneath the Download Limit field on the general tab on the Product Data box. You have the choice of either entering a URL manually or making use of the Upload a file button. When clicking the button you will be presented with the familiar WordPress media uploader screen, select your files and upload it, when it’s done simply click Insert into post and the file url will be added to the textbox. Remeber to click Update to save changes.

Shortcode

↑ Back to top

As of v1.1 the plugin has a shortcode called [woo_jplayer], the shortcode can be used just as is without any parameter, if no parameters are specified the plugin will use the files you uploaded through the product page in the backend. You have the option to specify two parameters with the plugin called url and title, both these parameters will accept a comma separated list to enable you to add multiple files via the shortcode. eg. [woo_jplayer url=”http://url/mp3.mp3″ title=”Track 1″]

FAQ

↑ Back to top

My player keeps telling me to upgrade my browser or flash This could mean that the file you have assigned to the player on that specific product is either unsupported, corrupt or in the wrong format. To test this try replacing the file with the following URL http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v My skin layout does not look right, how can I fix it? Some theme interfere with the skin css rule, to fix this you can add the following css to your theme’s custom.css file

.jp-controls li {
margin: 0 !important;
}

How can I add the player to the archives pages? You can do it pretty easily by adding the following snippet to functions.php in your theme folder:

/**
* Adds jPlayer to WooCommerce archives pages
*/
add_action( 'woocommerce_after_shop_loop_item_title', 'jplayer_on_archives', 11 );

function jplayer_on_archives() {
echo do_shortcode( '[woo_jplayer]' );
}