|
/ Knowledge Base /Products/ How to Create SureCart Product Page in Elementor

How to Create SureCart Product Page in Elementor

In this article, we’ll guide you through the process of creating a SureCart product page template using Elementor Theme Builder.

Please note: To follow this tutorial, you’ll need Elementor Pro, as it provides access to Elementor Theme Builder.

Let’s begin!

What is a Product Page?

A product page in SureCart is a special page for just one thing you want to sell. It’s like giving that thing its own space to show off. 

You can see pictures of it, read about what it does, how much it costs, and stuff like that. It’s like a mini showcase for that thing so people can decide if they want to buy it or not. 

Just imagine it’s like a sneak peek before you decide to put it in your shopping cart.

What’s Elementor & Elementor Theme Builder

Elementor is a plugin designed for WordPress websites.

It lets you create and edit web pages visually, without needing to write any code. You can add elements like text, images, and buttons by dragging and dropping them onto your page. 

And Elementor Theme Builder is a feature that allows you to customize and design every part of your WordPress website’s theme, including headers, footers, single post templates, and more. 

It lets you create consistent and personalized designs for different sections of your site without coding. 

How to Create a Product Page In Elementor 

Now, let’s start building the layout for the product page using Elementor Theme Builder.

  1.  Navigate to the “Templates” section in the Theme Builder menu.
  1. Select the “SureCart Product” option.
  1. Click the “Add New” button to create a new template.
  1. You can close this pop-up since we’re designing the page from scratch.
  1. Let’s begin by adding a section to our page. To do this, simply click on the plus icon located in the center of the screen.
  1. Now, click on the layout option with two columns.
  1. Now, we recommend you add all the shortcode blocks to the respective columns as shown in the image below. You don’t need to fill in the shortcodes just yet; simply place them on your screen.

Here’s how the shortcodes will be arranged in the description. Feel free to adjust the order and position according to your preference.


Here’s the list of the shortcodes used above:

DescriptionShortcode
Product Media Shortcode[sc_product_media auto_height=true thumbnails_per_page=5]
Product Title Shortcode[sc_product_title]
Product Price Shortcode[sc_product_price]
Product Description Shortcode[sc_product_description]
Product Quantity Shortcode[sc_product_quantity]
Product Price Choices Shortcode[sc_product_price_choices label=”Choose a price” columns=”2″]
Product Cart Button Shortcode[sc_product_cart_button text=”Add to bag” width=100]

We have an article titled “SureCart List Of All Shortcodes” that explains each of them in detail and also demonstrates how to add additional parameters to the shortcode if required. Be sure to give it a read.

  1. Now you can fill in all the shortcodes using the example table above. Once you’ve added them, simply click on the “PUBLISH” button to save your changes.

Please note: The shortcode isn’t rendered within Elementor. However, we’re continuously working to improve this experience and create dedicated Elementor blocks specifically for SureCart. This will allow you to visually edit the elements more seamlessly in the future.

  1. Click the “ADD CONDITION” button.
  1. For this article, we’ll choose this design to apply to All Products. However, remember that you can also create a design for a specific product.
  1. Click on the SAVE & CLOSE button.
  1. Navigate to SureCart > Products and click on the Default (Customized) toggle under the Template section to open it.
  1. Click on “Theme Layout” under PAGE LAYOUT to ensure that the template we edited in Elementor will be applied.
  1. To save your modifications, click on the “Save Product” button.

That’s it!

Now, when you visit any product page, you’ll see the page beautifully designed using the Elementor page builder.

When you use Elementor Theme Builder along with Elementor Pro for your SureCart WordPress website, you can easily make attractive product pages without needing to know how to code.

You can change everything about how your website looks, and it’s simple to do with shortcodes. This way, you can create product pages that look really nice and match what you like.

Just follow the steps in this guide, and you’ll learn how to make product pages that make your website enjoyable to use and show off your products in a great way.

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

Need help? Contact Support
On this page

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

E-Commerce Store Launch Checklist Download
Scroll to Top