Eze

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

Hi @marioscomco,

The Add Before and After is managed by WordPress Gutenberg and not Kadence.

I found a similar case where the Add Before and After does not show when the Paragraph block is disabled from the list of blocks in the Gutenberg Preferences. Learn more:
https://github.com/WordPress/gutenberg/issues/46753

If you disabled any block, kindly enable it and see if the issue persists.

Cheers,
Eze

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

Hi there,

Glad you reached out, happy to help.

Your menu on mobile is small due to the use of an iframe from another website (https://blog.poupfrite.biz). Can you confirm why you are using an iframe on your website?

Iframes are quite difficult to style and adjust, especially for mobile responsiveness, since they essentially display another webpage within your own.

To ensure you have full control over the appearance and functionality of your menu, we recommend using your own content instead of embedding another website through an iframe. This way, you’ll be able to customize the design and make sure it looks great on all devices.

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

Cheers,
Eze

Hi there,

Thank you for reaching out.

To add a custom HTML and CSS to your website, please add the HTML and CSS to the Custom HTML block. Here is a screencast for your reference:
https://share.zight.com/qGubE2yL

You can add this HTML and CSS to the Custom HTML block and change the styling as preferred:

<button class="custom-button">Click Me</button>
<style>
.custom-button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-button:hover {
    background-color: #2980b9;
}
</style>

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

Cheers,
Eze