Studiocart + Showit

How to use Studiocart with your Showit site

JT Pals avatar
Written by JT Pals
Updated over a week ago

Studiocart is a WordPress based plugin that helps quickly create checkout and sales funnel pages that are perfect for course sales. Then connect that purchase to an email or course system through their integration options.

Note: Studiocart requires Showit Advanced Blog Subscription - This is a WordPress plugin based system.

The examples below are using Studiocart version 2.3.5 or newer.

⚠️ All third party plugins and integrations are subject to change by their respective developers. Before downloading a plugin, make sure that it is compatible with the most current version of WordPress.

If you have questions about whether or not a service works well with Showit, we recommend checking in the Facebook Showit User Group.

Default Studiocart Support


Studiocart will work right-out-of-the-box, but the layout of the Studiocart Product pages is, by default, controlled by Studiocart. See below for custom Showit layouts options.

Here is an example of the default output:

Connect Your Showit Design


You can change to use your Showit layout for the Studiocart product pages. Studiocart will default to using the same layout used for your blog posts, the Single Post template in Showit.

To activate your Showit design for Studiocart, their template must be deactivated:

  1. In Wordpress go to Studiocart > Settings

  2. Scroll down to Disable Product Template

  3. Activate the setting to Disable and Save

Jump User to Confirmation Message after Purchase

Upon purchase, the page will refresh and a confirmation page will appear where the order form was placed. Sometimes that can be further down the page, and it might be beneficial to have the user jump to that confirmation page.

You can add the following code to the Advanced Settings > Inline Javascript section of your Single Post (or custom if used below) blog template to automatically jump the user to the confirmation page after purchase.

jQuery(document).ready(function($){
if($('#sc-order-details').length) {
$('html, body').scrollTop($("#sc-order-details").offset().top);
}
});

Here is where to add it in Showit.

Creating Your Products in WordPress


Your products are managed directly in Wordpress under Studiocart > Product.

Refer to Studiocart's article on Adding and Managing Products for all details.

If you're using a Showit layout for your product pages, then you'll need to be sure to also include the Studiocart Order Form inside the product details section.

Here is a quick way for adding that element to your product. (click to view full)

A published product page with your custom Studiocart Product Template will then use your own layout and look like this:

Create a Custom Studiocart Product Template in Showit


If you're not happy with Studiocart's default page layout or using your Single Post layout, you can create a custom layout in Showit. To do that you'll need to create a custom WordPress template for StudioCart to render it's product pages.

The quickest way to start a custom product page is to duplicate your current "Page" blog template that's included in most designs. Click the ••• to duplicate that page and rename it Studiocart Product.

You'll need the following content placeholders on that template:

  • Post Title Placeholder (this will display your product name)

  • Post Content Placeholder (this will display your product details and StudioCart order form from Wordpress)

The template will need to have a custom Wordpress template name set. Set the Wordpress Template setting to Custom and set the Custom Template Name to: single-sc_product

To activate your custom template: Disable the default Product Template in Studiocart.

  1. Publish your design in the Design App.

  2. In WordPress go to Studiocart > Settings.

  3. Scroll down to Disable Product Template.

  4. Activate the setting to Disable and Save.

  5. Your Studiocart products should now use that custom layout.

Need assistance with Studiocart? Please refer to their documentation.

Did this answer your question?