• Resolved Tarissa

    (@tarissa)


    Hi! I’m trying to remove the sidebar on Product Pages ONLY, and make Product Pages full width. (Not applicable to other single pages.)

    I was able to make the fix via CSS, but that affects ALL the pages, and I only want to remove the sidebar on Product Pages, so I thought that perhaps I could use PHP “if” statements to select Product Pages only, then apply CSS to remove the sidebar? Is that possible?

    Here is the CSS I used to create the effect I want:
    #primary {width: 100%}
    #secondary {display: none}

    But I only want this on product pages. Can someone help me with the PHP code needed? Or do you have a better idea for me?

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter Tarissa

    (@tarissa)

    ALSO, I actually did find a PHP code that removes the sidebar, on this website:
    https://businessbloomer.com/?p=19572

    While it did remove the sidebar only on Product Pages, the template is still not full width. If someone could just help me write the code to make the template full width ONLY on product pages, that would be great.

    Hello @tarissa

    Thanks for your message!

    This is not possible with the core functions of the theme. However it can be done with Storefront Powerpack extension

    Here you can find a screenshot of the option that allows you to select between full width and default: https://d.pr/i/k6vdE1

    That being said, if you wish to go with the coding you may try the following:

    add_action( 'get_header', 'remove_storefront_sidebar' );
    
    function remove_storefront_sidebar() {
    	if ( is_product() ) {
    		remove_action( 'storefront_sidebar', 'storefront_get_sidebar',			10 );
    	}
    }
    and the following to CSS file:
    
    body.woocommerce #primary { width: 100%; }
    
    body.woocommerce.single-product #primary { width: 100 %; }

    Do keep in mind we do not provide support for customizations as per our support policy, but you can always check with our Facebook Advanced Group as well for suggestions: https://www.facebook.com/groups/advanced.woocommerce/

    Thread Starter Tarissa

    (@tarissa)

    Thanks, @nathvi. I did implement the code you offered, but my problem now is that on my shop category pages, it’s using the full width, pushing the sidebar down below the products. Not quite what I had in mind (I wanted the category pages to keep the sidebar). I’ll keep searching.

    I appreciate your help though! 🙂

    @tarissa, please share a full screenshot of the page with highlights of the sections you want removed (you can edit the image with an image editor).

    Thanks!

    Thread Starter Tarissa

    (@tarissa)

    @battouly, sure!

    I want the sidebar removed on the Product Page:
    https://paste.pics/09e7eafc2f7edad86a5cdebcf25c4855

    But keep the sidebar on the Category Page:
    https://paste.pics/1cf84f0d4dc9fc121970e8963603c5ff

    Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    Hi @tarissa,

    To remove the sidebar from only the single products pages you will need to add these two code snippets to your site.

    This code snippet is PHP and you will need to add that to either a child themes functions.php file or by using a free plugin like Code Snippets. This will remove the sidebar from only single product pages.

    function remove_storefront_sidebar() {
    	if ( is_woocommerce() && is_product() ) {
    		remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
    	}
    }
    add_action( 'get_header', 'remove_storefront_sidebar' );

    You will then also need to add this CSS to WordPress Admin > Appearance > Customize > Additional CSS so that the contents of the product page then displays full width after the sidebar has been removed.

    .single-product .content-area {
      min-width: 100%;
    }

    I hope this helps get you started.

    Thread Starter Tarissa

    (@tarissa)

    @stuartduff, THANK YOU! Your code worked perfectly! Very pleased with what that does on my website. Really appreciate this!!!!

    con

    (@conschneider)

    Engineer

    Hi again,

    THANK YOU! Your code worked perfectly! Very pleased with what that does on my website. Really appreciate this!!!!

    😃

    Good to know it works. All the best!

    Thread Starter Tarissa

    (@tarissa)

    Hey @stuartduff
    Could you help me once more? You gave you a code (above) that I love, which removes the sidebar only on Product pages. Is there any way to also remove the sidebar on any Cart and Checkout pages?

    I tried modifying the code myself, but my attempts were fruitless. :X

    Thread Starter Tarissa

    (@tarissa)

    Ah. Never mind! I finally came to my senses and re-discovered that Cart and Checkout are actual PAGES that I can edit. I simply changed the template over to full width. Done!

    con

    (@conschneider)

    Engineer

    Howdy!

    Ah. Never mind! I finally came to my senses and re-discovered that Cart and Checkout are actual PAGES that I can edit. I simply changed the template over to full width. Done!

    *Packing my code editor away.*

    I live for the simple things :). Thanks for letting us know.

    Kind regards,

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Need a little PHP help!’ is closed to new replies.