- Product Types
- Adding Products
- One Time Pricing
- Subscription Pricing
- Subscription Trials Setup
- Installment Pricing
- Donation / Pay What You Want
- Inventory Management
- Product Variants
- Variant Images
- Digital Downloads
- Change Product Availability
- Hide Product from Shop Page
- Template Customization
- Product Collections
- First-Time Payment Discounts
- Manage Product Access
- Payment Types
- Free Trials & Setup Fees
- Create Product With Free Trials
- Charge Set Up Fee on Trials
- Product List
- Product Pages
- Create Product Page in Elementor
- Custom Buy Links
- Product SEO
- Change Permalinks
- Custom Fields
- Adding Products
- Test Mode
- Make Test Payments
- Edit & Customize Form
- Change Form Template
- Delete SureCart Forms
- Custom Checkout Form
- Add New Checkout Form
- Checkout Form With Gutenberg
- Checkout Form in Elementor
- Custom Thank You Page
- Create Donation Form
- Customize Confirmation Popup
- Include Coupons in URLs
- Pre-Fill Checkout Fields
- Change Checkout Texts
- Password Field in Checkout
- Default Country Code
- Add Terms to Checkout
- Conditional Block Checkouts
- Remove Coupon Field
- Hide Quantity Option
- Disable Quantity Editing
- Disable Item Removal
- Country Specific Purchases
- Fix View Order Button
- Fix Express Payment Buttons
- Fix PayPal Test Connection
- Fix PayPal Test Connection
- Fix Sign-In Loop
- Fix Order Confirmation Redirect
- Fix Divi Bullet Point Issue
- Fix Customer Dashboard
- Fix JSON Response Error
- Failed Payment Behavior
- Fix Stripe Zip Code Error
- Fix "Product Can’t Be Blank"
- Troubleshooting Guide
- PayPal IPN Warning Emails
- Caching Configuration for SureCart
- Why iDEAL Might Not Appear in Your CheckoutÂ
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.
- Navigate to the “Templates” section in the Theme Builder menu.
- Select the “SureCart Product” option.
- Click the “Add New” button to create a new template.
- You can close this pop-up since we’re designing the page from scratch.
- 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.
- Now, click on the layout option with two columns.
- 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:
Description | Shortcode |
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.
- 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.
- Click the “ADD CONDITION” button.
- 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.
- Click on the SAVE & CLOSE button.
- Navigate to SureCart > Products and click on the Default (Customized) toggle under the Template section to open it.
- Click on “Theme Layout” under PAGE LAYOUT to ensure that the template we edited in Elementor will be applied.
- 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.
We don't respond to the article feedback, we use it to improve our support content.