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

Question

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)

Solution 1

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

Solution 2

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.

Solution 3

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
}

Solution 4

.woocommerce-cart .sidebar {
    display: none;
}

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

add this in custom/style.css.

Solution 5

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;

View more solutions

Comments

[Oliver Martin]

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?

[Oliver Martin]

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.

[helgatheviking]

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.

[Gleb Kemarsky]

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.

[AlphaX]

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.

[AlphaX]

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.

[The Coding Bus]

so how we can remove the code.. that loads sidebar?

[Steve]

Of all the solutions offered, this is the most simple and requires no code editing.