Title: Off Canvas Filter added close button
Last modified: September 29, 2018

---

# Off Canvas Filter added close button

 *  Resolved [Oded Talmon](https://wordpress.org/support/users/odedta/)
 * (@odedta)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/off-canvas-filter-added-close-button/)
 * 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 7 years, 8 months ago by [Oded Talmon](https://wordpress.org/support/users/odedta/).

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Theme Author [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/off-canvas-filter-added-close-button/#post-10740723)
 * Hello, thanks a lot 🙂
    I will add it for a future release.
 *  [Jethro Burnett Thorburn](https://wordpress.org/support/users/happyhealthyhonesthuman/)
 * (@happyhealthyhonesthuman)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/off-canvas-filter-added-close-button/#post-10897835)
 * 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](https://wordpress.org/support/users/odedta/)
 * (@odedta)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/off-canvas-filter-added-close-button/#post-10898027)
 * 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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/oceanwp/4.1.6/screenshot.png)
 * OceanWP
 * [Support Threads](https://wordpress.org/support/theme/oceanwp/)
 * [Active Topics](https://wordpress.org/support/theme/oceanwp/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/oceanwp/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/oceanwp/reviews/)

## Tags

 * [close](https://wordpress.org/support/topic-tag/close/)
 * [close button](https://wordpress.org/support/topic-tag/close-button/)
 * [filter](https://wordpress.org/support/topic-tag/filter/)
 * [off-canvas](https://wordpress.org/support/topic-tag/off-canvas/)
 * [off-canvas filter](https://wordpress.org/support/topic-tag/off-canvas-filter/)

 * 3 replies
 * 3 participants
 * Last reply from: [Oded Talmon](https://wordpress.org/support/users/odedta/)
 * Last activity: [7 years, 6 months ago](https://wordpress.org/support/topic/off-canvas-filter-added-close-button/#post-10898027)
 * Status: resolved