Drag and drop categories and taxonomies : woocommerce full admin new release

After a 12 months of silence here comes a new release of my preview version of a special enhanced admin interface for woocommerce. Its main purpose is to provide a better interface for viewing and admistering products, from the point of view an organized shop manager that works intensively with categories

The new version labelled 0.3 adds drag and drop for categories. This feature is for the moment limited to dealing with sub categories, whereas a real drag and drop component should also deal with category order, but for the moment do not expect that much : use this plugin to sort categories and sub categories on big databases where you need to get a clear idea of a hierarchy tree.

The idea for this feature came after I had to deal with a big migration from Magento to Woocommerce, where a lot of categories were imported with their products and I needed to check that everything was OK. having no public theme yet, I needed a more convenient interface for viewing the results of the import.

Link :

Other plugins work with taxonomies :

  • Taxonomy terms order is the most famous of all plugins with more than 20000 downloads . It uses the admin menu style interface for allowing taxonomy order.

Beyond the wordpress theme paradigm : block based design

Ever wondered how to share  common design elements between wordpress sites ? A lot of predesigned themes that are used in thousands of websites use predefined templates that allow you to play with variable layouts, but what if you want to design a neat block based page and use elements in pages as you want ?

There is a big constraint when working with predefined themes : can't get out of them easily. I discovered the idea of block based design after trying out the free mobirise static website builder, which allowed me to work out a simple full width responsibe  site in a few minutes.

Layout editors like visual composers or elementor now incorporate predesigned pages too : the obligation to use  a specific theme to get the design you want is now less important than before, time to move to block based design.

In its essence, the best solution I have found for responsive block based design is Visual Composer Extension — Block Builder + Addons, an additional plugin developped by pixelthrone, and sold on themeforest. The concept is very well layed out and the extension works as a folder organised list of specific blocks. Combining the now universal VISUAL COMPOSER extension with a list of predefined blocks seems an ideal combination for bringing web based block editing to the web.

 

Bridging prestashop features to wordpress

Like to have the best of both worlds ? seems prestashop and wordpress can communicate, though coding standards can make the develpment of such an integration difficult, even  for experienced PHP developers :

Using prestashop modules or content for automatic  product display in your wordpres blog

  • The plugin "Prestashop Integration" defines a new wordpress shortcode that will display  prestashop products in a wordpress installation. Pretty straightforward to get running, no big surprise here.

Using Prestashop Authentification Information to get worpdress behave as logged in

  • if you are familiar with Symfony and Composer, you can try this external authentification class : PrestashopBridge. for myself, in spite of expert wordpress knowledge, some knowledge of prestashop and composer tools,  I did not manage to get it working : only for the rough guys !
  • If you want to share users between two installations you have plugins available
    • prestashop-user-compatibility synchronises passwords of prestashop installation to wordpress: but it requires to have synchronized users. This plugin seems to be more like a one time helper for migrating from prestashop to wordpress
    • This is why I build prestawpbestworlds, because I want the best of both worlds : this is a premium plugin for wordpress (cost 99$) :  a one way  real time user and login status synchronizer that will allow currently prestashop customer to user wordpress as connected user, without even having to login again. Login, user creation, logout are all processed via prestashop connection information.

Building custom option toolset with magento and woocommerce

In the process of comparing magento and woocommerce, I went through the search of a plugin / extension that creates generic set of options (custom option template) to be used on products. the advantage of generic option toolset is that products of the same family often share the same set of options : modify one in the template modifies them all, this feature is a basic sanity procedure but it is not implenented in default magento, nor woocommerce. Option management in Woocommerce is horrible, while magento has a quite efficient interface for working with options, but in both cases you want to work generic and use a single point of definition for custom options.

  • Magento has many  extensions that do the job, they range from 50$ to 250$, I have tested the average one by LITEXTENTION, works fine and allows to import options templates, as a generic modifiable template, or import the custom options as fixed options for the product.
  • For woocommerce, the plugin ecosystem is not very rich on that purpose but the job has been done too, and comes the very accessible cost of 19$ : the WooCommerce Extra Product Options from a company called ThemeComplete is available on CodeCanyon, and it seems to be a very useful option because it has been sold more than 11000 times !!

AngularJS + Lavarel opensource CRM : review of invoiceninja

Moving from the world of static html generation from dynamic PHP code  to Angular Js powered system is a challenging opportunity for us freelancers. What better option to start with lavarel and angularjs than to try a full featured opensource Customer Relation application ? I was getting bored of the twenty century looking DOLIBARR and InvoiceNinja is a very neat looking bootstrap based application that can be used online or self hosted. The big advantage of this solution is that the installation process is quite straight forward if you know how to create your own database within a classic LAMP system. Invoice Ninja is really good for task management, invoicing and product management, and deserves the few minutes of trial you'll spend on it .

Optimizing images for WordPress

There are two main methods for optimizing images when working on wordpress.

