This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

WooCommerce Twitter's Bootstrap

Description

This plugin wraps your Woocommerce views in the Twitter’s Bootstrap Grid. Makes your views full responsive. No changes to your theme or other plugins needed.

Twitter’s Bootstrap version

Select you Twitter’s Boostrap version in the settings Panel.
You could choose between version 2 and 3.0.

Number of columns (Shop page)

Choose the number of columns in the Shop Page.
This will be result in the grids shown below:

/* the grid display */
/*
|   columns     | mobile    | tablet    | desktop   |per page   |
----------------------------------------------------|-----------|
|       1       |   1       |   1       |   1       |   10      |
|---------------------------------------------------|-----------|
|       2       |   1       |   2       |   2       |   10      |
|---------------------------------------------------|-----------|
|       3       |   1       |   1       |   3       |    9      |
|---------------------------------------------------|-----------|
|       4       |   1       |   2       |   4       |   12      |
|---------------------------------------------------|-----------|
|       5       |   n/a     |   n/a     |   n/a     |   n/a     |
|---------------------------------------------------|-----------|
|       6       |   2       |   4       |   6       |   12      |
|---------------------------------------------------|-----------|
|       >=6     |   n/a     |   n/a     |   n/a     |   n/a     |
|---------------------------------------------------------------|
* 
* 
*/

/* the grid display Twitter's Bootstrap 2.x*/
/*
|   columns     | mobile / tablet| desktop  |per page |
------------------------------------------------------|
|       1       |   1            |  1       |   10    |
|-----------------------------------------------------|
|       2       |   1            |  2       |   10    |
|-----------------------------------------------------|
|       3       |   1            |  3       |   12    |
|-----------------------------------------------------|
|       4       |   1            |  4       |   12    |
|-----------------------------------------------------|
|       5       |   n/a          |  n/a     |   n/a   | 
|-----------------------------------------------------|
|       6       |   2            |  4       |   12    |
|-----------------------------------------------------|
|       >=6     |   n/a          |  n/a     |   n/a   | 
|-----------------------------------------------------|
* 
* 
*/

Theme integration

To use this plugin in your themes copy the files to for example {wordpress}/wp-contents/themes/{yourtheme}/vendor/ and add according to this the code below to your functions.php:

if( !function_exists( 'wts' ) ):
function wts()
{
wp_deregister_style ( 'woocommerce-twitterbootstrap');  
wp_dequeue_style( 'woocommerce-twitterbootstrap');
wp_register_style ( 'woocommerce-twitterbootstrap', get_stylesheet_directory_uri() . '/vendor/woocommerce-twitterbootstrap/css/woocommerce-twitterboostrap.css', 'woocommerce' );
wp_enqueue_style( 'woocommerce-twitterbootstrap');
}
endif;  
add_action( 'wp_enqueue_scripts', 'wts', 200 ); 


remove_action('admin_menu',array($woocommercetwitterbootstrap,'add_menu'));
add_action('admin_menu','woocommerce_twitterbootstrap_add_menu');
/** * add a menu */ 
function woocommerce_twitterbootstrap_add_menu() 
{
     global $woocommercetwitterbootstrap;
     add_theme_page('WooCommerce Twitter Bootstrap Settings', 'WooCommerce Bootstrap', 'manage_options', 'woocommerce-twitterbootstrap', array($woocommercetwitterbootstrap, 'plugin_settings_page'));
} // END public function add_menu()

Contribute!

If you have suggestions for a new feature or improvement, feel free to contact us on Twitter. Alternatively, you can fork the plugin from Github.

Requirements

Support

We are always happy to help you. If you have any question regarding this code. Send us a message or contact us on twitter @JamedoWebsites.

Todo

  • Make Cart and Check out pages responsive too

Screenshots

  • Settings panel of WooCommerce Twitter's Bootstrap

FAQ

How to Center the product elements on Shop page

See: Centering product elements on Shop page

Changelog

1.2

  • placeholder image
  • theme integration

1.1

  • All items in one row with responsive column reset see: http://getbootstrap.com/css/#grid-responsive-resets
  • Option to overwrite the template in wp-conten/themes/{yourtheme}/woocommerce-twitterboostrap/
  • Shortcode for featured products [featured_products], paremeters: per_page, columns and content_product_template
  • Shortcode for recent products [recent_products], paremeters: per_page, columns and content_product_template
  • Less code for part of the CSS
  • Optional column setting 31, use with shortcodes to get 1 (mobile) 2 (tablet) 3 (desktop)

1.0.1

  • Bootstrap 3.0
  • Grids applied to category pages too

1.0

  • First version

Contributors & Developers

This is open source software. The following people have contributed to this plugin.

Contributors

Browse the code