Cart Page – How To Make Full Width Page

This topic has 11 replies, 3 voices, and was last updated 1 year, 3 months ago ago by Tony Rodriguez

  • Avatar: TFS
    TFS
    Participant
    November 19, 2022 at 21:21

    Hello,

    How can we make the cart page, full width?

    Thanks

    10 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    November 20, 2022 at 05:43

    Hello, @TFS,

    Cart is the default WC page, all available settings you can find in WooCommerce > Settings.

    Also, you can use custom CSS code, Please copy and paste the below-given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache,

    .woocommerce-cart .col-md-5.cart-order-details,
    .woocommerce-cart .col-md-7 {
        width: 100%;
    }

    Under Private Content Area:

    Regards 8Themes Team.

    Please contact administrator
    for this information.
    Avatar: TFS
    TFS
    Participant
    November 21, 2022 at 19:31

    Hello Tony,

    Thanks!

    I did that and the section where it says the price amounts and the proceed to checkout button are located on the bottom. Is there anyway to make it appear all in one row and still have the cart full width.
    I am going to add more elements and that is the reason why I want the full width.

    I have added the page on the private area content

    Please contact administrator
    for this information.
    Avatar: TFS
    TFS
    Participant
    November 21, 2022 at 21:37

    I also added some text on the top and the text is not appearing as full width.

    Not sure what to do, any help would be appreciated!

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    November 22, 2022 at 06:55

    Hello, @TFS,

    Simply remove the code that I shared with you in my previous reply and add this code there then check back to your issue after clearing the browser cache.

    .page-id-5663 .elementor-container.elementor-column-gap-default{max-width:95% !important;}

    For the text you added on the top please add the below CSS code in the theme settings >> theme custom CSS >> global CSS at the bottom of the box.

    .elementor-column.elementor-col-33.elementor-top-column.elementor-element.elementor-element-eeb6866{min-width:100% !important;}

    Then save settings and check back to your site after clearing the browser cache.

    The Result will appear like this after adding above both codes: Under Private Content Area:

    Regards 8Themes Team.

    Please contact administrator
    for this information.
    Avatar: TFS
    TFS
    Participant
    November 22, 2022 at 15:01

    Hello Tony,

    Thanks!

    I added the new code and changed that to 100% actually, and it looks perfect.
    When I changed that – the text I added on top also was aligned perfectly so the second code is not needed.

    I appreciate your constant help!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 22, 2022 at 15:41

    Hello, @TFS,

    You’re welcome! Have a nice day!

    Regards

    Avatar: TFS
    TFS
    Participant
    November 22, 2022 at 21:45

    Hello Rose & Tony,

    The second code is helpful again as I now need it!

    Is there anyway I can move the content I have (its an image) a little more to the top? there is a big gap between the image I have added and the grey colored “bar” on top.

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    November 23, 2022 at 06:03

    Hello, @TFS,

    In order to solve your issue simply go to the Dashboard >> XStore >> Theme Settings >> Theme Custom CSS >> Global and then paste the below code at the bottom of the CSS box there.

    .page-id-5663 .cart-checkout-nav{margin-bottom:0px !important;}

    Then save settings and check back to your site after clearing the browser cache.

    The result will appear like this: Under Private Content Area:

    Regards 8Themes Team.

    Please contact administrator
    for this information.
    Avatar: TFS
    TFS
    Participant
    November 24, 2022 at 16:09

    Thanks Tony,

    Please see private area notes 🙂

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    November 24, 2022 at 16:15

    Hello, @TFS,

    Done as per on your request, I have added all the screenshots of this topic under the private content area, please check back now.

    Regards 8Themes Team.

  • Viewing 11 results - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.