First method is to work on your computer before uploading : batch processing is easy if you take the time to find the right software. Windows user will like  Image Resizer or light image resizer while Mac users will find Image Optim or Iresize.

SEcond method is to use a software as a service provider associated with a wordpress plugin, that will resize images on the fly. services like that cost a few dollar per month and offer the advantage of not working on your computer, saves one step, time saver. disavantage is time loading of the image which can vary depending on you rinternet connection. Such services are  zara4, cheetaho, kraken.io ...

Elementor hover tooltip for carousel

Visual composer addict can quit : free wordpress plugin Elementor is out and keeps growing with basic and very efficient widgets, like the carousel that visually beats VC's native. One drawback I encoutered though was the lack of explicit tooltip on image hover that we love to interact when viewing multiple images in a carousel :

elementor-hover-tooltip-illustration

Assembling pieces of code from all over the web, it took me quite a while to get that so I thought I might share. This piece of code is good for experienced wordpress theme developer who knows how to integrate style and javascript, any jquery powered script will accept that one, make sure the carousel you want tooltips has the hovertooltip class because you might not want to apply the effect to all carousels, big full screen might not need that.

javscript hack : creating title attribute from alt, and creating tooltip from title

styling the tooltip : css

 

 

Woocommerce : reasons for choosing additional field plugin

Developping additionnal fields for woocommerce products can be done using custom fields, but this method is not user friendly for the ecommerce administrator. There are many plugins for wordpress that enhance this feature, and we will start comparing the two best known plugins : Advanced Custom Fields (ACF) and (Custom Field Suite) CFS. These two plugins are not specific to woocommerce : they are designed to work for any  custom post type, including woocommerce products.

Popularity

popularity is the first relevant  indicator for the choice of a wordpress plugin, for many reasons : when a plugin is used by a consistent community, you can safely rely on it for the present and medium term future : you have less chance that it will be abandoned, amount of users  gives a good idea of how the plugin will be maintained in the future. Security is a  big issue on wordpress and active plugins are more subject to attacks, and as such more subject to receiving security patches in time.

As of today, the biggest difference between ACF and CFS is their popularity : ACR has been downloaded on more than 1 million active installs, while CFS ranks 30000, which is not a bad indicator, but largely below ACF, the community preferred custom field plugin.

Features

Basically, all you can do on CFS can be done with ACF, with one big exception. the CFS plgin page itself mentions : "This plugin is a free, lightweight alternative to Advanced Custom Fields."

both plugins have basic field types : text input, date input, wysiwyg input, relationship, file  upload. While ACF offers more diversity on the selection of input types, CFS has a big advantage on its free version with the repeater section that is only available in the premium (paid version) of ACF.

Admin Columns

the ability to display products in a single list is a basic operation that any wordpress data type provides, and products in woocommerce obey to that rule. The possibility to include custom fields in the list can be implemented via specific code (ACF / CFS). For those who do not want to code, or if you want an easy to use interface, Admin columns (premium version) do the job and integrate very well with both ACF and CFS, with the problematic fact that you would have to renew your license every year if you want updates.

Method for choosing

First thing you should do is plan : make a list of fields you will need for your products. If you do not plan to make purchases soon, and if you require the repeater field, then go for CFS : its simple API will let you work with custom fields very quickly. On the other hand if you plan more advanced features like color chooser, google map location chooser, then go for ACF.

Other extensions to watch

WordPress customizer : style chooser

I started working with scss bootstrap variables : very easy now to build dozens of color variations for your favorite all in one theme. Imagine you have ten stylesheets to choose from : you can reuse the same theme everywhere and concentrate on color choosing. Here is the piece of code for wordpress customizer that will allow you to select a stylesheet (named main-something.css) among all available from the dist / style folder !!

 

Woocommerce : working with automatic emails

Woocommerce, the most popular ecommerce extension for wordpress, comes with a very efficient HTML template based automatic email system. The first thing to look for when customizing wordpress automatic emails is to go to the woocommerce/settings/emails area, where you can customize the subject of the emails for creating new account, new order, etc... If you want more customization , you have to go your theme and override the default woocommerce email templates.

After that you can test how mails react with the following extensions

Gravity forms : create a new composite field

Ever wanted to create a new type of advanced field for gravity forms ?  for example, I needed to create a dimension field with two select boxes, limiting the choices available for selecting a dimension in centimeters and millimiters. Well it took me quite a while to find out that a lot of documentation on the web is outdated : the "simple field addon" published on git hub simply does not work on latest gravity forms (version 2.0.6 as of today)... Instead of trying to debug that one I found a better explanation of extending fields on gravity forms GF_FIELD documentation page. It turns out that extending that main class in a simple file that you can include in your theme (or create a plugin from it), works fine. here is a sample code taken from the standard time field, quickly transformed to a centimeter / millimeter select box. NO GUARANTEE that this works, it is in development, it still contains some code from the original time field,  I will post updates as I progress, feel free to use it and make your own plugin out of this one

 

 

