Support » Theme: OceanWP » Can’t change width of cart and checkout page

  • I have a website where I’m going to sell spare parts and everything is done on the website, except that on the cart and checkout pages, the width shouldn’t be 100%, but I can’t seem to find a way to adjust that. I’m using the theme OceanWP and then I’m using woocommerce shortcode and plugin for the cart and checkout pages. I have tried changing the width in the “customize” window, some custom CSS and also tried moving the shortcode. I haven’t edited the woocommerce cart and checkout pages, so they are still standard layout and style.

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hello,

    Kindly go to Dashboard > Pages and edit the cart and checkout page > oceanwp settings metabox > Main tab and select a different layout.

    Hello, @apprimit thank you for replying, I have tried that now and it doesn’t change anything on the pages, the width is still too large.

    Amit Singh

    (@apprimit)

    Try to add the below code to the Customize > Custom CSS section to do it. Edit the code as per your need –

    body.woocommerce-checkout #wrap, body.woocommerce-cart #wrap  {
        max-width: 80%;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
    mikafabricius

    (@mikafabricius)

    Thank you again @apprimit for your help,
    This worked for the whole pages, which means it also made the head menu and the footer 80% width and those should, of course, stay at 100% width.
    Best regards Mika

    Amit Singh

    (@apprimit)

    Okay, try using the below code. It will work only for the content section –

    body.woocommerce-checkout #wrap #content-wrap, body.woocommerce-cart #wrap #content-wrap {
        max-width: 80%;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
    mikafabricius

    (@mikafabricius)

    Thanks @apprimit, but the code does not seem to work on either the cart or the checkout page. Thank you for helping again.

    Best regards Mika

    Amit Singh

    (@apprimit)

    Try this one. It should work –

    body.woocommerce-cart #main #content-wrap, body.woocommerce-checkout #main #content-wrap {
        max-width: 75% !important;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    Hey @apprimit thanks again again

    Don’t know why, but the css still doesn’t work for me.

    Best regards Mika

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