Shopping Cart Plugin
Parent Page(s): Conferences & Special Events
This plugin can be activated on any UBC WordPress site and allows you to add items to a cart, which can be exported in a number of ways. When used in combination with ePayments, the Cart plugin can be used to create an online store for selling merchandise, tickets, memberships, and more!
UBC Product Types are the categories to categorize your products under. After creating a UBC Product, you will need to assign it to a UBC Product Type.
- Go to the Dashboard of your site.
- Go to UBC Products >> UBC Product Types.
- Enter a product type name.
- Add a description to the product type
- Click Add New UBC Product Type.
- Go to the Dashboard of your site.
- Go to UBC Products >> Add New.
- Enter a product title.
- Enter a product Description in the text editor box.
- In the Pricing Fields section, specify the price of the product.
- Enter a short product description in the Excerpt section.
- Set Featured Image on the right menu bar and select an image for your product.
- Select a UBC Product Type for the product.
- Click Publish.
There are two methods for displaying products on a page.
Method 1: Using Loop Query
- Go to Pages >> Add New.
- Copy and paste the following loop shortcode into the text box.
- Replace "theatre" with the name of the UBC Product Type you would like to display on this page.
[loop query=”post_type=ubc_product&ubc_product_type=theatre&meta_key=price&orderby=meta_value&order=asc”] [ubc-product show_id=false show_thumbnail=true][/loop]
Method 2: Using Custom Link
- Go to Appearance >> Menus.
- In the Custom Links box on the right menu bar, type in /ubc-product/ in the URL text box and the desired link name in the Link Text box.
- Click Add to Menu.
- Click Save Menu.
- Go to the Dashboard of your website.
- Go to UBC Products and click on the Product you would like to make unavailable.
- Click on Product Dates in the top right-hand corner of your screen.
Note: If you do not see a Product Dates, click on Screen Options toggle at the top right-hand corner and select Product Dates.
- Next to the End date, click Edit and change the date to any time in the past. Click Close when finished.
- Click Update to save changes.
By default, a payment form titled UBC CART is already set-up for you. If you would like to edit the form fields:
- Go to Forms and click on the UBC Cart form to edit.
- Add fields from the right menu bar as desired, or delete current fields.
- Click Update Form to save all changes.
Selecting Form for Checkout
- Go to your websites Dashboard.
- Go to Forms >> UBC Cart
- Scroll to set the form as your checkout form and select the form titled Cart.
- Click Go to Checkout
Editing Cart Button Labels
- In the Cart Settings section, edit displays to desired.
- Click Save when finished editing.
- If desired, check the boxes next to the settings under the text boxes.
Below is a list of additional shortcodes that you can use to customize how/where the UBC CART appears in different areas of your website. These are optional and not required.
- Using the show-cart shortcode in a section widget will display the cart on any post or page.
- It takes no parameters and the data columns can be modified in "UBC Cart" settings under "Forms" in the Dashboard toolbar.
- It is also used on the page where you edit the cart before finalizing your purchase on the checkout form.
The ubc-product shortcode is a template that must be used within the loop query (i.e., CTLT’s Please specify a query for your [ loop ] shortcode.
The ubc-product-related shortcode can be used in a post to list related products by tags. That is, the ubc_product custom post type shares the default tag taxonomy that WordPress uses for standard posts. All products tagged with "food" will appear on a post with the ubc-product-related shortcode if it is also tagged "food." Parameters are the same as the ones used for ubc-product.
- Parameters: show_headings(true) | linked(true) | link_target(‘_self’) | show_thumbnail(true) | thumbsize(”) | show_id(true) | show_title(true) | show_excerpt(true) | show_price(true) | show_button(true)
- Sample Usage: [ubc-product-related show_id=false show_thumbnail=true]
The ubc-product-magnify shortcode adds a magnifying glass to selected images on a UBC Product page. By default, the magnifying glass will be applied to the featured image of the UBC Product, but parameters can be used to select specific images from your Media Library. Note that the magnifying effect will "break" if used on images with transparent backgrounds.
- Parameters: product_src=Image URL (default: featured image) | product_width=Image Width (default: 200 px) | product_glass_width=Glass Width (default: 175 px)
- Sample Usage: [ubc-product-magnify product_src=http://cart.adm.arts.ubc.ca/wp-content/blogs.dir/47/files/sites/13/2016/01/UBC-Brand-Blue.png product_width=250 product_glass_width=100]
The ubc-product-multiple shortcode creates a button that allows you to add multiple items to the cart with a single click. The shortcode will honour any max items per cart restrictions and any unavailable items. When adding the IDs to the parameter, ensure that each one is separated by a comma and no spaces.
- Parameters: label=Label Name (required) | ids=Product IDs (required)
- Sample Usage: [ubc-product-multiple label="Add Multiple Items" ids="5,12,17"]
How do I get started?
Send us a request using the form below with your website information and a brief description of how you’d like to use the Cart plugin. We will help you with the setup and provide training on how to manage the plugin.