How to Sell Digital Products with WordPress Simple Shopping Cart Plugin?

Plugins like WooCommerce allow you to create a digital or physical store and sell goods through your WordPress site. However, these ecommerce plugins will add large number of styles and scripts thus increase the page loading time. It does not make sense to sell few eBooks or digital products on a large blog using WooCommerce. If you only sell few products and PayPal is the preferred payment option, then you can use WordPress Simple Shopping Cart plugin. This is a lightweight option to add PayPal shopping cart and makes things simple.

Why WordPress Simple Shopping Cart Plugin?

This is a free version available in WordPress plugin repository and offers the following features:

• You can directly embed a product or add to cart button using Gutenberg block or shortcode in any post or page without creating a dedicated product page.
• No hassle of user management like account registration and data maintenance.
• It is super simple that you do not need separate checkout and cart pages.
• There will be no archive pages for your products keeping it clean.
• It is possible to integrate PayPal or Stripe payment gateway.

If required, you can also create individual product pages, cart and product list page like any other ecommerce plugins.

1. Setting Up the Plugin

Login to your site and go to “Plugins > Add New” section to find and install WordPress Simple Shopping Cart plugin.

Go to “Simple Cart > Settings” section and navigate to “General Settings” tab. Here, you can find product and cart shortcodes which you can directly use in any post or page. However, you can use Gutenberg blocks instead of using shortcodes.

Scroll down to “PayPal Standard Settings” heading and add your PayPal email address in the first box. Fill other details you want like currency, cancel / return URLs under “Shopping Cart Settings” heading. Remember, to enable IPN validation in your PayPal account so that the payment will process successfully.

If you want to use PayPal Smart Checkout, then first enable “Disable Standard PayPal Checkout” option. After that, go to “Advanced Settings” tab and configure your PayPal Smart Checkout settings.

Go to “Email Settings” tab and configure the “Purchase Confirmation Email Settings”. You can setup email address, subject and content (using available email tags) for triggering notification email for both buyer and seller (generally it is you). Finally, if you want to use Stripe instead of PayPal, go to “Stripe Settings” tab and check “Enable Stripe Checkout” option. You can configure other details like secret key, publishable key to link your Stripe account.

After making changes in each tab, make sure to scroll down to bottom and click “Update Options” button to save your changes.

2. Using Shortcodes for Add to Cart and Products

Once you configure the settings, next step is to create a product that you want to sell. As mentioned, you can simply show add to cart button along with product details without creating a separate page.

2.1. Product Shortcode

Below is the format of add to cart shortcode in which you can change the name / price and use anywhere on your site.

[wp_cart_button name="Product Name" price="Product Price"]

Let us say, you want to sell an eBook with the name as “Free SEO Guide” for $5 using PayPal. Open a post or page and insert a Shortcode block. Paste the following product shortcode inside the block:

[wp_cart_button name="Free SEO Guide" price="5"]

It should look like below on your post editor:

Publish or Update the post and view its content. The shortcode will insert an “Add to Cart” button without any product details as shown below:

You can use Columns block with two columns and insert an image and text with add to cart button as shown below. I have also added separators above and below so that the appearance looks attractive on the page.

For linking downloadable eBook file, first upload the PDF and copy the file URL from “Media > Library” section.

Now, change your shortcode in post editor to include the file URL path as below:

[wp_cart_button name="Free SEO Guide" price="5" file_url="PDF File URL"]

It should look like below and make sure to replace the file URL with your own URL.

You can add as many as products on any of your pages and sell them without hassle.

2.2. Showing Cart with Shortcode

When clicking “Add to Cart” button, the product will be added to the cart. You have two options to show the cart to your users – one is to create a separate cart page (you need to add this page as your Checkout page URL under General Settings tab) and other is to simply show a cart below the product using another shortcode. Cart shortcode has the following syntax and you simply need to paste below the product inside a Shortcode block.

[show_wp_shopping_cart]

Published page will show the cart below your product when there are items added. User can click on the “Checkout with PayPal” button and complete the purchase (or use Stripe payment).

3. Using Gutenberg Blocks for Add to Cart, Product and Cart Page

Remembering the shortcode is pain work and the plugin covers your back with three Gutenberg blocks. Type /shopping to find the blocks and insert in your page.

