Customizing the Checkout Cart Template

The shopping cart shown on the checkout page, illustrated in the image below, can be very easily customized, thanks to the template system in Easy Digital Downloads.

The checkout shopping cart, highlighted

First, create a new folder called edd_templates inside of your currently active theme’s folder.

Second, locate the checkout_cart.php file inside of easy-digital-downloads/templates and copy (not move) it to the newly created edd_templates folder in your theme.

The checkout_cart.php file looks like this:

Once you have the file copied to your theme’s folder, you can safely modify it as much as you want.

Comments

  1. Xiaoyu

    How to create a condition statement in my header.php to target this page? Like only load checkout.css if it is chekcout_cart.php?

    Reply

  2. Pippin, really appreciate your plugin. Awesome work.

    Quick question: on the checkout page, how do I change the word ” Discount” to ” Discount (if available)”
    ?

    Thanks in advance for your help.

    Marc.

    Reply

  3. Pippin, I do have another, different question: if I want to sell a couple large files ( approx 200 MB each); how can I have these files reside externally (i.e. outside the WordPress installation directory tree), but still make it so that their real URLs will remain hidden during the download / purchase process (so people cannot use those URLs to download the files without paying)?

    I’m asking because when putting such large files inside the WordPress install, a backup program I use (Backupbuddy) stops performing proper restores, probably because the backup files get too large.

    Thank you.

    Reply

    • There are two ways you can do:

      1. Use our Amazon S3 add-on.

      2. Place the files outside of your server’s web root and then specify the absolute path in the download configuration, instead of the file URL. Do you know what I mean and how to do this?

      Reply

      • Pippin, putting the download files outside the WordPress Web root worked well. Thank you.

        I’m struggling to adjust the CSS for the labels. I can make it smaller for all labels. But I’d like to only make it smaller for the discount label. Is there a way to do it? I’ve tried adding the code below to my styles.css file.

        Also, I noticed a typo in the interface when turning on email verification. Please take a look at the screenshot at http://mf.ly/jg. Where in the code can I fix it?

        Code I tried using:

        .edd-discount {
        font-size:12px !important;
        }

        Reply

        • Change your CSS to this:

          #edd-discount-code-wrap label { font-size: 12px; }
          

          The typo is from the custom Email confirmation field you added from https://easydigitaldownloads.com/docs/add-email-confirmation-field/.

          Reply

          • Pippin, it is working perfectly.

            You’ve been generous with your time and attentiveness. Thank you. I’d like show some support financially. Is there one of your add-on products that you especially recommend I should buy? Maybe the pdf invoice plugin?

            Marc.

          • Glad you hear I’ve been able to help out!

            Obviously any add-on purchase is greatly appreciated. It really depends on your own needs. Do you have any questions about any of them?

          • marcfest

            Pippin, I bought the plugin for pdf invoices. I think it may help with corporate customers who need a proper invoice to get their expense reimbursed.

            During the check out process on your site I noticed that you give customers the option to sign up for your newsletter, and to create an account on your site (I did both). How can I do this? Do both these features come with EDD?

            Thanks again for all your help.

            Marc.

          • Excellent, thanks!

            The newsletter signup is provided by our Mail Chimp add-on. There are add-ons for other popular newsletter services as well.

            The account creation is a feature included in Easy Digital Downloads core. You can enable it by going to Downloads > Settings > Misc.

      • Ethan Williams

        Just saw this and it is something that I’d like to incorporate on my site. Can you explain a little bit how to do this? I have AWS but like the person above the AWS url comes up as the download url and it will allow the end user to go and just download it from there.

        Reply

  4. ACF

    Hi Pippin. Thank you for this plugin. How can we customize the action in the form element of [download_checkout] to redirect to another url?

    Reply

  5. Argos

    Hi Pippin. Biggest great plugin!!!

    One question: Implementing the Checkout Page, the design is bad.

    Please, picture check: http://img59.imageshack.us/img59/9206/capturetao.jpg

    In the image top ….. and the fields form …..

    One solution, please. Thanks, so much.

    Reply

  6. Argos

    Thanks for replying.
    In a few minutes I will open a support ticket in the forum. Thank you.

    Reply

  7. Philip

    So I would like to modify the standard checkout field layout: Turn on or off the labels (without css) and move the description after the field. How do I do that? Thanks.
    See:http://awesomescreenshot.com/09715ipo28

    Reply

  8. Kenth Hagström

    I tried using the above code, exactly as is, the checkout button does not display on my page when there are items in the cart (using the template of course).

    Reply

    • Do you mean that your modifications to the checkout template don’t show, or that the checkout doesn’t display at all?

      Reply

      • Kenth Hagström

        I do not have my site online yet, so no URL :(

        The problem is that it is possible to add items to the cart, but the customer can’t complete the purchase (because the button is missing). Using the checkout shortcode works fine though. At first I thought I might have forgot to disable the test mode, but that’s not the case, triple checked. I’ll post you my URL as soon as I’ve published my website (within a week or two). I’ll try to figure it out myself too.

        Reply

    • johana

      Hi Kenth,
      i have the same pro?bleme, do you found why ?

      Reply

  9. johana

    Hi,
    i have created a new checkout_cart.php file to cstomise my template but i dont have a btton next and payment combobox just the table with item seleted ? any idea
    thanks in advance

    Reply

  10. johana

    Hi Pippin,
    I dont made any change to this file just copy paste in my folder template,

    <table id="edd_checkout_cart"
    >

    $item ) : ?>
    <tr class="edd_cart_item"
    id="edd_cart_item_">

    <?php
    if ( current_theme_supports( 'post-thumbnails' ) ) {
    if ( has_post_thumbnail( $item['id'] ) ) {
    echo '';
    echo get_the_post_thumbnail( $item['id'], apply_filters( 'edd_checkout_image_size', array( 25,25 ) ) );
    echo '';
    }
    }
    $item_title = get_the_title( $item['id'] );
    $variable_pricing = edd_has_variable_prices( $item['id'] );
    if ( !empty( $item['options'] ) ) {
    $item_title .= $variable_pricing ? ' - ' . edd_get_price_name( $item['id'], $item['options'] ) : edd_get_price_name( $item['id'], $item['options'] );
    }
    echo '' . esc_html( $item_title ) . '';
    ?>

    <a
    href="">

    $fee ) : ?>
    <tr class="edd_cart_fee" id="edd_cart_fee_">

    <tr class="edd_cart_footer_row edd_cart_subtotal_row"
    >

    <tr class="edd_cart_footer_row edd_cart_tax_row"
    >

    : <span
    class="edd_cart_tax_amount"
    data-tax="">

    <tr class="edd_cart_footer_row edd_cart_discount_row"
    >

    :
    <span class="edd_cart_amount"
    data-subtotal=""
    data-total="">

    Reply

  11. johana

    I dont installed anny add ons ?

    Reply

  12. johana

    after my search, I found that for customized the screen we had to modify the file template.php in the template folder and then use the code for displaying the form:

    Thanks:

    Reply

  13. Hi Pippin,

    How can I customize the following text of the shopping cart?

    “Personal Info”
    “Email Address”
    ….

    and the text of the formular fields alike:
    “Enter discount”
    ….

    Thanks:

    Reply

  14. Hey Pippin! As a followup to the most recent question, I’d like to remove the requirement to put in a First or Last name for the downloads. Does this break anything in the plugin?

    The reason I want this is that I know for myself, the fewer steps required to purchase something, the more likely I’ll actually go through with it!

    Reply

  15. Hi Pippin. Thank you for helping out with the questions.
    I have a question regarding the checkout page. The page defaults to asking for first and last names and an e-mail address. How do I add more text entry boxes for address information? I’m using your EDD to allow people to join our organization, and that’s the one additional piece I need. Looking at the template I don’t even see where the name and e-mail requests are made, or I would use those as a start point.
    My intent is to teach myself PHP, but it’s a slow process, and I could use the pointer in this circumstance.
    Thank you.
    Dan

    Reply

  16. jafar

    how i can define custom field in checkout table similar this pic
    http://tinypic.com/view.php?pic=13zqtkx&s=8

    Reply

  17. Mike

    How can I simply add fields for someone to input their address to the checkout page?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>