How to make full width pages for woocommerce pages

Hello,

I tried updating the page template to full-wdith, but it seems to not do anything. How do we set it to full width for all woocommerce pages?

See http://www.dbctx.org/shop for an example

Thank you

Hello @dfman18,

Do you want to hide sidebar with CSS as well?

Kind Regards, Roman.

Hi there,

I am actually surprised the templates seems to not work with any of the woocommerce pages. Maybe that’s a bug…

If CSS is the short-term fix, then that’s fine. May I ask for the CSS code to remove the sidebar from ALL woocomerce pages (shop, category, product, checkout, and and such)

Thank you

Hello @dfman18,

Actually you can use Full width template for Checkout, Cart, and My Account WooCommerce pages, please do so.

Shop page and product pages use archive-product.php and single-product.php templates respectively. Those templates come from WooCommerce plugin. If you want to remove (not hide) sidebar, then you have to modify and override that .php templates.

By the way, you can use WooSidebars plugin in order to display different widgets on different pages, for example you can show shop-related widgets in Shop page sidebar (like WooCommerce Cart, WooCommerce Price Filter, or other useful widgets that come with WooCommerce plugin).

You can try to use the following CSS code in order to hide (not remove) the sidebar on Shop page and product pages.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

body.woocommerce div#primary {
    width: 100%;
}

body.woocommerce div#secondary {
    display: none;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hello again,

Much appreciated.

One more question

on the homepage, http://www.dbctx.org/; there are 2 huge white bars.

  • the first one is between the header image and the blue row at the top. (It also says “home”)
  • the second one is between the “contact us” row and the footer.

How do I get rid of those white bars?

Thank you again

Hello @dfman18,

Please try to use Front Page template instead of Full width.

Please let me know if you need more help.

Kind Regards, Roman.

Yay!!!

No wonder!

Thanks again!

You are welcome @dfman18! :slight_smile:

Kind Regards, Roman.

Okay one more question. haha

on front page of http://www.dbctx.org/, there is the contact us row.

I created a “text” widget in a site builder’s row and set it to center.

However, I noticed the width are for mobile, but not for a computer screen. I’ll like it to be maybe 75% page wide unless it is mobile. I tried to inspect it to find where can we adjust the width, but no luck.

Do you know where? (Also it is a contact-7 form)

Thanks!

Hello @dfman18,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

@media only screen and (min-width: 508px) {
    div#panel-573-4-0-0.widget_text div.wpcf7 > form.wpcf7-form > p > label {
        width: 75%;
        margin-left: 12%;
        margin-right: 12%;
    }
}

Kind Regards, Roman.

Works like a charm

Thanks!

You are welcome @dfman18! :slight_smile:

Kind Regards, Roman.