WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
Remove Sidebar from product Page (25 posts)

  1. emike09
    Member
    Posted 1 year ago #

    Is there a way to remove the sidebar from the product pages?

    http://wordpress.org/extend/plugins/woocommerce/

  2. mariaarty
    Member
    Posted 1 year ago #

    there is a problem with the sidebar in the product pages they show under the products not on the side like it should be i had this problem and i finally found the fix
    There's a clear div that is messing up with the layout. Please try this on your custom.css

    .container .clear { clear: none;}

    or if you wanted to remove the sidebar at all from these pages then write this instead:

    .woocommerce #sidebar{display:none;}

    both worked for me, i hope they work for you

  3. carlosgalvao
    Member
    Posted 1 year ago #

    I'm having the same problem in my website http://www.babyplusbrasil.com.br (http://www.babyplusbrasil.com.br/loja/babyplus-sistema-de-educacao-pre-natal/).
    I've tried mariaarty's suggestions but it didn't work.

    Any other way to fix that?

    Tks a lot.

    Carlos Galvao

  4. samueljeden
    Member
    Posted 1 year ago #

    carlos, your issue is your theme limiting the width of the single page (outside of woocommerces hands)

    #home-content, #content {
    width: 645px;
    margin: 0 10px;
    }
  5. carlosgalvao
    Member
    Posted 1 year ago #

    Yes, Samuel, but where I can change the product page? There's no page layout option in it, likewise every other editable pages in my wordpress. If I just remove the side bar, I would gain more space and have this problem no more. Any hint? I can't change my theme in this stage of the project.

  6. bheadrick
    Member
    Posted 1 year ago #

    use template files

    also, it's actually better to use this to remove the woo sidebar:

    remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar',10);

    of course, you'd also need to fix your css as samuel mentioned like this:

    .woocommerce #content{width:100%}

  7. Killertron
    Member
    Posted 1 year ago #

    Hi I am very new to coding and have been having the same issues with my site that uses the Crafty Cart theme http://www.kixclothing.com/clothingstore

    How do I fix this?

  8. kwatts22
    Member
    Posted 11 months ago #

    Here is how to remove the sidebar.

    go to wp-content/plugins/woocommerce

    in file single-product.php remove the following code

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

    next edit the file archive-product.php and remove the following code

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

    next we have to edit the style.css in your theme folder
    find
    #content-woocomerece
    add the following before the } tag on the last line
    width:100%;

    NOTE: You can not add the /* */ to the line it will not comment it out.

  9. creightonthomas
    Member
    Posted 10 months ago #

    I was able to locate and delete the first 2 steps listed above by kwatts22. However I am having troubles finding the #content-woocomerece or .woocommerce #content.

    My site is http://coloradosoap.com/ and I am using the U-Design Template.

    Thank you in advance and I can't wait to get rid of the sidebar!

  10. kwatts22
    Member
    Posted 10 months ago #

    I looked at your site. It is calling for the wordpress sidebar. Goto Pages Shop and on the right set the template ti full width or no sidebar and click update. You may have to hold ctrl and press F5 for your page to refresh the new changes and not display the old cache version

  11. creightonthomas
    Member
    Posted 10 months ago #

    Thank you kwatts22 for the speedy reply!

    I went in and changed the shop page to full width and it did not make any changes. The pages below are not in the pages tab, but rather in the products tab.

    http://coloradosoap.com/product/blue-fir-needle-soap-bits-for-re-batching/
    http://coloradosoap.com/product/bulk-soap-2/
    http://coloradosoap.com/product/bulk-soap/

    If I wanted to add the "Cart" to the sidebar, I would put it in the Sibebar 8 as instructed there. It is very easy to get rid of the sidebar in the regular template pages but not in the product pages.

    Thank you your help

  12. james.gardner0
    Member
    Posted 8 months ago #

    I'm having the same problem as mariaarty.

    The side bar has moved below the products. Is there a way to fix this?
    I'm new to wordpress so I was not sure where to put in mariaarty's suggested code.

    Thanks for the help.

  13. BuzzPresentations
    Member
    Posted 8 months ago #

    Just a quick correction to the code above if you are trying to use it. There is a slight typo. The stuff in the .php files works fine, but the css should be:

    .woocommerce #main {
    width:100%;
    }

    Hope that helps!

  14. Chris416
    Member
    Posted 8 months ago #

    Im trying to eliminate the sidebar from woo-commerce and i followed @ Kwatts steps but i cant seem to find the #content-woocomerece line in my style.css my page is already set on full-width page and I've done the first two steps any help would be appreciated..

  15. kwatts22
    Member
    Posted 8 months ago #

    There was an update to the woocommerce plugin since I posted this tutorial but if you send me the link to your site I will be happy to take a look.

  16. Chris416
    Member
    Posted 8 months ago #

    Hi kwatts22 thanks for the quick response here's the link to my page http://www.dayonetoronto.com/shop/ thanks any help is appreciated.

  17. kwatts22
    Member
    Posted 8 months ago #

    hey yours is actually located in wp-content/themes/made/custom.css on line 410 where .main-content-left change width: 650px; to width 90%;

  18. kwatts22
    Member
    Posted 8 months ago #

    or you can change it to 100%

  19. Chris416
    Member
    Posted 8 months ago #

    Thanks kwatts22 it worked perfectly BTW I set it to 100% in case anyone has the same problem....

  20. Chris416
    Member
    Posted 8 months ago #

    Sorry I just realized that it set all my pages to full width is there any other way to just make the woo commerce pages full width without it affecting my other pages thanks again...

  21. Chris416
    Member
    Posted 8 months ago #

    I ended up figuring it out this morning....

  22. ManusH
    Member
    Posted 8 months ago #

    This layout issues depend not only Woocommerce but also the theme.

    For example, in some of the Woo's own themes (at least in the free ones I checked) there is even an option for this purpose:

    Theme Options > WooCommerce Options > Layout
    Shop pages full width:
    ( ) Shop archives displayed full-width with no sidebar

  23. Matt Hancock
    Member
    Posted 7 months ago #

    I hope you don't mind me posting on this thread, but I'm having the same problem as everyone else. I managed to remove the footer by editing the WooCommerce PHP files, but I don't know where to modify the CSS to make the footer appear in the correct place.

    The page in question is http://makeovermasters.co.nz/shop/shop-gift-vouchers/. It also reaches out to every other page used by WooCommerce.

    Any help would be greatly appreciated. :)

  24. lukettt
    Member
    Posted 7 months ago #

    kwatts22

    You seem very knowledgeable in this particular of Woocommerce and I would like to ask you or anyone else for help.

    I have used a YI Theme for my Woocommerce website. I have been able to create a different single page template so I can have some Product Details pages different to others.

    Ie. I have used If Else in single-product-customcategory.php so hopefully I can have some products show the Sidebar, and others I want to disable the Sidebar and have the content fill from left to right.

    I have tried your solutions but at present, nothing at all shows up in the content section for my selected product and theme. I imagine it is because it is a responsive theme as when I resize the window, or view on iPhone, the silly Sidebar disappears. I don't think I have got the CSS in the right file.

    Link: bit.ly/1c4qQd4

    Are you able to suggest what and where to make CSS changes so this page looks good on PC? Items in this category should not have Sidebar as I used hooks to move the Add to Cart stuff to underneath the description.

    Thanks :)

  25. raejules
    Member
    Posted 6 months ago #

    I am using Divi theme and I was able to remove sidebar by going to: Appearance -> (Divi) Theme Options -> General Settings-> Shop Page Layout. Set to full width.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic