Are you creating your website using WooCommerce? Would you like to add Crowdfunding capabilities, and campaigns to your website? This tutorial will show you how you can quickly add a fully white labeled Crowdfunding campaign to your new or existing WooCommerce website.
This article is part of the blog series for adding Crowdfunding features on your website. You can learn about adding Crowdfunding capabilities on other platforms such as Shopify, Squarespace, Wix, BigCommerce, Boldgrid, Duda, Ucraft, Pagecloud, Site123, Weebly, PrestaShop, Jimdo, One, Webnode, Strikingly, Orson, Pixpa, Yola and GoDaddy as included in this series.
The solution described in this blog article can be used for any rewards/pre-order, or donations based Crowdfunding campaigns and paradigms. It is great for running a single campaign, or multiple campaigns on separate pages for any new or existing WooCommerce site using white label technology such as Atlas. To gain the capabilities to run a fully white labeled Crowdfunding campaign on your WooCommerce site, you need to subscribe to an Atlas subscription plan. The Micro subscription plan is great to use for this purpose. Included in the subscription plans is the Sedra widget. You can use the Sedra widget to host a campaign on any web page.
Please note that it is recommended to read the following article to quickly set up the widget for this tutorial.
Creating a Crowdfunding campaign page on your WooCommerce Website
Step 1: Subscribe to the Atlas subscription plan.
Step 2: Create the Crowdfunding campaign, and copy the widget code.
Note: depending on the configuration of your site, you may need to approve the campaign to view it live. To do this, you can log in as an administrator, and go to the administrator dashboard, click on campaigns, and choose approved/running from the dropdown menu located in the status column for the campaign that you have created.
Step 3: Create a new page.
First, log into the WordPress website. This is assuming that you have already installed WooCommerce on your WordPress website. If you have not installed WooCommerce, you will have to do this first. Once you are logged in, you can add a new product. Click on the Products option in the left menu, then click on Add New.
Add the information for your product:
Step 4: Paste the widget code.
Once you have added the information for the WooCommerce product, you can then add your campaign to the product page. To do this, change the description box to text mode so that you can add your HTML widget code:
Step 5: Add the custom CSS and view the campaign.
You may notice that the campaign is not full width on the page when you paste it. This could very depending no the theme that you are using. The campaign may appear fine for some users that are using a specific theme. In general, however, we will provide the CSS code to make the campaign full width on the page.
To add the CSS, click on the Appearance option in the left menu, then click on Customize.
Next, choose the additional CSS option.
You can now paste the following CSS code to make the campaign appear full width on the page:
.sedra-campaign-widget {
max-width: 100% !important;
}
You can now view, and donate to the campaign.
That is how you can add any pre-order, rewards, and donations based Crowdfunding campaign on to your WooCommerce website. For a full and more detailed tutorial, you can watch the following video: