Recreate the Demos

3216 January 30, 2024

Recreate Style 1 Demo page

This article will show you how you can create a simple donation page like this demo: https://wcdp.jonh.eu/demos/demo-style-1/

This website uses the free theme Astra with a few customizations.
Other than that it’s actually just a simple HTML block with the following content:

<div id="hero-banner">
    <div class="wcdp-container">
        <div style="height:230px"></div>
        <div style="height:150px" class="desktop-hide"></div>
        <div class="home-table">
            <div>
                <div style="background-color:white;padding:20px;">
                    <h2>Demo Style 1</h2>
                    <p>Just a simple donation form.</p>
                    [wcdp_donation_form id="12345"]
                </div>
            </div>
            <div>
                <div class="mobile-hide" style="height:15vh"></div>
            </div>
        </div>
        <div style="height:100px"></div>
    </div>
</div>

<style>
    .wcdp-container {
        max-width: 1240px;
        margin-right: auto;
        margin-left: auto;
    }
    #hero-banner {
        background: url(https://example.com/background.jpg) no-repeat center center fixed;
        background-size: cover;
        min-height:100vh;
    }
    .home-table {
        display: grid;
        grid-template-columns: 42% 58%;
    }
    @media screen and (max-width: 768px) {
        .home-table {
            grid-template-columns: 1fr;
        }
        .mobile-hide {
            display: none;
        }
    }
    @media screen and (min-width: 768px) {
        .desktop-hide {
            display: none;
        }
    }
</style>

Depending on which theme you use, you may need to adjust the CSS. Please remember to use the correct shortcode in line 10 and the background image in line 28.

Recreate Style 3 Demo page

I am using the following HTML on the Style 3 demo page. The product used there is a variable product, with the custom attributes “Designate to” and “Donation Frequency”.

<div id="hero-banner">
    <div class="wcdp-container">
        <div style="height:230px"></div>
        <div style="height:150px" class="desktop-hide"></div>
        <div class="home-table">
            <div>
                <div class="mobile-hide" style="height:15vh"></div>
            </div>
            <div>
                <div style="background-color:white;padding:20px;">
                    <h2>Demo Style 3</h2>
                    <p>Just a simple donation form (style 3).</p>
                    [wcdp_donation_form id="12345" style="3"]
                </div>
            </div>
        </div>
        <div style="height:100px"></div>
    </div>
</div>

<style>
    .wcdp-container {
        max-width: 1240px;
        margin-right: auto;
        margin-left: auto;
    }
    #hero-banner {
        background: url(https://example.com/background.jpg) no-repeat center center fixed;
        background-size: cover;
        min-height:100vh;
    }
    .home-table {
        display: grid;
        grid-template-columns: 42% 58%;
    }
    @media screen and (max-width: 768px) {
        .home-table {
            grid-template-columns: 1fr;
        }
        .mobile-hide {
            display: none;
        }
    }
    @media screen and (min-width: 768px) {
        .desktop-hide {
            display: none;
        }
    }
</style>