Feast of wordpress drag and drop composer

The big battle for the best drag and drop visual composer has begun. Who will win ? We(ve already reviewed a few of them, among which the most popular of them, Visual composer.

Stand alone builders

  • http://massivedynamic.co/
  • https://fr.wordpress.org/plugins/forge/
  • https://wordpress.org/plugins/elementor/
  • https://wordpress.org/plugins/live-composer-page-builder/
  • https://www.layerswp.com/

Theme integrated builders

  • http://www.elegantthemes.com/plugins/divi-builder/
  • Avia Builder from enfold theme

Torro form drag and builder for wordpress / opensource

I am a big Gravity form user, and that very good and long used plugin has given me a lot of extension possibilities. Now comes a free opensource plugin , torro forms, which a nice way of displaying entry data via charts. Of course, it's new and does not have the extensions that gravity forms has, like Paypal payment, article creation, but it has a good array of available field types

Reverse Engineering Visual Composer for footer design

The Visual Composer drag and drop content manager for wordpress is one the most used component for WORDPRESS. It is not perfect but is used all around the world and many third party  plugins enhance its default capabilities. I have one specific use for this component that's not easily documented : using visual composer for designing footers is something that can be easily achieved thanks to the Custom Post Widget plugin that creates a new content block custom post type that can now be included in sidebars via widget.

Activating and configuring

First thing to do is install and configure plugins. A little trick is necessary here : by default, visual composer is activated only on page post type. After you have activated Visual Composer and Custom Post Widget, you can go and check out visual composer role manager settings. You will see that you can activate visual composer for some post types, but you will not find content blocks : this is because the Custom Post Widget defines content blocks as private, whereas Visual Composer only accepts public custom post types. Fortunately, someone has thought about it and you will find here a piece of code that makes content blocks public.

function filter_content_block_init()
{
$content_block_public = true;
return $content_block_public;
}

add_filter('content_block_post_type','filter_content_block_init');

Customizing

At this stage you can create content blocks, activate visual composer for content blocks and include them in sidebar using the content block widget !! very nice !! But one specific hack remains to include : if for example you want to use background for rows, visual composers uses specific custom styles inserted in the html head. But when you use the widget, html head is the head of any page and custom visual composer styling is not included, and you cannot benefit from extra styling features. So here is some clue that I fond out via reverse engineering.

have a look at you js_composer folder : the initPage function (line 128) from class-vc-base.php add an action to the wp_head . This is the key to the process. You need to include addFrontCss from the footer now

add_action( 'wp_head', array(
&$this,
'addFrontCss',
), 1000 );

the function addFrontCss itself calls addShortcodesCustomCss function, which gets some post custom meta value  : the only way to combine best of both worlds is to reuse this function in the ooter display function, which would be in the custom-post-widget plugin folder, in the  post-widget.php file, function widget : add the following code before the shortcode rendering :

//wave201603 compatibility with visual composer styles
if (function_exists('vc_set_as_theme')) { $id=$content_post -> ID;
$obj = visual_composer();
$obj->addShortcodesCustomCss($content_post -> ID );
}

or alternatively, use the code straight from Visual Composer's addShortcodesCustomCss function. [UPDATE : ] This last method turned out to be more reliable because it includes the style sheet on all pages, where as the previous method from visual composer class only works on pages where visual composer is actually being used for main page content...

$post_custom_css = get_post_meta( $id, '_wpb_shortcodes_custom_css', true );
echo "<style>". $post_custom_css . "</style>";

 

Solving the image sizes wordpress issue

One big drawback of wordpress as a content management system is the way it deals with various image sizes : when you upload an image to the wordpress media interface, your favorite CMS software creates thumbnails, medium and a variable occurence of intermediate image sizes, depending on your main theme and installed  plugins. For example, Woocommerce is a top plugin and it creates three intermediate images. It is good if you have all plugins prepared and installed before working on images and content, but if you need to make changes to  layout or front end display requiring specific or new image sizes, you have no other options than going into the code, declaring that new image size, and use one of the numerous plugins that allow you to regenerate all images for that specific size you've just created. Apart from the fact that it is not a very funny operation, it also creates images for all media files you've ever uploaded including the ones that will never need to be resized to the new size. And if you don't regenerate the images you need to display, well they simply won't work.So as a result if you have been working on your website for years and trying out dozens of different image sizes, they will all be stored on your hard disk, and that's size intensive and slows down your staging / backup / restore operations that are a minimum for each serious site

Well that's one solution, and the other solution is to use dynamically generated images. Some plugins do that, and hopefully one of them combines the best of both world : fly images resizer allows you to create new images sizes that will be cached to a specific directory that can be cleaned if you need to. I'm just after testing the plugin and it comes with the same kind of feature that wordpress has imagined : creating new image sizes including crop option, registering those sizes or in code dynamic image size creation. It has a small back end link that allows you to delete cache, and one improvment I suggest would be to allow specific image size cleaning.

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