Checkout steps duplicating in process

Resolved leahjm77
(@leahjm77)

7 years, 2 months ago

Hi there,

I just paid for the Pro version mainly because I wanted to show thumbnail images of the products in the order review info, but after I installed the Pro version I noticed a couple issues that weren’t happening before with the basic version.

I have the first 2 steps combined on one page, and the last 2 steps combined on another page.

Issue 1: It’s showing the payment fields in the first step when that should only be on the second step. See screenshot at https://jrmhockeyart.com/wp-content/uploads/checkout-step1.jpg. It’s also showing the order review details, which I like and would love to keep that showing on both steps if possible, but the payment details and “place order” button should not be showing in the first step.

Issue 2: On the second step it’s showing the payment details again, which it’s supposed to be on this page, but for some reason it’s showing all the info stacked on top of each other on the left side of the page rather than having the order review detail showing on the right side like in the previous screen. See screenshot at https://jrmhockeyart.com/wp-content/uploads/checkout-step2.jpg.

With the basic version it was showing the 2 steps properly but was only showing the order details in the second step above the payment info – I wasn’t sure how to get the order details showing on both pages in 2 columns. But now for some reason it’s showing the order details/payment info in both steps and it’s showing 2 columns in the one page and 1 column in the other.

I am familiar with adding code to functions.php or any of the files if I know what code to add. Is it possible to have the following?

– Have the payment in step 2 only
– Have the order details showing in both steps but on the right hand side beside the info required in the form?

If the main issue of having the payment details showing on both pages can’t be fixed, then I am okay with going back to the basic version as it was working for me. In that case, is it possible to receive a refund on my order of the Pro version? (Email address order was placed under is [email protected]).

Thank you for your help!

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter leahjm77
(@leahjm77)

7 years, 2 months ago

Hi, further to my earlier message, I did some more testing. I went back to the basic version of the plugin but when I went to the most up-to-date version I got the same errors. So I went back to a recent older version of the plugin and it’s not showing the order summary and payment details twice anymore. So it seems it’s only happening with the latest versions of the plugin. But I was still getting the issue with the new version of the Pro version that I purchased. Is it possible to be refunded for that? I will just stay with the older version that was working okay. The only thing I was wondering is if it’s possible to show the order summary on the right side of the screen in both the billing/shipping page and the payment page? Thanks again.

Plugin Author SilkyPress
(@diana_burduja)

7 years, 2 months ago

Hello,

it sounds as if the issues stem from the theme. I’ll test the plugin with the Bridge theme and get back to you.
Plugin Author SilkyPress
(@diana_burduja)

7 years, 2 months ago
The plugin works alright with the Bridge theme.

Your issues seem to come from some custom CSS you added to the WP Admin -> Qode Options -> General -> Custom CSS option.

If you remove the following CSS rule from the custom CSS added within the theme, then both the free, as well as the pro version will work alright:
```
@media (min-width: 1001px) {
    .woocommerce-checkout div#customer_details {
        width: 48% !important;
        float: left !important;
    }
    .woocommerce-checkout .woocommerce .col-1, 
    .woocommerce-checkout .woocommerce .col-2 {
        float: none !important;
        width: 100% !important;
    }
    .woocommerce-checkout p.form-row.woocommerce-mailchimp-opt-in,
    .woocommerce-checkout h3#order_review_heading,
    .woocommerce-checkout div#order_review {
        margin-left: 4% !important;
        width: 48% !important;
        display: inline-block !important;
    }
}
```
I’m also not sure if the following CSS rules affect the multi-step checkout:
```
.woocommerce-checkout-review-order .shop_table {background-color:#ffffff; border: 1px solid #e0dede;}
.woocommerce-checkout-review-order .wc_payment_methods {background-color:#f8f8f8;}
.woocommerce-checkout-review-order .order-total {font-weight:600 !important; text-transform: uppercase;}
.woocommerce-checkout-review-order .order-total .woocommerce-Price-amount {font-weight:700 !important; }
.woocommerce-checkout-review-order .shop_table .product-name .product-quantity {display: none !important;}
.woocommerce-checkout-review-order .product-name {font-weight:600 !important; color:#000000 !important;}
.woocommerce-checkout-review-order .order-total {font-weight:600 !important; color:#000000 !important;}
```
You can try removing them, just to see the impact it has on the checkout page. Afterwards you can decide if you need to keep or remove them.
Thread Starter leahjm77
(@leahjm77)

7 years, 2 months ago

Thank you for your help. I removed that first set of CSS code and that got rid of the duplicate issue – the other css was when I had a one-page checkout and doesn’t seem to be affecting it now. The first set of CSS was provided by you previously when I asked if it’s possible to show the “order summary” section on both tabs on the right side of the page. Do you know if that is possible, but to have just the billing/shipping on the left of the first page, and payment details on the left of the second page beside the order summary?

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Checkout steps duplicating in process’ is closed to new replies.