Using Visual Composer row in footer

Question

We have a Wordpress web site which we built using the Visual Composer plugin.

Our customer liked one of the widgets and wanted it to be on every page's footer, but since we also use Woocommerce we can't edit them as classic VC Wordpress pages.

We thought we could add same shortcodes to footer.php, so I copied that widget's VC shortcodes and put them between php lines then pasted this to footer.php:

<?php echo do_shortcode("<p>[vc_row rt_row_background_width="fullwidth" rt_row_content_width="default" rt_row_style="light-style" rt_row_height="" rt_column_gaps="" rt_row_shadows="" rt_row_borders="" rt_bg_effect="parallax" rt_bg_parallax_effect="4" rt_bg_image_repeat="repeat" rt_bg_size="cover" rt_bg_position="center center" rt_bg_layer="" rt_bg_video_format="self-hosted" rt_row_paddings="true" rt_padding_top="105" rt_padding_bottom="80" rt_bg_image="5130" rt_class="rt-6950250" rt_paddings="80,80,," rt_margins=",,," rt_content_margins=",,," rt_tablet_paddings=",,," rt_tablet_margins=",,," rt_tablet_content_margins=",,," rt_sp_paddings=",,," rt_sp_margins=",,," rt_sp_content_margins=",,,"][vc_column rt_bg_effect="classic" rt_bg_image_repeat="repeat" rt_bg_size="auto auto" rt_bg_position="right top" rt_bg_attachment="scroll" rt_col_paddings="true" rt_wrp_col_paddings="false" rt_padding_left="15%" rt_padding_right="15%" rt_bg_color="" rt_bg_overlay_color="" rt_class="rt-1199465" rt_margins="," rt_paddings=",,15%,15%" rt_wrapper_paddings=",,," rt_tablet_margins="," rt_tablet_paddings=",,," rt_tablet_wrapper_paddings=",,," rt_sp_margins="," rt_sp_paddings=",,20,20" rt_sp_wrapper_paddings=",,,"][rt_heading style="style-4" size="h4" font_color_type="" font="" custom_font_size="" link="" link_open="_self" punchline="" rt_class="rt-8254094"]Markalarımız[/rt_heading][vc_column_text 0=""]</p>
<p style="text-align: center;">1972 yılında Küçükpazar'da temeli atılan ticarethanemiz, Tahtakale'den sonra İstoç 26.Ada no:31-33 Mahmutbey Bağcılar İSTANBUL adresinde EMRE GIDA PAZ. SAN.VE DIŞ TİC.LTD ŞTİ olarak; değerli müşterilerimize ANCHOR, MASK ve BUTTERFLY markalı ürünlerimizi tedarik edip en uygun fiyata sunmaya devam etmektedir.</p>
<p>[/vc_column_text][vc_empty_space height="30px"][rt_photo_gallery image_ids="5123,5127,5358" layout_style="grid" image_size="rtframework_retina" item_width="1/3" nogaps="true" links="false" captions="false"][/vc_column][/vc_row][vc_row rt_row_background_width="fullwidth" rt_row_content_width="default" rt_row_style="default-style" rt_row_height="" rt_column_gaps="" rt_row_shadows="" rt_row_borders="" rt_bg_effect="classic" rt_bg_image_repeat="repeat" rt_bg_size="cover" rt_bg_position="right top" rt_bg_attachment="scroll" rt_bg_layer="" rt_bg_video_format="self-hosted"][vc_column rt_bg_effect="classic" rt_bg_image_repeat="repeat" rt_bg_size="auto auto" rt_bg_position="right top" rt_bg_attachment="scroll"][vc_column_text]</p>
<p>' );?>[/vc_column_text][/vc_column][/vc_row]</p>"); ?>

However, the footer didn't load.

Original widget shortcode:

<p>[vc_row rt_row_background_width="fullwidth" rt_row_content_width="default" rt_row_style="light-style" rt_row_height="" rt_column_gaps="" rt_row_shadows="" rt_row_borders="" rt_bg_effect="parallax" rt_bg_parallax_effect="4" rt_bg_image_repeat="repeat" rt_bg_size="cover" rt_bg_position="center center" rt_bg_layer="" rt_bg_video_format="self-hosted" rt_row_paddings="true" rt_padding_top="105" rt_padding_bottom="80" rt_bg_image="5130" rt_class="rt-6950250" rt_paddings="80,80,," rt_margins=",,," rt_content_margins=",,," rt_tablet_paddings=",,," rt_tablet_margins=",,," rt_tablet_content_margins=",,," rt_sp_paddings=",,," rt_sp_margins=",,," rt_sp_content_margins=",,,"][vc_column rt_bg_effect="classic" rt_bg_image_repeat="repeat" rt_bg_size="auto auto" rt_bg_position="right top" rt_bg_attachment="scroll" rt_col_paddings="true" rt_wrp_col_paddings="false" rt_padding_left="15%" rt_padding_right="15%" rt_bg_color="" rt_bg_overlay_color="" rt_class="rt-1199465" rt_margins="," rt_paddings=",,15%,15%" rt_wrapper_paddings=",,," rt_tablet_margins="," rt_tablet_paddings=",,," rt_tablet_wrapper_paddings=",,," rt_sp_margins="," rt_sp_paddings=",,20,20" rt_sp_wrapper_paddings=",,,"][rt_heading style="style-4" size="h4" font_color_type="" font="" custom_font_size="" link="" link_open="_self" punchline="" rt_class="rt-8254094"]Markalarımız[/rt_heading][vc_column_text 0=""]</p>
<p style="text-align: center;">1972 yılında Küçükpazar'da temeli atılan ticarethanemiz, Tahtakale'den sonra İstoç 26.Ada no:31-33 Mahmutbey Bağcılar İSTANBUL adresinde EMRE GIDA PAZ. SAN.VE DIŞ TİC.LTD ŞTİ olarak; değerli müşterilerimize ANCHOR, MASK ve BUTTERFLY markalı ürünlerimizi tedarik edip en uygun fiyata sunmaya devam etmektedir.</p>
<p>[/vc_column_text][vc_empty_space height="30px"][rt_photo_gallery image_ids="5123,5127,5358" layout_style="grid" image_size="rtframework_retina" item_width="1/3" nogaps="true" links="false" captions="false"][/vc_column][/vc_row][vc_row rt_row_background_width="fullwidth" rt_row_content_width="default" rt_row_style="default-style" rt_row_height="" rt_column_gaps="" rt_row_shadows="" rt_row_borders="" rt_bg_effect="classic" rt_bg_image_repeat="repeat" rt_bg_size="cover" rt_bg_position="right top" rt_bg_attachment="scroll" rt_bg_layer="" rt_bg_video_format="self-hosted"][vc_column rt_bg_effect="classic" rt_bg_image_repeat="repeat" rt_bg_size="auto auto" rt_bg_position="right top" rt_bg_attachment="scroll"][vc_column_text]</p>
<p>' );?>[/vc_column_text][/vc_column][/vc_row]</p>

Can someone help me with this?

One thing you could try, is to change the first and last `"` to `'` (double to single) hereby fixing most of your concats. but there still might be errors — Stender, Dec 11 '18 at 14:09
I would just build it with html, and use VCs classes - this whole thing is a mess — Stender, Dec 11 '18 at 14:11

score 0 · Answer 1 · answered Dec 11 '18 at 13:41

Are you getting any errors?

But the last line is wrong atleast.

<p>' );?>[/vc_column_text][/vc_column][/vc_row]</p>"); ?>

I think you have to remove the '); ?> in the line, because it cant run the do_shortcode() function. Something like this:

<p>[/vc_column_text][/vc_column][/vc_row]</p>"); ?>

score 0 · Answer 2 · answered Dec 11 '18 at 14:20

First at all in general shotcodes do not use any tag in it. They look like

 [contact-form-7 id="91" title="quote"]

Have a closer look at [the documentation][1]. Your shortcode is displayed, when you open your page in the backend of your wordpress system an view it in 'classic mode'.

For your issues this might be helpful.

But maybe this is easier for you: Simply inspect (right click > show source code) your page where you are using your footer already.
Then copy your footer s html to your template file (footer.php).

See the html code (you can inspect) for the vc img element as example:

<div  class="wpb_single_image wpb_content_element vc_align_left  vc_custom_1543314490168  hidden-element">
    <figure class="wpb_wrapper vc_figure">
        <div class="vc_single_image-wrapper   vc_box_border_grey">
            <img width="640" height="576" src="http://your-page.com/wp-content/uploads/x/y/z.png" class="vc_single_image-img attachment-full" alt="" srcset="http://your-page.com/wp-content/uploads/x/y/z.png 640w, http://your-page.com/wp-content/uploads/x/y/z.png 300w" sizes="100vw" />
        </div>
    </figure>
</div>

Another option as mentioned: just use the vc classes instead.

score 0 · Answer 3 · answered Dec 11 '18 at 17:48

Visual Composer isn't initialized for every page, you probably need to call the assets from your theme functions:

add_action( 'wp_enqueue_scripts', 'add_wpbakery_assets' );

function add_wpbakery_assets() {
    wp_enqueue_script( 'wpb_composer_front_js' );
    wp_enqueue_style( 'js_composer_front' );
    wp_enqueue_style( 'js_composer_custom_css' );
}

Probably easier to do what @Stender suggests though and render the code within a VC page then just copy the HTML to your footer.

Using Visual Composer row in footer

3 Answers3