IT ENGLISH BOARD

Remove sidebar / widgets from WooCommerce shop page

WordPress
Author
inrokhah
Date
2019-05-26 23:36
Views
2284
Hi,
Is there an easy way to remove the sidebar from the WooCommerce shop page?
I set the page layout to ‘Full with’ and to ‘No sidebar’, but that didn’t change anything.
Maybe some CSS?
Thanks!
Total Reply 13

  • 2019-05-26 23:36

    You can use the following CSS code to remove the sidebar by going to Appearance > Customize > Additional CSS and pasting it there.

    /*Remove sidebar*/
    div#secondary {
    display: none;
    }


  • 2019-05-26 23:37

    Thank you.
    I have added the code to the custom CSS, but this will remove the sidebar on ALl pages.
    This site is a Learning Management System (LearnDash) with WooCommerce and we want to keep the sidebar on the training pages (posts). The progress bar and course topics (widgets in the sidebar) need to remain on these pages.
    With the code you supplied, the sidebar (plus widgets) also disappears from the course pages/posts.
    Is there a way to remove the sidebar from the Woocommerce shop page only? Or just the widgets. I haven’t set the search function, Archives and Meta to be in the sidebar, but they appear anyway.
    Thanks for your help!


  • 2019-05-26 23:37

    You can try the following

    /*Remove sidebar*/
    .woocommerce div#secondary {
    display: none;
    }


  • 2019-05-26 23:39

    .archive.woocommerce.woocommerce-page #secondary,
    .archive.woocommerce.woocommerce-page.postid-1358 #secondary
    .archive.woocommerce.woocommerce-page.postid-2547 #secondary {
    display: none;
    }

    .archive.woocommerce.woocommerce-page #content-woocommerce,
    .postid-1358 #content-woocommerce,
    .postid-2547 #content-woocommerce {
    width: 97%;
    }


  • 2019-05-26 23:46

    /*Remove sidebar*/
    aside#secondary {
    display: none;
    }


  • 2019-05-26 23:46

    /*Remove side bar*/
    @media (min-width: 992px)
    .col-md-8 {
    width: 100%;
    }


  • 2019-05-26 23:49

    1. Create a Child theme. https://codex.wordpress.org/Child_Themes
    2. Create a new file in the child theme and called it woocommerce.php, and put this content in to it. https://gist.github.com/laranz/f8672dcc2e7241ca8021251d599bc48d

    It will remove sidebar from both the shop page and the product pages.


  • 2019-05-26 23:52

    body.woocommerce .main-content-inner {
    width: 100%;
    }
    body.woocommerce div#secondary {
    display: none;
    }


  • 2019-05-26 23:57

    select Full Width in the WooCommerce > archives and Single Product sections of the customizer.


  • 2019-05-27 00:45

    .single-product .sidebar {
    display: none !important;
    },


  • 2019-05-27 00:45

    .woocommerce #sidebar {
    display: none;
    }


  • 2019-05-27 00:46

    The above one worked!!!!


  • 2019-05-27 01:01

    Enable and Disable the WooCommerce Sidebar
    February 28, 2017In PHP, Themes, WooCommerce
    Need help with your WordPress Project? Hire an experienced developer today!
    WooCommerce can be a little tricky when dealing with the WordPress sidebar positioning and display. If you’re looking for a way to disable the WooCommerce sidebar, and make your Woocommerce pages full-width, get ready to do some tweaking! We will cover the right and wrong ways to disable or remove the sidebar from your Woo Pages, and make your shop look awesome! But first, let’s see how you can enable the sidebar, in case you messed something up.

    Enabling The Sidebar
    The WordPress sidebar should be active by default. If not, you might need to go to Dashboard → Appearance → Widgets, and add some widgets to the sidebar to make it visible. WooCommerce comes with custom widgets that you can select called “Show Overview Page” and “Single Product Page”. Just drag & drop them in your sidebar, and they should appear in your store.
    Also, you might need to go to the page in question, and select a template with a sidebar. This can happen when you have a Shop page that’s using a full-width template (without a sidebar).

    Disable The WooCommerce Sidebar
    There are a couple of different options you could use to disable the WooCommerce sidebar. We’ll go over all the options and show you how to disable the WooCommerce sidebar on your own:

    The “Wrong” Way
    There’s a good chance you read somewhere that the easiest way to remove the sidebar is to use the following lines of CSS:

    .single-product .sidebar {
    display: none !important;
    },
    or even something like:

    .woocommerce #sidebar {
    display: none;
    }
    The first snippet will hide the sidebar from your single product pages, while the second will hide it altogether on every WooCommerce page on your WordPress website. But the trick here, is that even though you won’t see the sidebar, it will still be rendered and take up space in your template. This is because CSS can’t stop an element from being rendered – it can just hide it. Also, this would not necessarily work for all themes, and if you’re using a custom theme it may not work properly so make sure to double check that.

    The Right Way to Disable the WooCommerce Sidebar
    To properly disable the WooCommerce sidebar, we’ll need to write some PHP code, and manually change what WordPress should render on the front-end. Here are a couple of solutions:

    1. Disabling Sidebar Using a WordPress Hook (Recommended Method)
    This is the best solution, and it is considered to be the “WordPress way” of doing things. Navigate to your theme’s functions.php file, and write the following code:

    function disable_woo_commerce_sidebar() {
    remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
    }
    add_action('init', 'disable_woo_commerce_sidebar');
    2. Disabling Sidebar in a Custom Template that Displays WooCommerce Products Alongside Regular WordPress Posts
    You can use the is_woocommerce() function to detect whether the current page that’s being accessed is a WooCommerce template or not. The function will return true if it is a Woo page, and false otherwise. So in our theme’s sidebar.php, we could write:

    if ( !is_woocommerce() ) {
    get_sidebar();
    }
    Using this logic, we can easily determine what type of page the user is accessing, and based on that, we can call the function that renders the sidebar. So let’s say that you open a product page (which is a WooCommerce template). Then the expression within the if statement will return false, and the sidebar function won’t be called – meaning the sidebar won’t be rendered.
    How does the !is_woocommerce() return false? Well, the is_woocommerce() function will return true, and the ! (not) operator will convert the “true” into the opposite value, which is false.

    3. Disabling Sidebar in a WooCommerce Template
    Navigate to woocommerce/templates/shop, and open up the sidebar.php file. Here, you need to comment out everything in the sidebar.php file using /* at the very top, and */ at the very bottom of the file. Save it, and see if it worked on the front-end.


