Off Canvas Filter added close button

  • Resolved Oded Talmon

    (@odedta)


    6 years, 1 month ago

    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 6 years, 1 month ago by Oded Talmon.
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?

    Thread Starter Oded Talmon

    (@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.