Using Enfold Avia Layout Builder on WooCommerce

We’re in the process of launching a WooThemes Canvas marketplace (more news on that later) and opted for using the brilliant Enfold theme to do the heavy lifting. In the process, we discovered that the amazingly intuitive Avia Layout Builder doesn’t play nice with Custom Post Types – which WooCommerce uses for their product listings.

Custom Post Types

Custom Post Types, at it’s core, function very much like traditional posts that every WordPress ships with. In the case of WooCommerce, it’s got a lot more fancy features although the roots remain the same. Surprisingly, however, is that with Enfold the Avia Layout Builder is missing along with the layout panel in the admin view.

Support Forum

Working our way through Kriesi’s support forum shows that other users have stumbled across this very same problem with their unique custom post types. One user even went as far as to shoot a quick video to show how to quickly create a custom post type and what files to edit to get the Enfold Avia Layout Builder to show up. For reference, I’ve included it below:

Enfold Avia Layout Builder and WooCommerce

Following on from the video above, here’s a list of steps to follow in order to activate the Enfold layout builder / sidebar manager:

1. FTP into your website using an FTP client like FileZilla
2. Navigate to the following directory: “/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/config“
3. In there should be a file called meta.php; Download this file to your computer and open it with a text editor (I use Sublime Text, but Notepadd++ or any other one will work perfectly)
4. The first few lines should look like this:

   <?php
   global $builder;
   
   $boxes = array(
   	array( 'title' =>__('Avia Layout Builder','avia_framework' ), 'id'=>'avia_builder', 'page'=>array('portfolio','page'), 'context'=>'normal', 'priority'=>'high', 'expandable'=>true ),
   	array( 'title' =>__('Layout','avia_framework' ), 'id'=>'layout', 'page'=>array('portfolio', 'page' , 'post'), 'context'=>'side', 'priority'=>'low'),
   	array( 'title' =>__('Additional Portfolio Settings','avia_framework' ), 'id'=>'preview', 'page'=>array('portfolio'), 'context'=>'normal', 'priority'=>'high' ),
   );

   You should change it to look like this:

   <?php
   global $builder;
   
   $boxes = array(
   	array( 'title' =>__('Avia Layout Builder','avia_framework' ), 'id'=>'avia_builder', 'page'=>array('portfolio','page', 'product'), 'context'=>'normal', 'priority'=>'high', 'expandable'=>true ),
   	array( 'title' =>__('Layout','avia_framework' ), 'id'=>'layout', 'page'=>array('portfolio', 'page' , 'post', 'product'), 'context'=>'side', 'priority'=>'low'),
   	array( 'title' =>__('Additional Portfolio Settings','avia_framework' ), 'id'=>'preview', 'page'=>array('portfolio'), 'context'=>'normal', 'priority'=>'high' ),
   );

5. Save the file and re-upload it to the same spot via FTP.
6. If you refresh your WordPress backend, and head to your products – you’re be presented with the option to activate the Avia Layout Builder. You should also see the sidebar menu entry that allows you to choose some Enfold specific options for the Header and Footer of your website.