How do I remove Woocommerce sidebar from cart, checkout and single product pages?
Asked Answered
E

6

7

Like many people that start using woocommerce for the first time I need to know how to customise it. In my particular situation I want to remove the sidebar from the Cart, Checkout and single product pages. My sidebar is defined and called from sidebar.php using the code below:

<?php dynamic_sidebar('global-sidebar'); ?>

I have tried for a long time to find an answer that works but I can't seem to find the correct code or solution. Perhaps asking the question myself will work. By the way I really appreciate the answers in the other articles and how-to's but they don't work for me.

Before I go any further I am using Bootstrap (latest version as of 2014) to style my Wordpress website. Not sure if that matters but maybe it does somehow.

Can someone please tell me how I find and then tell Woocommerce not to display any kind of sidebar on the Cart, Checkout and Single Product pages?

p.s. The website can be found here > wp.wunderful.co.uk (staging site for a client website project)

Else answered 6/9, 2014 at 13:14 Comment(4)
Did you check the widgets menu on those pages?Pluviometer
I'm not familiar with how the widgets work on these pages. The woocommerce pages confuse me, hence the request for help. Thank you for your comment though.Else
If it is alright with you, I can check it for you in the admin panel.Pluviometer
I am avoiding doing this so no sorry.Else
C
8

Go to "Cart" page from dashboard pages, from "Page Attribute Section" -> "Templates" choose "Full Width" this will give you a page without sidebar.

Concision answered 11/10, 2017 at 9:42 Comment(1)
Of all the solutions offered, this is the most simple and requires no code editing.Kerplunk
S
5

In theory, something like the following ought to work, but I haven't tested it. (To be added to your theme's functions.php)

function so_25700650_remove_sidebar(){
    if( is_checkout() || is_cart() || is_product() ){
        remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
    }
}
add_action('woocommerce_before_main_content', 'so_25700650_remove_sidebar' );

If you look at the Woo templates you will see

<?php
    /**
     * woocommerce_sidebar hook
     *
     * @hooked woocommerce_get_sidebar - 10
     */
    do_action( 'woocommerce_sidebar' );
?>

This is Woo saying: "Display the sidebar here". But it is adding the woocommerce_get_sidebar function to the woocommerce_sidebar hook... which is convenient because it allows you to unhook that function like I've shown above. Finally, I am using Woo's conditional logic to only unhook the function from its action on the pages you requested.

I'm running my function on the woocommerce_before_main_content hook, which I think should work assuming your theme hasn't removed that hook. If so, then you could probably use wp_head or something that is guaranteed to be there, though then you'd probably want to check that the is_checkout(), etc functions exist or risk breaking your theme should you ever deactivate WooCommerce. As I have it, i should only run on WooCommerce-specific pages and so checking if the WooCommerce functions are defined is probably overkill.

Important Note:

This assumes the default theme or a theme that isn't running its own custom sidebar functions. If your theme is doing something else you will need to investigates its particular functions and templates.

Sparklesparkler answered 7/9, 2014 at 11:31 Comment(4)
I like the simple to digest answer you supplied, thank you. However can you clarify, do I need to delete the "woocommerce_sidebar hook" code and replace it with the remove_sidebar code or does it just go underneath the woocommerce_sidenar code? Also what specific page(s) do I copy and paste the code you supplied?Else
To clarify I copied and pasted your code onto the single-product.php page beneath the original hook code and it didn't remove the sidebar.Else
You could copy all the Woo templates over into your theme and delete the sidebar hook where desired, but I think it would be easiest to paste my code into your theme's functions.php.Sparklesparkler
Woocommerce provides the woocommerce_before_main_content hook on achieve/shop/product_cat pages only.. You can use the woocommerce_before_cart hook on the cart page and the woocommerce_before_checkout_form hook on the checkout page. And you need to make the .content-area wider too.Milena
Z
1

What you should do is to create a files called woocomemrce.php in your theme if it doesn't already exists. Then you should look at your page template files for full width and for page with sidebar to see how they are structured and see where they differ. Then copy the contents of one the files into woocommerce.php and replace the loop with woocommerce_content(), see this page for details. Lastly see where the different page templates differ and then use if-statements in the places where they differ.

if( is_post_type_archive( 'product' ) ) :
    //Content to display in the list view (i.e. with sidebar)
else :
    //Content to display all other views (i.e. without sidebar)
endif;
Zoezoeller answered 7/9, 2014 at 12:39 Comment(0)
I
1
.woocommerce-cart .sidebar {
    display: none;
}

.woocommerce-cart .content-area {
    width: 100%;
}

add this in custom/style.css.

Islamite answered 20/5, 2016 at 10:19 Comment(1)
this is a work around but not a great solution. a display: none; will still load the content even though it's not visible, so it would be better to remove the code that loads the sidebar in the first place to optimise performance.Femur
T
1

From

https://wordpress.org/support/topic/remove-sidebar-for-woocommerce-cart-and-checkout-pages/

On your theme, likely subtheme, function.php

add_action('wp_head', 'hide_sidebar' ); function hide_sidebar(){ if(is_cart() || is_checkout()){ ?>
<style type="text/css">
    #secondary {
        display: none;
    }
</style>
<?php
}
Treenware answered 21/3, 2018 at 4:41 Comment(2)
this is a work around but not a great solution. a display: none; will still load the content even though it's not visible, so it would be better to remove the code that loads the sidebar in the first place to optimise performance.Femur
so how we can remove the code.. that loads sidebar?Eventually
M
0

To remove sidebar from the Cart, Checkout and single product pages you want to use action hook in function.php file -

    add_action('woocommerce_before_main_content', 'remove_sidebar' );
    function remove_sidebar()
    {
        if( is_checkout() || is_cart() || is_product()) { 
         remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
       }
    }

Here you can get WooCommerce Action and Filter Hook -https://docs.woothemes.com/wc-apidocs/hook-docs.html

Millepede answered 18/7, 2016 at 4:54 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.