Creating a Product Template in Elementor

WP EasyCart makes it easy to create custom templates for your products using the Elementor modules.  A full set of modules with all product information is available to you as a designer to custom build a simple template and attach to either all products, or even specific categories of products.

 

 

Step #1 – Build a Template in Elementor for Products

To get started, you should have WP EasyCart installed as well as Elementor page builder.  You can construct a template that will be reused design wise throughout your entire easycart store system.  IF no template is applied, then EasyCart simply uses our default product styling.

Beginning Note:  You must go to WP EasyCart -> Settings -> Design and turn ‘Enable Custom Post Template‘ to ON.

You may attach a template to all products, or to specific categories of products.  We’ll teach you how!

Start by clicking the Templates -> Theme Builder menu on your WordPress menu.

 

Step #2 – Select a Single Post Style Template

Because we are working with product details, every single product you add to your WP EasyCart becomes a custom post within your system with it’s own unique URL and post.  So we will select to create a Single Post template either from the side menu or main screen selection here.

Note:  You may get a popup here asking to pick from some predefined templates, go ahead and close the  next window if needed!

 

Step #3 – Pick the WP EasyCart Modules & Layout

Now for the fun part, you can scroll down the elementor modules on the side until you find the ‘WP EasyCart‘ modules as pictured below.  You may also click the ‘+‘ sign in the middle to choose your initial layout of your product page.  Here I have chosen a 2 column layout… but you may choose what you like.

 

 

Step #4 – Add your Favorite Modules!

You will notice we have modules for nearly every product section found on our product details page.  Product titles, images, descriptions, prices, add to cart buttons, SKU, Categories, stock and more are available here.  You may want to experiment for a while to become familiarized with each module and what they offer.

As you drag a module to the design area, you should engage the ‘Use In Template‘ option as pictured below.  This will engage the first product you have and give you an idea of what it may look like as you build a product.  If you do not have any products in your store, be sure to add a product before designing a template!

In this example, notice I dragged out a Product Images module and engage the ‘Use In Template‘ feature to show my example product.

 

Customize Content

Each module will have custom “Content” settings such as this example with the Product Images module.  You may engage/disengage certain features, change locations, spacing and more making these highly efficient design tools.

 

Customize Styles

Along with the content of a module, we have nearly unlimited Style choices as well.  Each module can be configured to provide the design impact you are looking for.  Everything from buttons, borders, and shading to paddings, margins, and more!  In this example, I’m simply selecting my Product Image module and looking at the ‘Style‘ menu and my options.

 

Remember, you are customizing a Template!

You have complete control with your template and elementor here.  Whatever you design here we can apply to products and categories in easycart!  You can see here we drag various modules out, apply them, design them, and dial in the look you are going for!

 

 

Step #5 – Applying a Template

Now that you have your template designed, let’s apply it.  Simply go to the lower elementor Update/Publish button and click the arrow.  You can choose ‘Display Conditions‘ which will allow you to control when and where this template is to be applied.

 

Targeting ALL Store Products

Important Note:  You must go to WP EasyCart -> Settings -> Design and turn ‘Enable Custom Post Template‘ to ON.

We specifically can target ALL products by choosing the ‘Store Items -> In Tag -> Tags: product’ condition.  Click the Save & Close button in the bottom right and this template will apply to all products now.

It is really important to note that using ‘Store Items -> Store Items -> All’ will apply the template to categories, manufacturers, and menu items, which will cause those pages to malfunction. You must use the ‘In Tag’ feature!

 

Targeting Specific Products IN Categories

If you are looking to specifically target a group of products to apply your template, you will want to create ‘Categories’ in WP EasyCart just for those items.  For example, if you want to have Mens, Womens, Children’s clothing and only apply this template to the Women’s category, you must first create that category of in EasyCart.

Important:  You MUST use ‘In Tag’ options.  Tags are created each time you build a category or product and you can search for them when you select ‘In Tag‘ option.  So essentially thing of Store Items -> In Tags as our Categories.

In this example below, you can see I chose the ‘In Tag’ option and am searching for Women’s which will apply this template to a single category.  You may choose to apply it to others by adding conditions as needed here.  It’s very flexible this way.

That’s It!

You may edit this feature later at anytime by going to your Templates -> Theme Builder panel and customize…  You can edit conditions at which this template applies, or edit the template itself by clicking Edit as shown below.

You should be able to view your store or category of products and see the changes reflected with your new template.  we advise you also make sure to clear any caching systems you may have holding old styles.  Enjoy!