Testing bootstrap for woocommerce

developing custom theme for woocommerce is quite easy : default product archive view are coded within the plugin. But if you need to go deeper, why not try the famous bootstrap code framework.

  • My first attempt at a starter theme led me to try SAGE from ROOTS. Very good tutorial showed me how to install the theme from git clone, then install node js and gulp. I don't understand why so many folders are created in my theme though, really interferes with theme coding. Well this is not theme related but that's how far I got with SAGE and gulp. I also managed to implement a good default navigation system using classic bootstrap menu walker.. Strange that this would come by default to SAGE theme
  • Second attempt with a bootstrap theme is also from GIT, and it's not too bad either : wordpress-bootstrap has this top fixed navigation implemented, even though  it's not exactly mobile responsive yet  . But this is not very disturbing. this theme is also interesting because it comes with language management...

woocommerce themes with thumbnail image slider in loop

Displaying many images for one single product is a default feature of woocommerce product interface : in its primary setup, woocommerce displays the single product page with the featured image in main display, layed out above thumbnails of product gallery images. But within the category pages,  or more generally within the product loop, woocommerce displays only the single image. One interesting feature is to allow user to view all product images within the category page (or within all products loops), either via a carousel or a lightbox. Here is a selection of themes that integrate this feature natively. All these themes share the same following features : they integrate visual composer, and most of them show off the quick view feature, provided by free quick view plugin

 

OXYGEN : woocommerce boostrap theme with product slider and quickview in default archive page

woocommerce-theme-thumbnail-slider-oxygen

 

POLARIS : woocommerce boostrap theme with product slider and quickview in default archive page

woocommerce-theme-thumbnail-slider-polaris

The alternative : product list hover

VENEDIS

 

woocommerce-theme-thumbnail-slider-venedis

Woocommmerce product filter plugins comparison

attributes  custom taxonomy filter SEO friendly url magic widget / shortcode
FREE PLUGIN with  premium options
Advanced AJAX Product Filters
from BeRocket
Y  premium  Y
WooCommerce Products Filter
Premium : WOOF
Y Yes Y
 YITH WooCommerce Ajax Product Filter
WordPress Meta Data and Taxonomies Filter
PREMIUM PLUGINS
 WooCommerce AJAX Product Filter
from CodeNegar
all premium (30$)
 Visual Composer - Sortable Grid & Taxonomy filter

Displaying search results with various content type within wordpress templates

examples from real web sites

interesting wordpress search plugins

Beyond mobirise website builder

Six months after writing my mobirise review, I'm still amazed at the quality of this free software. It has spawned a new business model for my web design business in the west of Brittany where I deal with an important  market share  of customers who do not wish to pay for wordpress or CMS powered web design : small and medium companies just need to be online, not to pay for extra content management services they absolutely do not need.

SELF HOSTED web site creation 

This is why I am investigating domain management and webdesign, and two new tools have caught my attention. Remember SILEX FLASH CMS ? their original website has gone down and there is a new SILEX, are these the same guys ? anyway this is a good web design interface that generates static HTML and sends it straight to your FTP. the project is available online for try and test and abuse (free) !! and also hosted on github. But I honestly don't know if it generates modern pages like MOBIRISE does... I have also been looking at another self hosted solution, that runs on CPANEL, this is useful for hosting business where you want to give your customers access to website design : look at KOPAGE if you want something dynamic  integrated into your webhosing CPANEL package, or Aloha Editor, opensource javascript application that provides a very neat editing interface for HTML pages, and its PHP integration CreateJS. Or opensource SITECAKE

FREE website creation tools

apart from squarespace or WIX, a dozen of website creation tools allow to start free : investigating domain reservation api led me to try moonfruit which has lot of initial templates to start from. But the real deal breaker is pagecloud, which promises to create your HTML5/  CSS compliant webpage straight from photoshop

STATIC GENERATION

To conclude,  let's return to static generation : I have found a really net webdesign app that will cost you 70 bucks, I really like the HTML it produces, and that's all for now, here is a screenshot, enter BLOCAPP for mac, their front page says it all : simplicity, quality, clarity ...

 

static-web-design

 

 

Woocommerce category admin early release

Hi all, this is 2016 and after analysing many customer comments from both magento and wordpress shops, I decided to switch to wordpress... But the category / product management interface in woocommerce is not easy for previous Magento users and this is why I created this new plugin (not yet released on wordpress.org) to display categories and products together with the hierarchy. Obviously is for developers and I hope this will help you make the switch to wordpress, please go and download this early release of the future Full Woo Commerce Admin plugin, and most importantly, please comment !!

The idea of this plugin comes from the best opensource ecommerce platform after woocommerce : Magento really beats them all in terms of ease of administration, and the most interesting feature is the category tree hierarchy with products display : this plugin brings this magical feature to wordpress.

Download : very early release - WARNING  : this is for developers only !!

screenshot

>> read also :  front end woocommerce hierarchical category shortcode

