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.

💡 Requires Showit Advanced Blog Subscription - This is a Wordpress plugin based system.
💡The examples below are using Studiocart version 2.3.5 or newer.

Default Studiocart Support

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

Here is an example of the default output:

Connect your Showit Design

You can also 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 there 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

On purchase, the page will refresh and a confirmation page will appear where the order form was place. Sometime that's 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.

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 placholders 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 Showit.

  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?