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.

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

• Woocommerce Custom products data fields

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.