All-in-One Event Calendar vs The Events Calendar

We have at least two powerful and free event calendar plugins for wordpress, and we have tried both on live websites. Both distributed as opensource plugins from wordpress plugin repository, their contributor company rely on advanced  features to make money via premium version of the plugin.  All-in-One Event Calendar (AIOEC) is developed and maintened by Vancouver based http://time.ly/, has more than 100 000 downloads and is actively maintened, which is a sign of future reliability and compatibility with coming wordpress updates. Same story for The Events Calendar (TEC): it's given to you by a company called TRIBE, shows more than 300 000 downloads, and last update is just a few days ago. The team page from Tribe company is quite impressive with highly specialized engineering profiles, and the pro version is clearly distributed as a well packaged product Event Calendar Pro version, at various prices depending on the licensing, starting at 89$ / site / year.. AIOEC has its own premium version in the form of various addons.

Events basic : time place and location

AIOEC and TEC both comme with special  custom fields within the editor : quite similar in their approach, they have small differences that can help you make a choice.

Typing events can be a time consuming affair : both plugins have their own custom post type within a specific wordpress admin menu. If you have many events TEC has a big advantage because it stores organiser and location information in separate tables, which helps grouping events by location and by organiser.

On the other side, if you want to go free, AIOEC allows Recurring events, while on the case of TEC this is only for the premium users.

AIOEC screen is better organised with accordion nested fields, but TEC is more efficient with specific data tables for location and oragniser information

AIOEC screen is better organised with accordion nested fields, but TEC is more efficient with specific data tables for location and organiser information

LAYOUT AND EVENT DISPLAY

TEC also provides  very nice free category color plugin, which can help you further organize events : this is a very strong argument in favor of TEC in terms of visual display on the front end. On the other side, AIOEC has a very nice card layout free extension that also allows list view, this is really nice for quick display of neat calendars. Just like AIOEC, default TEC templates need to be trimmed of extra elements you might not want to show : the default event calendar month view has a lot of extra stuff you don't need, like search engine . Detailed event view also needs trimming, depending on what kind of event you need to show.

don't understimate the editing work in php templates : posterboard view is nice but might require simplifcation

Other significant calendar solutions for wordpress

WordPress recommended plugins for our themes

there are a few plugins you cannot live without, and while all our theme can work with default worpdress install, we strongly recommend you to use the following for faster results

  • Visual editor widget will give you tinymce wysiwyg editing with image upload, link, bold, etc... for widget sidebars and footers
  • Pronamic google map can link each of your articles , posts and pages to a google based geolocation. We use Pronamic for our custom city search integration for fotowave plugin

Woocommerce design elements examples

There are many woocommerce free themes available out there (check out this article on bashooka.com) , but you can also start from scratch with your own development. Building a woocommerce theme from scratch is not a difficult task when you spend a little time preparing your layouts. Here is a list of basic elements your need to figure out before you switch to theme development. Time saving operations can help you design a nice layout for woocommerce!!

 

  • Header design : usually the header is the place to display main logo and navigation menu  : above that main menu position you can add a small horizontal bar with contact details, social networking icons, user and cart information. Of course the menu bar should be responsive, meaning that a small width device will transform the menu bar into 3 small horizontal graphic bar with drop down interactivity.
    Find examples of powerful menu design on designyourway
  • Cards : a design for product list in category page, and search results/
    Cards design is rapidly becoming a standard for responsive website development, as explained in this good tutorial from TUTSPLUS : Learning Material Design Lite: Cards
  • Footer design
    • trust elements : 4 or 5 icons at the bottom of the page to build trust with quality, shipping, customer testimonials, payment information
    • a great example of footer design on medium.com featuring an abstract landscape

JQuery mobile framework

iphonedevelopmeentRostov-on-Don / Russia based company has developped a full featured html  mobile interface for application like smartphone web development. An alternative to the famous jquery mobile touch optimized framework, or pretty mobile, to name just a few. To bridge the gap between HTML and native mobile application, you will need to embed your work in a specific browser component :  this can be done via various systems that we explicit an a previous article : Developp Iphone apps without – or with – mac

Mobirise, easy html bootstrap builder

Released by a dutch company, Mobirise is a small html builder tool that creates HTML5 bootstrap pages with predefined full screen responsive elements : it is the perfect tool to build quick web  prototypes with 2105 trendy layout. Premade HTML elements include full-screen hero images, scrolling with parallax effect, YouTube video backgrounds, mobile burger menu, sticky header and more. The fact that it's free is definitely a game changer but we can't guarantee that this is going to stay. Pinegrow is a good alternative that is commercially available : it advertises the possibility to build wordpress themes with is wysiwyg software : more than interesting !

Mastering drag and drop with Qards for wordpress

