[Support request] Double checkout button in cart page

[Pedro]

Hello! I would like to add another “Checkout” button on the cart page.

This if possible I would like to be located after the title of the cart page.

This would help the conversions in the mobile version.

An example of this is the Shopify Booster theme: https://boostertheme.com

Thank you!!

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

you can create a Hook Element use this function, select the before_cart hook, make sure you check Execute PHP and set display rules to the entire site:

<div class="proceed-to-checkout-above-cart">
<?php woocommerce_button_proceed_to_checkout(); ?>
</div>

Then this CSS:

.woocommerce .proceed-to-checkout-above-cart .checkout-button {
    float: right;
    margin: 0 20px 1em 0; /* 20px adjusts the right hand offset */
}

@media (max-width: 768px) {
    .woocommerce .proceed-to-checkout-above-cart .checkout-button {
        display: block;
        float: none;
        text-align: center;
        margin-right: 0;
        padding-top: 20px; 
        padding-bottom: 20px;
    }

}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello david! Thanks for the help.

I have added the codes and now the button is shown in the mobile version.

However I would like that:
– Also shown in the desktop version
– In the mobile version the button occupies the full width and is displayed after the cart notice.

Then I leave screenshots for you to have a guide:

– MOBILE VERSION –
Generatepress: https://www.dropbox.com/s/blgob3iuzbg4ddh/mobile_generatepress.PNG?dl=0
Booster theme: https://www.dropbox.com/s/tz6e6l7diss7lse/mobile_boostertheme.PNG?dl=0

– DESKTOP VERSION –
Generatepress: https://www.dropbox.com/s/zoymbipf3wybxaq/desktop_generatepress.png?dl=0
Booster theme: https://www.dropbox.com/s/lywzdhyutphsxnb/desktop_boostertheme.png?dl=0

Thank you!!

[David]

Try refreshing your browsers as the button is visible to me on desktop and looks full width on mobile and below the Notice.
To make sure the button stays below the notice, edit the hook element you added the cart button to and in the priority set this to 50

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello david! I have cleared cache and now it is displayed.

However, the following happens:
– In the desktop version, I would like this new button to be aligned with the “contiue shopping” button.
In the following image you can see how the new checkout button is aligned with the cart table: https://www.dropbox.com/s/8lyomchqai6yloo/Captura%20de%20pantalla%20de%202019-03-04%2012- 38-45.png? Dl = 0

– In the mobile version, the button already appears below the cart notice. However, the width is still less than this. I want the width of the new button to be the same as that of the cart notice.

Thank you!

[David]

Edited the CSS above

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello david! It worked perfect, both for the mobile version and desktop.

However, seeing it better I would like the top buttons (checkout, update cart and continue shopping) to be all aligned with the checkout button at the bottom.

Sorry for the inconvenience.

[Pedro]

I forgot to say, this last change that is only for the desktop version, thanks.

[Pedro]

Hello david!

Another thing that I would like to do is that the button to delete product from the cart is centered (in the mobile version)

Not if I have to open another post in the forum or it can be done right here.

Thank you!

[Tom]

I’m not sure I understand what you mean by the buttons. They all look aligned?

As for the remove from cart, try this:

@media (max-width: 768px) {
    .woocommerce a.remove {
        margin-left: auto;
        margin-right: auto;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts