Support » Theme: OceanWP » Off Canvas Filter added close button

  • Resolved odedta

    (@odedta)


    Hello,

    I couldn’t find an off canvas filter close button anywhere so I created the functionality, i’m pasting the code that needs to be added to your theme if you would like a close button.

    In your styles file add the following:

    /*
    * Add close button to off canvas sidebar in woocommerce shop page
    */
    $( '.oceanwp-off-canvas-filter' ).on( 'click', function() {
    	$( '.oceanwp-off-canvas-sidebar' ).removeClass( 'off-canvas-sidebar-hidden' );
    	$( '#oceanwp-off-canvas-sidebar-wrap' ).removeClass( 'off-canvas-sidebar-wrap-hidden' );
    } );
    $( '.close-off-canvas-sidebar' ).on( 'click', function() {
    	$( 'body' ).removeClass( 'off-canvas-enabled' );
    	$( '.oceanwp-off-canvas-sidebar' ).addClass( 'off-canvas-sidebar-hidden' );
    	$( '#oceanwp-off-canvas-sidebar-wrap' ).addClass( 'off-canvas-sidebar-wrap-hidden' );
    } );

    In your styles file add the following:

    .off-canvas-sidebar-wrap-hidden {
    	-moz-opacity: 0 !important;
    	-webkit-opacity: 0 !important;
    	opacity: 0 !important;
    	visibility: hidden !important;
    }
    .off-canvas-sidebar-hidden {
    	right: -100%;
    }
    .close-off-canvas-sidebar {
    	cursor: pointer;
    }

    In /wp-content/themes/oceanwp-child-theme/woocommerce/owp-off-canvas-sidebar.php on line 13 (after ‘.oceanwp-off-canvas-sidebar’):

    <div class="oceanwp-off-canvas-sidebar-close-btn">
    	<i class="fa fa-times close-off-canvas-sidebar" aria-hidden="true"></i>
    </div>

    Enjoy!

    • This topic was modified 1 year ago by  odedta.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author oceanwp

    (@oceanwp)

    Hello, thanks a lot 🙂
    I will add it for a future release.

    Jethro Burnett Thorburn

    (@happyhealthyhonesthuman)

    Good Day Odedta and OceanWP,

    Thank you for the help! I really sincerely appreciate it!

    I am trying to add a close button to my WooCommerce Off-Canvas Filter. On Mobile I am worried that if people don’t see a close button then they will try to close the filter by pressing the Back key on their phone (which doesn’t actually close the filter it loads a new page and returns the user to the page they previously viewed).

    Odedta, I am struggling to insert the code you provided above into the correct space, PARTICULARLY the first piece of code. I managed to insert the 2nd and 3rd pieces of code without any error messages. I am getting lots of “unexpected token” errors when I insert the 1st piece of code into the Styles.ss file.

    I have screenshots that can explain but I don’t see a place where I can upload media files. Do I need to use Dropbox or something like that and share you a link?

    odedta

    (@odedta)

    You are absolutely right, i made a typo, the first piece of code needs to go to your scripts file since it’s javascript. I can’t seem to edit my original post anymore, anyway, if you’re having trouble send me a message on facebook (Oded Talmon).

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Off Canvas Filter added close button’ is closed to new replies.