Archived topic

Cart Layout

7 replies · Started by Ash on May 25, 2021

Viewing posts 1–8 of 8

May 25, 2021 at 3:01 am #1797071

Hello,

So I found the following to change cart layout

/* cart layout */
@media (min-width: 1025px) {
.woocommerce-cart .woocommerce {
    display: flex;
}

.woocommerce-cart table.shop_table {
    width: auto !important;
}

.woocommerce .cart-collaterals .cart_totals, 
.woocommerce-page .cart-collaterals .cart_totals {
    float: none;
    width: auto;
    padding-left: 50px;
}

But a couple of problems. Visit the attached link, add some text into the product text boxes, then add to cart.

1. Update the cart, you will see the woocommerce notice is squashed to the left.

2. Product title and product options are crammed in over loads of lines. Need to make more room for it somehow

3. Do you know how to remove/hide the icon next to 'change address' in the shipping calculator?

Also on the checkout page I have added a green background on the payment section. How can I add the arrow to the box like this

Thank you.

May 25, 2021 at 11:45 am #1797869

For question 1, change this CSS:

.woocommerce-cart .woocommerce {
    display: flex;
}

to this:

.woocommerce-cart .woocommerce {
    display: flex;
    flex-wrap: wrap;
}

Then add this under the same media query @media (min-width: 1025px)

.woocommerce-cart .woocommerce > *:not(.woocommerce-notices-wrapper) {
    flex: 1;
}
.woocommerce-notices-wrapper {
    flex-basis: 100%;
}

For question 2, there just not enough space for the title, we can't really do anything about it.

For question 3, I don't see the icon, can you specify where the icon is?

For adding the arrow, try this CSS, feel free to modify numbers.

div#stripe-payment-data:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #15bf86;
    position: absolute;
    top: -14px;
    left: 50px;
}

May 26, 2021 at 12:53 am #1798366

1. Thank you. That fixed the woo notices. Regarding the woo notices I have the following css

.woocommerce-notices-wrapper .woocommerce-message {
    padding: 0;
    display: flex;
    align-items: center;
}
.woocommerce-notices-wrapper .woocommerce-message .button.wc-forward {
    order: 2;
    padding: 20px;
    margin-left: auto;
	  font-weight: 600;
	  background-color: rgba(0,0,0,0.3);
}

This fixes a design issue with the added to cart notice. But it effects the update and product removal notices on cart due to the padding: 0;

2. Seems to fit better now with the additional css added.

3. I have fixed.

And the arrow box works great. But I wanted it to work on either of the payment methods not just stripe.

Regards
Ash

May 26, 2021 at 8:34 am #1799180

For 3, I see stripe and paypal, is that all? If so, then change the CSS to this:

.payment_box.payment_method_paypal_express p:before, div#stripe-payment-data:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #15bf86;
    position: absolute;
    top: -14px;
    left: 50px;
}

Let me know :)

May 26, 2021 at 11:45 pm #1799755

Thanks that works on both now

May 27, 2021 at 8:08 am #1800448

Great! You are welcome :)

June 13, 2021 at 4:40 am #1820361

Hi,

I use Razorpay and Direct Bank Transfer. What should I change to above css??

June 13, 2021 at 10:07 am #1820726

Please open a new topic for your question.

Thanks!

This archived topic is closed to new replies.

Start building better websites today.