#131837 Woocommerce checkout buttons – justify right

Landing Forums JupiterX WordPress Theme Woocommerce checkout buttons – justify right

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • Jennifer

    Is there a way to have both buttons appear on the opposite side? aligned on the right hand side instead of the left?

    Mohsin Al-Rabieai Support Team

    Hi Jennifer,

    It is possible, and the easiest way is to use a CSS hack. However, in order to provide with you the hack, we need to see the page first. Can you provide the page link where we can see these buttons?

    Bests

    Private
    Jennifer
    This reply has been marked as private.
    Nodari Support Team

    Hi Jen

    Try this CSS 🙂

    .woocommerce-cart .woocommerce a.button.alt {
        margin-left: 65%;
    }
    
    .woocommerce-cart .woocommerce .jupiterx-continue-shopping {
        float: right;
    }

    Regards

    Jennifer

    Hi Nodari.

    So that moved the buttons, but I’m getting bad results from it. It’s switching the buttons’ relative positions (Proceed to Checkout on left and Continue Shopping on right), but also it looks bad on tablet and mobile.

    Any other ways to do it?

     

    Thanks

     

    Nodari Support Team

    Hi

    Lets change my previous code to this:

    .woocommerce-cart .woocommerce .jupiterx-continue-shopping {
        position: absolute;
        right: 225px;
    }
    .woocommerce-cart .woocommerce a.button.alt {
        margin-left: 83%;
    }

    Regards

    Jennifer

    Hi Nodari,

     

    OK so yes that looks fab on Desktop, but tablet and mobile are a bit of a mess… what do you think? Can it be fixed with mobile responsive CSS?

    Thanks,

    Jen

    Jennifer
    Mohsin Al-Rabieai Support Team

    Hi Jennifer,

    It’s better to remove the previous CSS fixes and only use this one:

    .woocommerce-cart .woocommerce a.button.alt {margin-left: 0; }
    
    .wc-proceed-to-checkout {display: flex;justify-content: flex-end;}

    Bests

    Jennifer

    Hi Mohsin,

    Much better thanks – perfect for desktop and tablet… but on mobile I’m getting (attached). Would some CSS for mobile specifically help??

    Thanks

    Mohsin Al-Rabieai Support Team

    Hi Jennifer,

    In addition, please add this CSS as well:

    
    @media (max-width: 575.98px) {
        .woocommerce-notices-wrapper a {
            display: block;
            clear: both;
            margin-bottom: 10px !important;; 
            float: unset !important; 
        }
    }
    
    @media (max-width: 575.98px) {
        .woocommerce-cart .woocommerce a.button.alt {
            margin-bottom: 0.75rem;
        }
    }

    Bests

    Jennifer

    Hi Mohsin,

    That’s perfect, thank you so much!

    Alexander Hutsol Support Team

    Hello,

    You are welcome 🙂

    Feel free to create a new topic if you have any other questions.

     

    Regards.

    Jennifer

    Hi Mohsin,

    We’ve noticed one other spot where the woocommerce buttons aren’t behaving. Please see screenshots. This is on the final checkout page on mobile. Any idea how we can fix this one please?

    Thanks,

    Jen

    Amir Rather Support Team

    Hello There

    Try the below CSS please:

    @media (max-width: 768px){
    .woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
        float: right !important;
    }}
    Jennifer

    Perfect – thanks so much!

    Amir Rather Support Team

    You’re most welcome Jennifer 🙂

Viewing 17 posts - 1 through 17 (of 17 total)
You must be logged in to reply to this topic.
Login