Customizing the "Add to Cart" button to point to checkout

Hey there,

I'm interested in customizing the Add to Cart / Buy now button so it points to the checkout area once a customer selects an item.

How can I begin to achieve this?

For example:

1. Customer clicks the "Add to Cart" button.
2. Button transforms into "Checkout" button, which sends customer to the checkout area when clicked ... perhaps changing color as well, much like Storenvy's button.

  • Christopher Rice

    Hey Jack,

    Thanks so much for your help. I'm actually curious how I might be able to revise the link of the button.

    As it stands:

    1. Customer views product.
    2. Customer clicks "Add to Cart" and product is added.
    3. Button reveals message letting customer know product was added.
    4. Button returns to original "Add to Cart" enabling customer to add the product again.

    I'd like to change the fourth step in that process so customers are given the opportunity to check out by clicking the button again.

    I imagine this would require re-writing the link displayed after the product is added to the cart ... is there a way to re-write where the button points after the third step ... so it looks something like this:

    1. Customer views product.
    2. Customer clicks "Add to Cart" and product is added.
    3. Button's text changes to "Checkout" and offers new link to check out page.

    Thanks for your help on this one.

  • Christopher Rice

    No worries, Jack. I know there's a lot of pressing threads in need of attention -- thanks for getting back nonetheless.

    That's a great idea, and actually ... that's how storenvy does it, which inspired the idea. Take a look at the screenshots for their checkout button process.

    ...

    One other question regarding buttons ... how difficult would it be to remove them from the main grid, forcing people to click into the product for more information before the buy now button appears. I like this idea because it creates a less crowded store and allows the visitor to focus on the products.

    Is there a line of code that I could revise in order to prevent the buttons from appearing within the store grid of products?

    Thanks again for your attention.