Support » Theme: Travelify » no full-width Woocommerce page

  • I can’t set the woocommerce shop page to full-width (so without widgets)
    I have tried several css codes but nothing works 😉

    thanks in advance,
    Marcel

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Guido

    (@guido07111975)

    Hi,

    WooCommerce hooks into the page template file. Apparently this theme does not have its own setting to change this. You can disable the sidebar by adding this in the functions file of your (child) theme:

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

    And to make page content full width, add this CSS at the Custom CSS page in the Customizer of your dashboard:

    
    .post-type-archive-product #content-woocommerce {
    width:100%;
    box-sizing:border-box;
    } 
    

    You can also hide the sidebar with CSS, if you don’t have a child theme or if you don’t want to change the original theme:

    
    .post-type-archive-product .secondary {display:none;}
    

    Guido

    Hi Guido,

    this works, thanks for that!: remove_action( ‘woocommerce_sidebar’, ‘woocommerce_get_sidebar’, 10 )

    and for the testing purposes if i use your css variant (.post-type-archive-product .secondary {display:none;) it does not work…

    and this not working (yet:-): .post-type-archive-product #content-woocommerce {
    width:100%;
    box-sizing:border-box;
    }

    any other suggestions for this full page ‘headache file’

    Marcel

    update: if i use “inspect/F12” on the life page and i change this:

    #content-woocommerce {
    margin-bottom: 20px;
    float: left;
    width: 62.6%;
    padding: 10px 1.5%;
    background: #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    into:

    #content-woocommerce {
    margin-bottom: 20px;
    float: left;
    width: 97%;
    padding: 10px 1.5%;
    background: #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    it works:-) can you maby tell me how to put/wright this into the custom css page?
    (I pasted it directly into the custom CSS but that doesn’t work)

    Marcel

    Guido

    (@guido07111975)

    Hi Marcel,

    Have made a mistake in hiding the sidebar. Should be:

    
    .post-type-archive-product #secondary {display:none}
    

    (but it’s cleaner to hide sidebar via the code in your functions file)

    But my other code should work just fine at the main shop page (have tested it):

    
    .post-type-archive-product #content-woocommerce {
    width:100%;
    box-sizing:border-box;
    }
    

    But if you also want to make it full width at all product category pages, you can better use this instead of code above:

    
    .archive #content-woocommerce {
    width:100%;
    box-sizing:border-box;
    } 
    

    If you also want to hide sidebar at the single product page, please let me know.

    Guido

    ps. when adding code in this forum please click the “code” button before and after your code.

    I figured it out, the css code you supplied did not work because I had used a child theme …
    i found out because i edited the code directly in the main theme’s style.css and then the code worked 🙂

    and do you also have a code to hide the sidebar at the single product pages?

    Thank you very much for your input and the CSS codes!

    Marcel

    • This reply was modified 3 months, 2 weeks ago by blurpje.
    Guido

    (@guido07111975)

    Hi Marcel,

    The code in your functions file will also remove the sidebar from the single product page. But you need to make the content full with as well. With this:

    
    .single-product #content-woocommerce {
    width:100%;
    box-sizing:border-box;
    }
    

    But if you want to remove sidebar at all WooCommerce pages and make all WooCommerce pages full width, you can simply use the code in your functions file + this custom CSS:

    
    #content-woocommerce {
    width:100%;
    box-sizing:border-box;
    }
    

    Guess the CSS will also work when adding it in the stylesheet of your child theme.

    Guido

    Guido, thanks for all the help it works fine now.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.