Return to previous page

Cart Page – How To Make Full Width Page

This topic has 11 replies, 3 voices, and was last updated 2 years ago ago by Tony Rodriguez

TFS

Participant

November 19, 2022 at 21:21

Hello,

How can we make the cart page, full width?

Thanks

#338919 Copied Theme version: 8.3.7

10 Answers
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.
#338929 Copied
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.

#339115 Copied

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.

#339128 Copied

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.

#339152 Copied

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!

#339264 Copied

Rose Tyler

Support staff

November 22, 2022 at 15:41

Hello, @TFS,

You’re welcome! Have a nice day!

Regards

#339272 Copied

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.

#339291 Copied

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.

#339326 Copied

TFS

Participant

November 24, 2022 at 16:09

Thanks Tony,

Please see private area notes 🙂

Please contact administrator
for this information.

#339534 Copied

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.

#339536 Copied
Tagged: cart, full width, make, page, templates, woocommerce, wordpress
Viewing 11 results - 1 through 11 (of 11 total)