Custom "sidebars" in WP - php

Question

I am running a Avada theme together with WooCommerce on a wordpress site.
The issue is that I'm trying to get a search function on the top of the page, but only in responsive mode (on mobile devices). I've been able to add a third option for a sidebar in woocommerce. this shows up in the config (where to choose which widgets should go in). But I can NOT get it to show.
I know that you get the original sidebars like this (copied directly from original archive-product.php):
<?php
do_action( 'woocommerce_sidebar' );
?>
So I figured it should be possible to call for our own sidebar with the following line :
<?php
do_action( 'woo_sidebar-3' );
?>
This does not work though.
Since this has to be able to be shown only on responsive devices we used a custom css option of fusion to hide the other sidebars the following way :
#media only screen and (max-width: 720px) {
#sidebar {
display: none;
}
}
Which of course is too simple since it would block ALL sidebars. But that's something we could easily change. So far, the 3rd sidebar that we created does not show on responsive nor on desktop versions of the site. while the others do show on the desktop but not on the responsive (as desired).
EDIT-:
So i tried this with the following code :
<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('woo_sidebar_3') ) { ?>
<p>Oops... this displays if the topbar is not set up</p>
<?php } ?>
It shows the error as given in the code, so it tries to pull the sidebar as we created. But it doesn't show. Is it because the following might not work correctly? :
'woo_sidebar_3' => array(
'label' => esc_html__( 'Global WooCommerce Product Sidebar 3', 'Avada' ),
'description' => esc_html__( 'Custom sidebar 3', 'Avada' ),
'id' => 'woo_sidebar_3',
'default' => 'None',
'type' => 'select',
'choices' => $sidebar_options,
'active_callback' => array( 'Avada_Options_Conditionals', 'is_woo' ),
Which was copied from the one right above that, which is called woo_sidebar_2?
EDIT 2 -:
Here is a JSfiddle with the complete sidebars.php code in it, and the dynamic_sidebar code (as HTML). the error I was pointing at is also visible when you run te script.

Answer 1

I'm not familiar enough with the Avada theme to know what some of those options mean and your block of code doesn't show the register_sidebar() call even though Avada must be using it.
To make things simpler, you could use standard WordPress code for registering a widget area
In your theme (ideally a child theme) add:
function so_38033924_widgets_init() {
register_sidebar( array(
'name' => __( 'Global WooCommerce Product Sidebar 3', 'your-theme' ),
'id' => 'woo_sidebar_3',
'description' => __( 'Custom sidebar 3', 'your-theme' ),
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'so_38033924_widgets_init' );
You would need to make sure the before_widget, before_title, type of parameters match the parent theme so that your widget will get the same styling.
And then your template code looks right to me:
<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('woo_sidebar_3') ) { ?>
<p>Oops... this displays if the topbar is not set up</p>
<?php } ?>