IT ENGLISH BOARD

Remove sidebar / widgets from WooCommerce shop page

WordPress
Author
inrokhah
Date
2019-05-26 23:36
Views
1830
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
103
Join a Microsoft Teams meeting
author | 2020.09.22 | Votes 0 | Views 2826
author 2020.09.22 0 2826
102
How to delete songs and albums from your Google Play Music library
author | 2020.09.19 | Votes 0 | Views 2996
author 2020.09.19 0 2996
101
Watch Prime Video on Chromecast
author | 2020.09.14 | Votes 0 | Views 2982
author 2020.09.14 0 2982
100
How to Fix the Win­dows 10 We Could­n’t Con­nect to the Update Ser­vice Issue (2)
author | 2020.09.09 | Votes 0 | Views 3734
author 2020.09.09 0 3734
99
IONOS Joomla! Standard Installation
author | 2020.09.02 | Votes 0 | Views 1798
author 2020.09.02 0 1798
98
How to improve the life of a Battery: (1)
author | 2020.08.25 | Votes 0 | Views 1829
author 2020.08.25 0 1829
97
Laptop battery not charging
author | 2020.08.21 | Votes 0 | Views 2142
author 2020.08.21 0 2142
96
Plugged in, not charging (1)
author | 2020.08.21 | Votes 0 | Views 1958
author 2020.08.21 0 1958
95
How to add reCaptcha plugin to a custom form on my WordPress website?
author | 2020.08.13 | Votes 0 | Views 2117
author 2020.08.13 0 2117
94
I can't log in to the WordPress admin dashboard after installing and activating Limit Attempts plugin
author | 2020.08.13 | Votes 0 | Views 1808
author 2020.08.13 0 1808
New