Enhanced Category Pages for WooCommerce – How to Use the Visual Composer Page Builder for Category Pages

Currently it is impossible to use the any page builder on category pages. This is a major flaw especially when you want to use WooCommerce. THey major problem here is that all the basic functionality such as axax filtering and sorting by a sidebar widget is not functional on regular pages. So you are stuck to use categories (which is not sa bad thing basically) but there you lack fully featured layout possibilities.

And it is even worse if you have SEO in mind. Cause the category pages could easily be trimmed and optimized for your focus keywords in that field or category. So fortunately there is a workaround that helps. But unfortunately I have NOT found any other way to accomplish such a thing. An believe me I have searched a lot. So let me show you how to do something like this:

Install the Plugin „Enhanced Category Pages“

Modify the editing Link

After installation the only way to access the hidden new custom post type to enhance your category pages is with a link from the category overview page (marked yellow in the screenshot). Which is kind of odd cause we would expect this to be at least a button within the actual category editing screen.

What we want to accomplish is the following:

1. Have an editing link within the actual category editing screen to edit the enhanced content part which happens to be another custom post type that is not visible in the backend besides being linked here. We just want to have the feeling that this category and the according custom post type are one entity.
2. Furthermore I am  a big fan of shortcurts in the admin bar. So we also want a direkt link from the frontend not only to just edit the basic category data but also to directly edit the enhanced content part of the category.
3. And to complete it all I also want a link in the editing screen of my enhanced post type to jump to the frontend and see my changes. Because the enhanced post type is only visible within the connected category, I have to link to this category instead of the single page of my post type.

1. Link to the Enhanced post type Editing Screen from the Regular Category Editing Screen in the Backend

//---------------------
//ADD AN EDITING "ENHANCED CATEGORY CONTENT" LINK TO THE ACTUAL CAT/TAX EDITING SCREEN IN THE BACKEND

$taxonomy1 = 'product_cat';
//you can also add it to yourt custom taxonomies as well if you like
//$taxonomy2 = 'your_taxonomy';

add_action( $taxonomy1 . '_edit_form_fields', 'render_field_edit', 1, 2 );
//you can also add it to your custom taxonomies as well if you like
//add_action( $taxonomy2 . '_edit_form_fields', 'render_field_edit', 1, 2 );

function render_field_edit( $tag, $taxonomy ) {

  $term_id = $_GET['tag_ID'];

  global $wpdb;
  $table_name = $wpdb->prefix . "ecp_x_category";
  $enhanced_post = $wpdb->get_row("SELECT post_id, taxonomy FROM ".$table_name." WHERE category_id = ".$term_id);

  $urly = get_edit_post_link($enhanced_post->post_id);

  ?>
  <tr class="form-field term-description-wrap">
  	<th scope="row"><label for="description"><?php _e( 'Description' ); ?> als Layout im Kopfbereich</label></th>
  	<td>
  
  		<div class="composer-switch"><span class="logo-icon"></span><a class="wpb_switch-to-composer" href="<?php echo $urly; ?>" style="transition: background-color .2s ease-in-out; text-decoration: none; cursor: pointer;color: #fff;display: inline-block;line-height: 28px;height: 28px;padding: 8px 13px;background-color: #0073aa;border-radius:4px;padding-top:4px;padding-bottom:4px;">Backend Editor</a></div>
  
  		<p class="description"><?php _e( 'The description is not prominent by default; however, some themes may show it.' ); ?></p>
  	</td>
  	<script>
  		// Remove the non-html field
  		//jQuery('textarea#description').closest('.form-field').remove();
  	</script>
  </tr>
  <?php
}

2. Link to the Enhanced post type Editing Screen from the Admin Bar in the Frontend

//---------------------
//ADD AN EDITING LINK TO ADMIN BAR TO DIRECTLY EDIT THE ENHANCED PART CONNECTED TO THE CURRENTLY VIEWED CAT/TAX

function my_admin_bar_link() {
  
//you can add other conditions such as taxonomies but adding  "|| is_tax('yourtaxonomy')" without the marks 
if ( is_product_category()) { 

      $term_id = get_queried_object_id();
  
      global $wpdb;
      $table_name = $wpdb->prefix . "ecp_x_category";
      $enhanced_post = $wpdb->get_row("SELECT post_id, taxonomy FROM ".$table_name." WHERE category_id = ".$term_id);
  
      global $wp_admin_bar;
      
      $wp_admin_bar->add_menu( array(
          'id' => 'vc_inline-admin-bar-link',
          'parent' => 'edit',
          'title' => __( 'Edit with Page Builder'),
          'href' => get_edit_post_link($enhanced_post->post_id)
      ));
    
    } else {
      return;
    }
    
}
add_action( 'wp_before_admin_bar_render', 'my_admin_bar_link' );

3. Link to the Frontend from the Enhanced post type Editing Screen in the Backend

//---------------------
//WHEN EDITING AN ENHANCED CATEGORY IN THE BACKEND I WANT A LINK TO THE FRONTEND SHOWING THE CONNECTED CATEGORY SO I CAN SEE MY CHANGES (since they are only reflected in the connected category!)

add_action('admin_bar_menu', 'add_toolbar_items', 100);

function add_toolbar_items($admin_bar) {

  global $current_screen; 
  if( $current_screen->post_type =='enhancedcategory') { 	    

    global $post;
    $id = $post->ID;

    global $wpdb;
    $table = $wpdb->prefix . "ecp_x_category";
    $enh_post = $wpdb->get_row("SELECT category_id, taxonomy FROM ".$table." WHERE post_id = ".$id);

  }

  $termlink = get_term_link(intval($enh_post->category_id));

  if ( $termlink && ! is_wp_error( $termlink ) ) {
    global $wp_admin_bar;
    $admin_bar->add_menu( array(
      'id'    => 'connected-cat',
      'parent' => false,
      'title' => 'Kategorie ansehen',
      'href'  => $termlink
    ));
  }

}

