Website view of cart page

Hi @freddyeee,

Glad you reached out, happy to help!

The desktop version of the cart page cannot be made to look exactly like the mobile version due to the inherent HTML structure, and there is no built-in option to restructure it. However, you can achieve a similar layout using custom CSS.

.shop_table thead {
    display: none;
}

.shop_table tbody tr td {
    display: block;
    align-items: center;
    padding: 5px 0;
}

This CSS will make the Product, Price, Quantity, and Subtotal appear in each row without their headings being visible, but still mimicking the mobile view layout.

Here is how to add the custom CSS to your website:
https://www.kadencewp.com/help-center/docs/kadence-theme/how-do-i-add-custom-css/

Watch this demo screencast of what happens when the CSS code is added to your website:
https://share.zight.com/yAuz1q7l

I hope this helps. Please let us know how we can help further.

Cheers,
Eze

Thanks for the answer, but that’s not my problem.
My problem right now is that my cart page in the desktop looks like the mobile version , as in the screenshot, I want them to look different as they should. The desktop version to look as the desktop version.

Hi @freddyeee,

Thank you for the clarification.

To troubleshoot this, kindly edit the Cart page, delete the cart shortcode/block, and add the Classic Cart block. Here is a screencast for your reference:
https://share.zight.com/d5uXnP6z

If the issue persists, please use this custom CSS:

@media (min-width: 1024px) {
    .woocommerce table.shop_table {
        width: 70%;
        float: left;
    }

    .woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals {
        float: left;
        width: 30%;
    }

    .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
        display: inline-flex;
    }
}

Watch this demo screencast of what happens when the CSS code is added to your website:
https://share.zight.com/Kouk1ld7

I hope this helps. Please let us know how we can help further.

Cheers,
Eze

Thanks

I have the cart page in Elementor

I add the code you wrote:

The only change I saw is the quantity counter got distorted

what could be the problem ?

Hi @freddyeee,

Thank you for the additional information.

By default, the cart summary and cart total should appear on the same row on desktop view.

To troubleshoot this:
1. Delete the custom CSS
2. Edit the cart page using the WordPress Editor rather than Elementor
3. Delete the blocks or items on the cart page and freshly add the Classic Cart block

Here is a screencast for your reference:
https://share.zight.com/Wnu8DnA7

Please let us know how this goes and if we can help you further.

Cheers,
Eze

I have some CSS for the cart page to give some style to some buttons, if I change to wordpress editor, will I lose that edition ?

why this code you wrote didn’t have any efect on my end ?

@media (min-width: 1024px) {
    .woocommerce table.shop_table {
        width: 70%;
        float: left;
    }

    .woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals {
        float: left;
        width: 30%;
    }

    .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
        display: inline-flex;
    }
}

could you help me with my question please ?

Hi

I just did that change to wordpress editor, as you can see in the screenshot below, but the display is full width, how to change that and give it some margin to make it look good in every device ?

Also, like in the screenshot below, there is some green shadow that turns red on hover in the product recommendation, how to delete that ?

Hello @freddyeee

I want to help you with your issue, but I can’t view the page at https://www.wunayaq.com/. If you are editing the cart page with Elementor, it could be that the CSS may not work. However, the page could be full width due to the theme settings at Appearance > Customize > Posts/Pages Layout > Page Layout. Change the page layout to normal or narrow to see if that works for you. It could also be that the page itself is set to full width (https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-setup-page-post-settings/).

If you need more help with the CSS, please make sure your site is available so we can view the source.

sorry, the correct url is https://www.runayaq.com

also, how to fix that green shadow that turns red on hover in the product recommendation ?

• This reply was modified 3 months, 3 weeks ago by freddyeee.

Hi, Fred!

Apologies for the lack of updates here. You can check these settings:

• Fullwidth page layout:
  1. Edit the Cart/Checkout page.
  2. Go to the Page Settings (https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-setup-page-post-settings/) and select either Normal or Default in the settings. Here’s a screencast for your reference – https://share.zight.com/wbuqPGRB
• Green shadow: this is coming from the global link settings.
  1. Go to Customizer > Colors & Fonts > Colors.
  2. Scroll down until you see the “Link Style” option.
  3. Change it to Standard – https://share.zight.com/2NuojnYB

I hope this helps and let me know if I can help you further.

Hi, @freddyeee !

Just checking in on this topic. We’d love to hear whether our support helped resolve the problem or not.

Do you still need assistance here?

If you’re all set, please mark the topic as resolved. If you still need help, just reply to this thread and we’ll stay with you until everything is resolved.

Thanks!