• Add to Cart Button
• Product Box
• Shopping Cart

These blocks work exactly as explained above using shortcodes. However, you can add the details in the block settings instead of typing inside Shortcode block. Let me add a product box block and a cart below to show how it looks.

3.1. Using Product Box Block

After inserting a block, you will see a notification saying, “You must specify the required fields of this block first!”. Go to “Block” tab in right sidebar and fill out the required details.

Product box has different settings sections like General, Cart Button and Product Variations. You can fill details like name, price, description, file URL, thumbnail, etc. under General section. Similarly, you change the “add to Cart” text under “Cart Button” section and add a background for the button if required.

You can add variations under “Product Variations” section which is not applicable for an eBook. If you are selling physical product or service with variations, use the format like Color|Red|Green|Blue separate with pipeline symbol. The first item is the heading and remaining items are used as selectable options in a dropdown as shown below.

Good thing with Gutenberg block is that you can visually check the result before publishing your page. If everything looks fine, publish / update your post to see the product box in action.

 As you can see, the product box looks different on the published site as your theme will affect the final display. If you want to show borders and background color, then add the following CSS on the page using Custom HTML block.

<style>
.wp_cart_product_display_box {
    text-align: center;
    border: 1px solid lightgray;
    padding: 20px;
    background: lightgreen;
}
</style>

This CSS will be applied only for the product boxes on the current post. If you want to apply the changes globally to all product boxes, then add the same CSS under “Appearance > Customize > Additional CSS” section (for block-based themes, you need to add this in header template). And the find customized product box will appear like below on your page. If required, you can also add “width” or “max-width” parameter to reduce the box’s width.

3.2. Adding Cart with Block

If you want to show a cart below your product box, simply insert Simple Cart – Shopping Cart block. You can select the display option for the cart from right sidebar settings and publish the page.

Cart will be shown only when there are items added and users can click on the “Checkout with PayPal” (or use Stripe) to finish the purchase.

4. Creating Separate Product Page

It is always a good idea to have separate page for your product. The process is same as explained above and you can either use the shortcodes or use Gutenberg blocks. The only difference is that you create a new page and insert the shortcodes / blocks there instead of inserting in a post. Having a separate page also allows you to add more content about your products and display them in a list page showcasing all your products.

Note that the product page and shortcode/block work independently. If you want to show the same product in a separate page as well as embed as a product box in posts, then use reusable block option as explained below.

• Create a new product page by going to “Pages > Add New” section.
• After adding a product box and cart, group them as a single block.
• Now, change the group block as a reusable/pattern block.
• Publish the product page and insert the reusable/pattern block wherever you want.

In this way, you can have uniform appearance of the product box display throughout the site. Learn more on how to create a reusable block in WordPress Gutenberg editor.

5. Using Separate Checkout Page

As mentioned, you can add a separate checkout URL instead of adding cart below your product.

• First, create a new page by going to “Pages > Add New” section.
• Name your page as Checkout and either add a cart shortcode or insert Simple Cart – Shopping Cart block. Select “Cart Display Options” if you are using the block.
• Publish your page and copy the URL.

• Go to “Simple Cart > Settings > General Settings” and scroll down to “Shopping Cart Settings” section.
• Find “Automatic redirection to checkout page” option and enable “Checkout page URL”. Paste your checkout page URL in the text box, scroll down to bottom and click “Update Options” button.

Whenever users click the “Add to Cart” button on the product box display, they will be redirected to your checkout page for finishing the purchase. You can make the checkout page as fullwidth and remove footer widgets to make it clean if possible. I use GeneratePress theme in this demo which allows you to remove widgets and customize the page layout easily.

User will get a notification along with a downlink to your file after completing the payment. You will also get an order notification as per the setup in “Email Settings” tab.

6. Showing Widgets in Sidebar or Footer

If you want to showcase a product box or cart on the widget area (sidebar or footer), then go to “Appearance > Widgets” section. Search and add product box or cart widgets in the required widget area.

Final Words

WordPress Simple Shopping Cart plugin is definitely a cool option to sell digital products without slowing down your website. The plugin also allows you to create coupons and have shipping setup for products. Only thing you should take care is to create a separate directory for uploading all your files that you sell. You should restrict access to this directory by direct browsing and search engine indexing so that your product files will not be indexed by search engines.