It's been a long way since wysiwyg editing was introduced to  wordpress via the implementation of tinymce for wordpress, back in 2005 with the release of version 2 of the famous blogging platform. The world of WYSIWYG editing was just in its early stages and the possibility of front end editing was still a dream. It's now a common feature of most content editing plugins for wordpress, and the front end editing feature is actually in good position for core integration, even though the best candidate plugin for that is now in "inactive" status as it was not updated for months.

Today advanced users of wordpress are familiar with tools like Visual Composer who has become a de facto standard for complex page layout editing. The recent addition of front end editing  in the plugin has not brought magic to the drag and drop usability of the stuff but it can help in tricky situations. A big drawback of Visual Composer is the complex code it produces and the not so easy use of its many functions and add-ons.

Enter Qards, a new plugin for wordpress that comes with a really new approach and threatens to end work for developers. Well if that could be true ! One thing is certain, Qards stands out as  a new step in the development of powerful user interfaces for building web sites.

First trial of the plugin brings a good feeling and ease of use. In seconds you design and prototype surprisingly neat layout of modern looking pages : full screen pages, image grids, text and video combined within attractive predefined and responsive layouts. A beginner will not have difficulties working with Qards but the experienced  wordpress developer will have to spend some time getting away from traditionnal wordpress tools.

For small websites it seems the perfect tool. For big web sites qards suffers for lack of compatibility with the basic wordpress tools : admin bar, media library, widgets , sidebars, footers are useful for website building and they are not perfect within wordpress, but we need some link to the tool we know to embark new stuff like Qards.

More about Qards drag and drop plugin : designmodo.com/qards/

More reviews of Qard plugin 

wordpress vs prestashop : product feed options

There's nothing like a good coding session if you wish to export your products : in that case both solutions Woocommerce and Prestashop have their own integration rules that will allow you to build specific module with various hooks and cron implementation. On the side of existing plugins, both prestashop and woocommerce have specific extensions for exporting products to various product aggregators and online comparators. Here is a list of various aggregators, please note that you should check module version and compatibility with your own installed version of woocommerce or prestashop.

WordPress woocommerce vs prestashop : 10 minutes to try

If you had only ten minutes to try a full featured opensource ecommerce solution, how would you start ? In my eternal search for the optimal ecommerce platform, I have chosen Woocommerce over alternate solutions because of the technical knowledge I've acquired with wordpress development. But the level of time investment you can spend on each trial depends on how advanced you are on each platform. We have two solutions for you here :

  • CASE NUMBER 1 : COMPLETE WEB BEGINNER
    you have no knowledge of web development of little hosting experience ? want to try something before you make a choice of web agency or ecommerce solution ? Prestashop guys are smart, they have implemented a full featured on line service based on the latest version of prestashop. You create a shop easily and it comes prefilled with products so you can try the backend and front together.

 

  • CASE NUMBER 2 : WORDPRESS GEEK
    Well you love wordpress and do not want to change solution  ? WOOCOMMERCE should be your choice for ecommerce development. PRESTASHOP users won't be surprised to find the same kind of backend navigation, with a lot of CMS features that are the signature of wordpress : custom post types allow you to work with a lot of various content definitions, like pages, posts, portfolio, but also  products and categories that come with WOOCOMMERCE.  Distributed in the form of a plugin, it can be activated in seconds but requires a few additionnal steps to be properly configured and plugged in the existing installation.

Events Calendar Yearly grid view

The famous Event Calendar wordpress plugin from Modern Tribe Company is one of the most popular event manager for wordpress. It creates a custom post type with all required field for event management, and comes with several views including a monthly grid view with very nice tooltips. Many free extensions exist for that plugin and one of them is the category color for event calendar, very useful for dealing with categories and colors for event display in the grid. What was missing was the yearly view and here comes a quick review of how I implemented it on my customer that delivers renewable energy traininig in brittany.

  • create a new template with a loop using the function 
    global $bzhEventDate;
    $bzhEventDate= '2015-03-01' ; tribe_show_month( array( 'eventDate' => $bzhEventDate ), 'month-small' );
  • customise month grid stylesheet to display smaller grid : 
    <style>
    #tribe-events-content {height:400px; margin-bottom:0}
    #tribe-events-content table.tribe-events-calendar { font-size:11px; }
    .tribe-events-month {display:inline; float:left; width:30%; margin-right:2%}
    #tribe-events-content .tribe-events-calendar td {height:50px; padding-bottom:0}
    </style>
  • customize event calendar views (month-small)
  • don't forget to add styles to body class (functions .php)
    add_filter( 'body_class','breizhwave_classes_body' );
    function breizhwave_classes_body( $classes ) {
    if (is_page("3088"))
    $classes[] = 'events-gridview';
    return $classes;

    }

Yearly events view for tribe calendar – sorted by month

wordpress-event-calendarA customer asked me a specific page with all events displayed for the famous Event Calendar Plugin. Nothing hard here : I created a custom page template with the following code - does the job... note that this is for ENFOLD wordpress theme stylesheet but you can easily adapt to other column frameworks like visual composer...