Support » Plugin: Off-Canvas Sidebars & Menus (Slidebars) » How to add filters attribute

  • Resolved kfashionskkd

    (@kfashionskkd)


    Hello,
    I have just installed your plugin. I was looking for Off canvas plugins so i can use it as sidebar woocommerce filters.

    I am new to this.. Can you share any tutorials or help me out… How to add my Widgets ( Filters / Shortcode of my Woocommerce Product Filter ) in the off canvas ?

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Jory Hogeveen

    (@keraweb)

    Hi @kfashionskkd

    Sorry I don’t have any tutorials available.
    Please make sure you’ve done the installation correctly: https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Theme-setup

    After that you can add a new off-canvas sidebar. This will (by default) create a new sidebar area in which you can add widgets (like the WooCommerce filters).

    To trigger these off-canvas sidebars you can add sidebar triggers in your menu, other (not off-canvas) sidebars and/or with a shortcode where you want.
    https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Shortcodes

    Cheers, Jory

    kfashionskkd

    (@kfashionskkd)

    Hello,

    need help in adding hooks

    Error I received when i validate hooks after entering the values : https://prnt.sc/u39bqm

    Hooks Entered : https://prnt.sc/u39bj1

    Offcanvas Sidebar Widgets : https://prnt.sc/u39bxo ( but not visible in Shop Page )

    Plugin Author Jory Hogeveen

    (@keraweb)

    Hello @kfashionskkd

    Did you follow and completed the installation guide?
    https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Theme-setup

    You probably didn’t add the hooks in your theme.

    Also, since WP 5.2 your theme probably already has proper hooks in place:
    Before: wp_body_open
    After: wp_footer
    Please check those as before changing your theme.

    Cheers, Jory

    kfashionskkd

    (@kfashionskkd)

    Hello , I am not much into coding

    Could you let me know how to add hooks in theme like what code should be typed.

    Sharing my Header.php from theme editor , I am using Storefront Them

    <?php
    /**
     * The header for our theme.
     *
     * Displays all of the <head> section and everything up till <div id="content">
     *
     * @package storefront
     */
    
    ?><!doctype html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
        
    <?php wp_body_open(); ?>
    
    <?php do_action( 'storefront_before_site' ); ?>
    
    <div id="page" class="hfeed site">
    	<?php do_action( 'storefront_before_header' ); ?>
    
    	<header id="masthead" class="site-header" role="banner" style="<?php storefront_header_styles(); ?>">
    
    		<?php
    		/**
    		 * Functions hooked into storefront_header action
    		 *
    		 * @hooked storefront_header_container                 - 0
    		 * @hooked storefront_skip_links                       - 5
    		 * @hooked storefront_social_icons                     - 10
    		 * @hooked storefront_site_branding                    - 20
    		 * @hooked storefront_secondary_navigation             - 30
    		 * @hooked storefront_product_search                   - 40
    		 * @hooked storefront_header_container_close           - 41
    		 * @hooked storefront_primary_navigation_wrapper       - 42
    		 * @hooked storefront_primary_navigation               - 50
    		 * @hooked storefront_header_cart                      - 60
    		 * @hooked storefront_primary_navigation_wrapper_close - 68
    		 */
    		do_action( 'storefront_header' );
    		?>
    
    	</header><!-- #masthead -->
    
    	<?php
    	/**
    	 * Functions hooked in to storefront_before_content
    	 *
    	 * @hooked storefront_header_widget_region - 10
    	 * @hooked woocommerce_breadcrumb - 10
    	 */
    	do_action( 'storefront_before_content' );
    	?>
    
    	<div id="content" class="site-content" tabindex="-1">
    		<div class="col-full">
    
    		<?php
    		do_action( 'storefront_content_top' );
    
    Plugin Author Jory Hogeveen

    (@keraweb)

    Hi @kfashionskkd

    Please, as I said, fully read and follow the installation guidelines:
    https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Theme-setup

    As you can see, there is already wp_body_open(); in your header.php file so you don’t need any changes.
    Just fill in the correct hooks in the plugin settings.
    See my previous comment.

    Cheers, Jory

    Hello,

    Yeah Done. I needed to add the Php tags as well .

    But still in mobile preview the sidebar is shown at bottom.. Any solution for that to make the sidebar in mobile look just below the headers

    Plugin Author Jory Hogeveen

    (@keraweb)

    Hi @kfashionskkd

    Do you have a link for me to check?
    This is most likely a CSS issue.

    Cheers, Jory

    The URL is now in the first post.

    By using the widget option PLugin, The off canvas will be visible only on Mobile and tablets .

    The sidebar is located on left side but on mobile view it is showing at bottom after the products

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.