WPBakery Page Builder not rendering shortcodes on WooCommerce Product Category pages

Question

I'm developing quite a complex theme in which I have created custom post types for "Headers" and "Footers" for which I have enabled WPBakery Page Builder (currently using v5.5.5 in Wordpress 4.9.8).

In header.php, the Header post is pulled in and rendered inside the <header> tag, and then in footer.php the Footer post is pulled in and rendered inside the <footer> tag.

It all works perfectly, except when going to a product category page in WooCommerce, then the header and footer just displays as the page builder's raw shortcodes and doesn't parse them. Everything else with WooCommerce is fine; The shop page, individual product pages, the cart, checkout, all fine. It's just the categories for some reason.

Here is the code in header.php:

<?php

$this_page_id = get_queried_object_id();

$gd_page_header = get_post_meta( $this_page_id, 'gd_page_header' );
if(empty($gd_page_header) || count($gd_page_header) == 0 || $gd_page_header[0] == 'default'){
    $header_id = intval(get_option('default_header'));
}else{
    $header_id = $gd_page_header[0];
}
if(!empty($header_id) && $header_id != '' && $header_id != 'none'){
    $post   = get_post( $header_id );
    $transparent_header = get_post_meta( $post->ID, 'transparent_header', true );
    $sticky_header = get_post_meta( $post->ID, 'sticky_header', true );
    $sticky_desktop_only = get_post_meta( $post->ID, 'sticky_desktop_only', true );
    if($sticky_header == '1'){
        $header_class = 'sticky';
        if($sticky_desktop_only == '1'){
            $header_class .= ' dt_only';
        }
    }elseif($transparent_header == '1'){
        $header_class = 'transparent';
    }else{
        $header_class = '';
    }
    $content = $post->post_content;
    $content_css = visual_composer()->parseShortcodesCustomCss( $content );
    if ( ! empty( $content_css ) ) { ?>
         <style type="text/css" data-type="vc_shortcodes-custom-css">
                     <?php echo strip_tags( $content_css ); ?>
         </style>
    <?php } ?>

    <header class="<?php echo($header_class); ?>">
        <div id="container" class="container clearfix">
            <?php echo apply_filters( 'the_content', $content ); ?>
        </div>
    </header>
<?php } ?>

And then here is the code in page.php which WooCommerce is pulling its content into:

<?php get_header(); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <main id="post-<?php the_ID(); ?>">
            <div id="container" class="container clearfix">
                <?php the_content(); ?>
            </div>
        </main>
    <?php endwhile; endif; ?>
<?php get_footer(); ?>

Here is the homepage of my test site: http://sandbox.graphicdetail.co.nz/

As you can see, everything displays nicely there. Everything also displays nicely on the Shop page: http://sandbox.graphicdetail.co.nz/shop/

But when we get to a category page it all falls apart: http://sandbox.graphicdetail.co.nz/product-category/toys/

I know WPBakery Page Builder is still active on this page though because you can see in the header.php code where it has:

$content_css = visual_composer()->parseShortcodesCustomCss( $content );
if ( ! empty( $content_css ) ) { ?>
     <style type="text/css" data-type="vc_shortcodes-custom-css">
                 <?php echo strip_tags( $content_css ); ?>
     </style>
<?php } ?>

... That does appear to be working fine because when I view the page with the inspector I can see the css is populating correctly.

Hopefully someone here might have some idea of where I have gone horribly, horribly wrong?

looks like the visual composer js file js_composer_front.min.js is missing on your category page — subroutines
Any idea why it would choose to not enqueue on the category page and how I can make it load without un-neccessarily double-loading on all the other pages? Need to get it to also check that WPBakery Page Builder is actually installed and activated before doing so too. — Graphic Detail
Ok, I have managed to force js_composer_front.min.js to load on the category pages, but still there is no change to the appearance of the page. — Graphic Detail

Graphic Detail Graphic Detail · Accepted Answer · 2018-11-18T19:36:58

For the benefit of anyone else who ever comes across this problem, I finally solved this puzzle, all thanks to this article (particularly the section on "Template Files"):

http://stephanieleary.com/2010/02/using-shortcodes-everywhere/

So I had this code in my header.php file:

<?php $content = $post->post_content; ?>

<header class="<?php echo($header_class); ?>">
    <div id="container" class="container clearfix">
        <?php echo apply_filters( 'the_content', $content ); ?>
    </div>
</header>

I could tell that the content was all being pulled in correctly and the CSS was being parsed correctly, etc, but it's just that WPBakery Page Builder's shortcodes weren't being parsed for some reason.

So then, after reading Stephanie Leary's article, I decided to try this:

<?php
    $content = $post->post_content;
    $content = apply_filters( 'the_content', $content );
?>

<header class="<?php echo($header_class); ?>">
    <div id="container" class="container clearfix">
        <?php echo do_shortcode($content); ?>
    </div>
</header>

So, instead of just trying to echo the apply_filters, I've populated the $content variable with the apply_filters and then parsed $content as a shortcode and whalah! It worked!

WPBakery Page Builder not rendering shortcodes on WooCommerce Product Category pages

2 Answers