Product Card

This guide explains how to use the SureCart Product Card within Elementor. This functionality is especially useful if you want to create a custom shop page or display individual products on any page or post.

Let’s get started!

Elementor Loop Grid

In order to use the SureCart Product Card element, you need to use it inside an Elementor Loop Grid. You can do this on any page or post, so it’s very handy.

• First, create a page or post and edit it with Elementor. Once you are inside Elementor, add a container and then add the Loop Grid inside it.
• In the ‘Choose template type’ dropdown, select ‘Posts’ and then click on the ‘Query’ tab.

• In the Source dropdown, select SureCart Product.
• We will leave the other settings as they are, but you can adjust them according to your preferences.

• Now, click on the Create a template button. This will open a modal window.

• Click Save to apply the changes.

• In the template, you can either add the Product Card element directly or click on the SureCart icon. For this example, we will select the SureCart icon since it shows the available templates. This is the recommended approach if you want to quickly use existing layouts.

• Click the Insert button to add the Product Card to your design.

• Click the Publish button located in the top-right corner of your screen to save and publish your changes.

That’s it! You can now view the page on the front end to see it in action.

Frequently Asked Questions