eCommerce: QuickShop Add to Cart buttons and Shopping Cart

You can accept credit card payments for products and services from your OM4 website using PayPal. Your customer does not have to set up a PayPal account to check out if they choose to pay with a credit card. If they have a PayPal account, they can also pay by eCheque.

Place Add to Cart buttons in any post or page. As soon as a visitor adds an item to their cart the integrated Shopping Cart will appear in your sidebar.

Our integrated Add to Cart buttons and Shopping Cart are best suited to rich content experiences with smaller numbers of products. It isn’t well suited to stores that have lots and lots of products and need more of an inventory selection/comparison shopping style of eCommerce.

Here are some examples of our integrated Shopping Cart in action:

This is an example showing a product description (image and text) followed by an Add to Cart.


Gel Pens (Pack of 12) $14.95:

As soon as a visitor clicks on an Add to Cart button, the product will be added to their cart. The contents of their shopping cart will be displayed in the sidebar.

om4-shopping-cart1

When your visitor clicks Checkout, they go to the PayPal payments page and make their payment.

Preparing Your Products

You may find it useful to prepare your product information BEFORE trying to build your online store. It can be faster to think through your product details on a spreadsheet – you can use this OM4 Online Store Products spreadsheet. (If you want us to build your store for you, we can build it using the information in this sheet.)

Activating and Configuring the QuickShop Plugin

If you don’t have the OM4 Quickshop plugin activated, activate the plugin and follow the Quickshop configuration instructions.

Placing Add to Cart Buttons with the Visual Editor

Write your copy and include images and text as you would for any normal page. When you are ready to place an Add to Cart button you can use the Shopping Cart icon in the toolbar of the Visual Editor.

Open your page or post for editing and make sure you are using the Visual Editor (see the tabs at the top right of the editor panel). Click the QuickShop icon in the editor toolbar to create a Product tag (shopping trolley icon, right across on the right hand side).

PayPal QuickShop Button on the Visual Editor

Once you click the shopping trolley icon you will see the following:
om4-quickshop-entry

Enter a descriptive product name and the price. You can set an optional shipping fee in the first field. If the shipping fee is different for the 2nd and subsequent products, enter the value in the 2nd shipping field.

Click the Insert button and your Add to Cart button will be added to your page in the form of a shortcode. If you inspect the shortcode you’ll see it is quite easy to change the individual parameters.

Save your page or post and test your button.

If you click the Add to Cart button and don’t see the shopping cart appear in your sidebar, go to Dashboard, Appearance, Widgets and make sure you have added the PayPal Shopping Cart widget to your sidebar. The widget will only display when one or more items have been added to the cart.

Placing Add to Cart buttons using shortcodes

It is easy to learn how to edit Add to Cart buttons using their shortcodes. You can use the more advanced options available with Add to Cart buttons with the shortcodes.

To place a basic Add to Cart button in a page or post, use the simple quickshop shortcode:
[quickshop name="ProductName" price="ProductPrice"]

Here is an example showing the shortcode to sell a Bridge for $49:

 [quickshop name="Bridge" price="49"]

In practice you might want to use images and text to describe the product, and include the Add to Cart button next to the description. Here is how that might look in practice.

Buy This Bridge
 Bridge 1 Owner

Postage and Shipping

First of all, understand that you can set up a range of postage calculations in your PayPal account preferences:

  • Flat rate
  • Percentage
  • Cost and Price Ranges (e.g $4.50 for prices up to $50, $6.50 for prices between $51 and $200)

If your postage calculations are not detailed enough, you can override postage for a specific product in the Add to Cart button itself.

  • If you want to override the default shipping price for a specific product, add a shipping field before the end of the shortcode:
    shipping="2.00"
  • If you want to override the shipping price for then 2nd and subsequent units of a product, add a shipping2 field before the end of the shortcode:
    shipping2="1.50"

Here is an example or a product with additional shipping costs:

Multiple Products in a Drop List

You can also have a dropdown list of products to choose from, with an add to cart button. To do this, you separate multiple product names with the | character.

For example, the following code would allow a visitor to select a black or a blue pencil. Both products cost $10.00:
[quickshop name="Pencil - black|Pencil - blue" price="10"]

This code would look like this when it is displayed to a visitor:

If you want each product in the dropdown box to have different prices, you can do so by separating multiple product prices with the | character.

For example, the following code would allow a visitor to select a cheap ($1.00) or an expensive ($20.00) pencil:
[quickshop name="Pencil - cheap|Pencil - expensive" price="1|20"]

This code would look like this when it is displayed to a visitor:

Allowing Your Customers to Specify Their Desired Quantity

Instead of adding a quantity of 1 to their cart, you can customise the Add to Cart button so the customer can type in their desired quantity before adding the product to their cart.

For example, the following code will allow the customer to add 12 Pencils to their cart with just one click, or alternatively they can type in their own quantity:
[quickshop name="Pencil" price="1" showquantityfield="1" quantity="12"]

This code would look like this when it is displayed to a visitor:

Qty:

Alternatively, if you wanted an Add to Cart button that automatically added 12 Pencils to the customer’s cart, but didn’t allow them to specify the desired quantity, the following code could be used:
12 Pencils: [quickshop name="Pencil" price="1" quantity="12"]

This code would look like this when it is displayed to a visitor:
12 Pencils:

Integrating with Payment Gateways other than PayPal

We support integration with PayPal (Website Payments Standard) for all customers. This means you can launch an eCommerce website, use PayPal as your merchant account and be up and running quickly. If you want to use your own merchant account / payment processor get in touch, tell us the payment system you are interested in and we might be able to quote you on adding support.