Further Styling and Settings

Now everything is set and ready to go. But there is more you can do. Maaybe your theme puts a comment beox by default below that nice contnt on your category pages. Why? Because actually there is just another page called on top. Nobody wants a comment box on a page so you need to deactivate that.

Furthermore if  you are using a side you might want that content beautifully placed above the shop part and above the sidebar. So this might be usefull as well.

Lets see what we can do:

1. Disable comments for the new enhanced category content content part
2. Place the enhanced content above of the sidebar and main shop part.
3. Remove enhanced post type from search results

1. Render new content above the main stage and above the sidebar

//==============================================================================
//ENHANCED-CAT - Adds content above page title via a hook. therefore the content-ecp.php is created and empty (see header layout for another version of this)

function my_above_content_page_title() {

  global $enhanced_category;
  
  // if not previously set up, then let setup_ec_data get the current query term/category
  if (empty($categoryId)) {
    $categoryId = null;
  }

  $term_id = $term_id ? $term_id : get_queried_object()->term_id;

  //if ( is_product_category() || is_shop() ) {
  //if ( is_product_category() && wpex_term_page_header_image_enabled() != "1" ) {  
  
  if ( is_product_category() || is_tax('pa_marke') || is_tax('pa_saison') ) {

    //ADD ON PROD CAT
    $enhanced_category->setup_ec_data($categoryId); // get enhanced category post and set it up as global current post
    ?>    
  	<article id="single-blocks" class="single-page-article wpex-clr">
    <?php
    if ( has_post_thumbnail() ) {
      echo '<div class="post-thumbnail">'.the_post_thumbnail().'</div>'; 
    }  
    ?>
  	<div class="single-page-content entry clr enhanced_category">
  		<?php the_content(); ?>
  	</div>
  	</article><?php
  
  } else if ( is_shop() ) {
  
    //ADD ON SHOP HOME
    $shop_id = get_option( 'woocommerce_shop_page_id' );
    $page_object = get_page( $shop_id );
    ?>
    
    <article id="single-blocks" class="single-page-article wpex-clr"><?php
    if ( has_post_thumbnail($shop_id) ) {
    echo '<div class="post-thumbnail">'.get_the_post_thumbnail($shop_id, 'full').'</div>'; 
    }  
    ?>
  	<div class="single-page-content entry clr enhanced_category">
    <?php echo do_shortcode($page_object->post_content); ?>
    </div>
  	</article><?php
  
  }
  
//< ?php //edit_post_link( __( 'Edit'), '<footer class="entry-footer"><span class="edit-link">', '</span></footer><!-- .entry-footer -->' ); ? >  

}
add_action( 'wpex_hook_primary_before', 'my_above_content_page_title' );        //    wpex_hook_content_before    wpex_hook_content_top

No that we have initiated a call to put the content above the sidebar and the shop parts. It still shows up in the main content area. This ibecause the plugin itself call it to be there. Fortunately there is an easy fix for this since the plugin supports themes. There may be a better solution via a code snippet but I have not found it yet. Feel free to contact me if you have.

• Simply create file: content-ecp.php
• And put he following code inside or you can leave it empty I guess.
• Save the file to your child-theme directory

<?php
/**
 * Term descriptions
 *
 * @package Total WordPress theme
 * @subpackage Partials
 * @version 4.3
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
 
//silenced this template part so that the plugin enhanced archive doe snot show anything - it loads it!
?>

2. Disable comment function the new custom post type

//==============================================================================
//disable comment function for enhancedcategory
add_action( 'init', 'remove_custom_post_comment' );

function remove_custom_post_comment() {
    remove_post_type_support( 'enhancedcategory', 'comments' );
}

3. Remove enhanced post type from search results

//exclude enhancedcategory
add_action( 'init', 'update_my_custom_type', 99 );
function update_my_custom_type() {
  global $wp_post_types;
 
  if ( post_type_exists( 'enhancedcategory' ) ) {
 
    // exclude from search results
    $wp_post_types['enhancedcategory']->exclude_from_search = true;
  }
}

Bonus Feature: Direct-Link to edit the Shop Main Page

Basically the main shop page does not have an edit page link in the admin bar as well. Here is a simple fix to add this missing feature: I dont’t even understand why it is not present in the first place. Weird.

//========================
//prevent woocommerce to render the description ON SHOP MAIN ARCHIVE
//https://siteorigin.com/thread/solution-to-display-woocommerce-shop-page-content/

function woocommerce_product_archive_description() {
 // Don’t display the description on search results page
  //if ( is_search() ) {
  return;
  //}
}

//==============================================================================
//ADD EDIT PAGE LINK TO SHOP HOMEPAGE
function my_admin_bar_link_shop() {
  
    //add only on shop page
    if (is_shop()) {
     
      $shop_id = get_option( 'woocommerce_shop_page_id' ); 
      
      global $wp_admin_bar;
      $wp_admin_bar->add_menu( array(
          'id' => 'edit',
          'parent' => false,
          'title' => __( 'Edit Page'),
          'href' => get_edit_post_link($shop_id)
      ));
    
    } else {
      return;
    }
    
}
add_action( 'wp_before_admin_bar_render', 'my_admin_bar_link_shop' );