Total 104
Number Title Author Date Votes Views
23
WordPress. How to hide time and date from the post page
author | 2019.06.10 | Votes 0 | Views 2204
author 2019.06.10 0 2204
22
What’s The Difference Between JPG, PNG And GIF?
author | 2019.06.07 | Votes 0 | Views 2145
author 2019.06.07 0 2145
21
How to Migrate your Site with All-in-One WP Migration
author | 2019.06.07 | Votes 0 | Views 2471
author 2019.06.07 0 2471
20
How do I Stop My Android Tablet from Sleeping?
author | 2019.06.04 | Votes 0 | Views 2147
author 2019.06.04 0 2147
19
How to keep your Android phone's screen on longer
author | 2019.06.04 | Votes 0 | Views 2556
author 2019.06.04 0 2556
18
Things You MUST DO Before Changing WordPress Themes (1)
inrokhah | 2019.05.29 | Votes 0 | Views 2379
inrokhah 2019.05.29 0 2379
17
How to Remove Author Name from WordPress Posts (2 Easy Ways)
inrokhah | 2019.05.29 | Votes 0 | Views 2142
inrokhah 2019.05.29 0 2142
Re:How to Remove Author Name from WordPress Posts (2 Easy Ways)
inrokhah | 2019.05.29 | Votes 0 | Views 2145
inrokhah 2019.05.29 0 2145
16
Remove sidebar / widgets from WooCommerce shop page (13)
inrokhah | 2019.05.26 | Votes 0 | Views 2284
inrokhah 2019.05.26 0 2284
15
Online documentation: Buttons Shortcode and Widget plugin
inrokhah | 2019.05.26 | Votes 0 | Views 2502
inrokhah 2019.05.26 0 2502
14
Buttons Shortcode and Widget
inrokhah | 2019.05.26 | Votes 0 | Views 2614
inrokhah 2019.05.26 0 2614
New