Elementor Professional’s built-in templates are a great way to mannequin an individual internet web page, nevertheless why customise your on-line retailer on a product-by-product basis, when it is best to make the most of Elementor Template Kits to design your full eCommerce website? 

Numerous corporations use WordPress to advertise their providers and merchandise, due to the favored WooCommerce plugin. Within the sooner publish, we constructed a whole eCommerce retailer, utilizing WordPress, WooCommerce and Elementor Professional.

On this follow-up publish, I’ll current you strategies to revamp your full on-line retailer, using Elementor Template Kits. We’ll moreover create a header that choices all of your retailer’s contact information. Alternatively, you in all probability have a very specific imaginative and prescient in ideas, then I’ll current you strategies to create your private Elementor template from scratch—offering you with full creative administration over your eCommerce website. 

What We’ll Be Constructing

Elementor is a flexible software program that provides you a lot strategies to design your eCommerce retailer.  Within the sooner publish, I confirmed you methods to redesign WooCommerce’s product archive and product pages, using any of Elementor Professional’s ready-made templates. On this follow-up publish, we’ll be exploring some further strategies you might create a professionally-designed eCommerce retailer using Elementor. 

By the tip of this tutorial, you should have created: 

  • An entire eCommerce retailer, using Envato Components Template Kits. We’ll arrange a themed assortment of templates that embody designs for all the pages your WooCommerce website could presumably need. By the tip of this half, you’ll have overhauled your product internet web page, product archive internet web page, and created a themed header that appears all through your full retailer. To ensure you’re happy with the finished product, I’ll moreover current you strategies to customize your chosen template bundle together with your private widgets, contact information and hyperlinks. 
WooCommerce generates a Product Archive page automatically you can customize this page using Elementor
  • A product internet web page with out a template! Have a selected design in ideas? Or want to experiment with a few fully totally different potential designs? I’ll current you strategies to assemble a product internet web page with out using a template. By the tip of this half, you should have created the subsequent design:
A product page created with a completely custom Elementor Pro template

We’ve received tons to cowl, so let’s get started! 

Utilizing Envato Components Template Kits With WooCommerce

Elementor Professional’s built-in templates are a great way to mannequin an individual internet web page—nevertheless why customise your website on a page-by-page basis, when it is best to make the most of a single template bundle that varieties your full website? 

Elementor Template Kits are themed collections of templates, along with eCommerce kits which might be designed significantly with on-line outlets in ideas. 

Elementor Template Kits

Template kits can take the ache out of designing and developing an web retailer. Merely choose your bundle, apply a template to each of your pages, make any desired modifications—and congratulations, you’ve got a professionally-designed WooCommerce website!

These template kits moreover current stand-alone blocks you might combine into your private internet web page layouts. Utilizing these blocks, you probably can create pages which might be distinctive to your website, however moreover fixed collectively together with your chosen template bundle.  

On this half, I’ll current you strategies to overtake your single product internet web page and product archive, customise your default templates with further widgets, and even strategies to assemble a complete eCommerce retailer using your chosen Elementor Template Package. 

Set up an eCommerce Elementor Template Package

Envato Components provides quite a lot of professionally-designed Template Kits, ranging from versatile, multipurpose templates to industry-specific kits.

The Envato Components website has a complete half dedicated to procuring and ecommerce, nevertheless you’ll moreover uncover templates designed collectively together with your specific enterprise in ideas, whether or not or not that’s picturesjourneyactual property, or health

You could spend some time looking out all the obtainable decisions, and decide which template is the perfect match to your website. I’m using the Shoppix package in all of my screenshots. 

When you’ve chosen your bundle, you merely should add that bundle to your website: 

  • On the Envato Components web site, select the template that you just want to use after which click on on Obtain.
  • Now you may each add this bundle to an current enterprise, or create a model new enterprise. Make your choice, and your bundle might be downloaded mechanically. 
  • Head over to your WordPress website. 
  • In WordPress’ left-hand menu, select Templates > Add New.
  • Choose Import Templates.
  • Click on Select file after which select the zip file that you just merely downloaded. 
  • Choose Import Now.

Your Envato Components Template bundle will now be uploaded to your WordPress website, ready to be able to use. 

Apply Your Elementor Template Package

On this half, I’ll current you strategies to overtake your product internet web page, using an Envato Components template.

All the Elementor templates on Envato Components are professionally-designed, however when your chosen template isn’t pretty correct to your specific website, then these templates are moreover simple to customize. 

On this half, I’ll current you strategies to easily add new efficiency to any template, using a set of Elementor widgets.

Let’s start by making use of a template:

  • In WordPress’ left-hand menu, select Templates > Add New.
  • Open the Template type dropdown and select Single Product.
  • Give your template a popularity, after which select Create template.
  • Within the following window, select the My Templates tab.
  • Select the template that you just want to use. In my screenshots I’m using Single Product 1.

Everytime you choose a template, Elementor will rapid you to import the doc settings for that template, which might override the net web page’s current settings. Except you’ve got a selected trigger to not, you’ll sometimes want to import the doc settings to your chosen template. 

Your template will now open inside the Elementor editor.

The Elementor editor will now display your chosen template

This template already has the whole thing your product internet web page needs, nevertheless what in case you want to add some further efficiency? 

Within the next sections, I’ll current strategies to customize your product internet web page template, using numerous frequent Elementor widgets.

Fb, Twitter, Instagram, & Extra: Including Social Sharing Icons

You should make it simple for visitors to share your whole content material materials on social mediacollectively together with your merchandise.

Though it’s not as frequent as sharing content material materials akin to weblog posts or articles, visitors would possibly sometimes actually really feel the need to share your merchandise, as an example must you’re working a really noteworthy low value, or your website choices some fascinating or unusual merchandise.  

You could add social sharing icons to your product pages, using Elementor’s Share Buttons widget:

  • Within the Elementor Panel, uncover the Share Buttons widget.
  • Drag and drop this widget into the half the place you want to present your social sharing buttons. 
You can add social sharing buttons to your product listing using the Share Buttons widget
  • Within the Elementor Panel, make sure the Content materials tab is chosen.
  • By default, this widget reveals icons for Fb, Twitter and LinkedIn. If you want to take away any of these icons, then click on on its accompanying X.
  • You could add further social media platforms to this widget by deciding on Add Merchandise after which using Community to select the social media platform in question.
Elementor Pro supports a long list of social media networks including Tumblr Digg and Skype
  • Rinse and repeat for every further platform that you just want to embody in your widget. 
  • Subsequent, you probably can tweak the look and feel of your social sharing buttons. Open the View dropdown and choose whether or not or not these buttons should attribute an icon, textual content material, or an icon and textual content material. 
You can style your social sharing buttons using Elementors Style tab

You may also want to change the scale of these icons, or the scale of the sharing buttons normally, using the Fashion tab.

On this half, we coated a few different methods you might customise the Social Sharing widget, nevertheless there’s loads further modifications you might make. 

It’s properly worth taking the time to find the Elementor Panel’s quite a few tabs and settings, until you’re absolutely fully glad collectively together with your Social Sharing widget.

Add to Cart: Customizing This Important Widget 

Because it’s such an integral part of the net procuring experience, most product internet web page templates attribute a built-in Add to Cart widget. Nonetheless, chances are high you may want to customise this default widget, and even change it with Elementor’s Customized add to cart widget. 

The Shoppix template is not any exception, as a result of it features a built-in cart widget. Nonetheless, its Add to Cart button is grey, which means it blends into the rest of my website.

To be certain that potential purchasers don’t wrestle to search out my Add to Cart button, I’ve decided to customize this widget with a bolder, brighter shade:

  • Within the dwell preview canvas, click on on to select the Add to Cart widget.
  • Within the Elementor Panel, click on on the Background shade swatch, which launches the color picker. 
  • Use the color picker to select the color that you just want to use. I’m selecting a shiny shade that contrasts (nevertheless doesn’t outright battle) with my website’s shade scheme. 

Alternatively, Elementor provides a Customized add to cart widget. This widget choices the acquainted Add to Cart button, plus an non-compulsory textual content material space the place visitors can specify what variety of merchandise they’re together with to their cart. 

Suspect your purchasers may want to purchase merchandise in bulk? On this example, a Customized add to cart may be a wonderful totally different to the same old cart widget.

To change your template’s Add to Cart widget with Elementor’s Customized add to cart, you’ll should delete the current Add to Cart widget. In Elementor’s dwell preview canvas, click on on to select the cart widget, after which press the Delete key in your keyboard. 

Within the Elementor Panel, uncover the Customized Add to Cart widget, drag it onto the dwell preview canvas after which drop this widget into place. 

Now you may customise the look and feel of your Customized Add to Cart widget, by clicking to develop the Button half inside the Elementor Panel. 

You can customize your templates built-in Add to Cart widget or replace it with Elementors Custom Add to Cart widget

To alter the button’s shade, open the Sort dropdown and choose from the numerous decisions. 

You may also want to change the textual content material that appears on the Add to Cart button, using the Textual content material space. 

The Customized Add to Cart widget can also present an non-compulsory Amount textual content material area, which is good for visitors who want to add numerous devices to their cart. So as so as to add this Amount area, click on on to develop the Product half inside the Elementor panel. 

Elementors Custom Add to Cart widget can display an optional Quantity text box
  • Open the Product dropdown and select the product that you just’re at current viewing. 
  • Drag the Present Amount slider into the Present place. 

Not like one other cart widgets, Elementor’s Customized add to cart widget doesn’t attribute a product stock rely. If you want to present this information in your product internet web page, you then undoubtedly’ll wish to make use of Elementor Professional’s Product stock widget, which you’ll uncover inside the Elementor Panel. 

Increase Your Income, With an Upsell Technique

As an eCommerce enterprise, it’s best to always be pushing purchasers within the route of higher and better merchandise—upselling is one product sales tactic that’s frequent with corporations of all shapes and sizes.

When you’ve carried out an upsell method, your website will mechanically encourage visitors to dig a little bit bit deeper into their pockets. For occasion, if a purchaser is viewing the latest MacBook Air, then your website can tempt them to splash further money, by displaying the latest MacBook Professional inside the sidebar. Bonus components must you highlight the reality that the Professional is on sale, for this week solely!

To implement an upsell method, you’ll should hyperlink your whole related merchandise inside the WordPress admin area, after which add Elementor’s Upsell widget to your product internet web page template. 

Since we already have the Elementor editor open, let’s add our Upsell widget: 

  • Within the Elementor Panel, uncover the Upsell widget.
  • Drag and drop this widget into the desired location in your dwell preview canvas. 

Earlier than any upsell content material materials appears in your website, you’ll should hyperlink all related merchandise inside the WordPress admin area. When you’ve printed your product internet web page template, you’ll should perform the subsequent: 

  • Within the WordPress dashboard, select Merchandise > All Merchandise.
  • Discover the first product that you just want to hyperlink to its dearer counterpart, after which open this product for enhancing, as common. 
  • Scroll to the Product data half, after which select the Linked Merchandise tab.
You can boost your revenue using WordPress Linked Products feature
  • In Upsells, enter the product that you just want to recommend as a dearer totally different. 
  • Click on Replace.

Now you may repeat the above steps, for all the merchandise that you just want to hyperlink.

Now, everytime any person views my Modern double-bed, WordPress will present the Modern king-sized double mattress as a potential enhance—and hopefully earn us some further revenue inside the course of! 

Whenever you view product WordPress will now display a You may also like section

By tempting your purchasers with further luxurious, high-end alternate choices, you probably can ensure you’re getting most revenue from every sale. 

The greatest method to Publish Your Elementor Template Package Web web site

When you’re fully glad collectively together with your custom-made product internet web page template, it’s time to roll it out all through your eCommerce retailer:

  • Within the Elementor Panel, select Publish.
  • Within the following popup, open the Embrace dropdown and guarantee Merchandise is chosen. 
  • Click on Save and Shut.

Your whole product pages will now attribute this brand-new construction.

Transferring Past a Single Template: The greatest method to Construct an eCommerce Store

Elementor Template Kits current all the templates that you should create a complete eCommerce retailer. 

If you occur to opted for a bundle that was designed significantly for eCommerce outlets, akin to Shoppix, you then undoubtedly’ll have entry to templates overlaying all the primary eCommerce pages, along with a product archive template.

To create a continuing look and feel all through your website, you’ll generally use numerous templates from the equivalent template bundle. Within the next sections, we’ll switch previous a single internet web page and apply numerous templates to our website, along with a header template that’ll appear all through our full eCommerce retailer.

The greatest method to Replace WooCommerce’s Product Archive 

To start, I’m going to make use of Shoppix’s product archive template to my website: 

  • In WordPress’ left-hand menu, select Templates > Theme Builder.
  • Choose the Add New button.
  • Open the Template type dropdown and select Product Archive.
  • Give your template a popularity, after which click on on Create Template.
  • Elementor will now present all the obtainable templates; click on on to select the Product Archive template that you just want to use. 

Your chosen template will now open inside the Elementor editor. 

At this degree, you probably can customise your template by together with and eradicating widgets, or enhancing the widgets that come constructed into your template.

When you’re fully glad collectively together with your template, it’s time to hit Publish:

  • Click on the inexperienced Publish button inside the Elementor Panel.
  • Within the following popup, open the Embrace dropdown and select All Product Archives.
  • Click on Save and Shut.

The updated product archive will now be rolled out all through your website. 

The greatest method to Create a Header for Your eCommerce Web web site

At this degree, you’re using numerous templates from the equivalent Elementor Template Package, which is good for giving your website a continuing look and feel. Nonetheless, many websites use recurring elements akin to headers and sidebars, to help tie their pages collectively and create a stronger mannequin id. 

Within the next sections, we’ll use your chosen template bundle to create a header that’ll appear all through your eCommerce retailer. I’ll moreover current you strategies to customize the header template collectively together with your contact information and hyperlinks to a really highly effective areas of your on-line retailer.

To start, let’s choose a header template:

  • In WordPress, select Templates > Theme Builder.
  • Click on Add New.
  • Open the Choose the template type… dropdown and choose Header.
  • Give this template a descriptive establish. 
  • Choose Create Template > My Templates.

Relying in your chosen theme, you should have a choice of header templates, as an example my Shoppix theme provides Header Menu – Gentle and Header Menu – Darkish templates.

In my screenshots, I’m using Header Menu – Darkish.When prompted, determine to import the doc settings.

Your chosen header template will now open inside the Elementor editor.

In this section well add a header to our online store

There’s quite a few strategies you might customise a header template, nevertheless I’ll be overlaying two of the popular: together with contact information and together with hyperlinks. 

Assist Potential Prospects Contact You

By along with contact particulars in your header, you probably can encourage potential purchasers to achieve out with any questions they may have. Offering fast entry to your contact information can also make your on-line enterprise seem further dependable, as potential purchasers will already know strategies to contact you within the occasion that they encounter any points. 

In Elementor, contact information is usually displayed by the Icon Listing widget. In case your chosen template already incorporates an Icon Listing, you then probably can customise this widget together with your private contact information: 

  • Click on to select your template’s Icon Listing widget. 

You can add your contact details using Elementors Icon List widget
  • Within the Elementor Panel, click on on to develop the Icon Listing half.
  • Click on to develop the a part of textual content material that you just want to edit. 
  • Enter your textual content material into the Textual content material space.
  • Add an non-compulsory hyperlink and icon, if required. 
  • If you want to add further information to your Icon Listing, then click on on Add Merchandise and customise this merchandise together with your private textual content material, plus any icons or hyperlinks that you just want to use.

In case your chosen template doesn’t already attribute an Icon Listing, then you might discover this widget inside the Elementor Panel, after which drag and drop it onto your dwell preview canvas. 

The greatest method to Add Hyperlinks to Your Web web site’s Header

Headers are a great way to provide fast entry to all of your website’s most important content material materials, and loads of header templates already embody placeholder hyperlinks. 

Envato’s Shoppix template is not any exception, as a result of it already provides placeholders for ChatContact UsLog in and Register pages, as part of its built-in Icon Listing widget. I’m going to customize these placeholders to hyperlink to fully totally different areas of my website.

In case your template doesn’t current comparable placeholder hyperlinks, nevertheless it does attribute an Icon Listing, you then probably can add your hyperlinks as new devices: 

  • Within the dwell preview canvas, click on on to select your current Icon Listing widget.
  • Click on the Add Merchandise button.

Alternatively, you probably can add a model new Icon Listing by discovering this widget inside the Elementor Panel, after which dropping it onto your dwell preview canvas.

For the sake of simplicity, I’m going to think about you’ve got an Icon Listing widget that you just want to customise together with your private hyperlinks: 

  • Within the dwell preview canvas, click on on to select the Icon itemizing widget.
  • Within the Elementor Panel, uncover the merchandise that you just want to flip proper right into a hyperlink, after which click on on to develop this half.
You can add links to your websites header using the Icon List widget
  • Within the Hyperlink space, each copy/paste or type your hyperlink. 
  • If required, change the textual content material that appears inside the header, by enhancing the Textual content material space. 

Rinse and repeat for every hyperlink that you just want to add to your header. 

By default, my header has a placeholder for a Contact Us internet web page. Presently, my website doesn’t even have this internet web page, nevertheless Shoppix does have a loyal Contact Us template. 

If you want to add a Contact Us internet web page to your eCommerce retailer, then it is best to make the most of this template to quickly and easily generate a Contact Us internet web page that compliments the rest of your website. 

Want to quickly and easily add a Contact Us form to your page Shoppix has a Contact Us template that you can use with your ecommerce store

You could then reference this Contact Us internet web page in your header.

The Shoppix header moreover includes placeholders for Log in and Register pages. In case your website doesn’t have membership efficiency, then we now have an inventory of twenty-two free and premium membership plugins you might add to your WordPress website. Alternatively, we’ve printed a step-by-step data to developing a membership website, using the Final Membership Professional (UMP) plugin. 

Perfecting Your Header: Take away Undesirable Hyperlinks

In case your header includes placeholders that you just don’t want to use, then it’s simple to remove them:

  • Click on to select your Icon Listing widget.
  • The Elementor Panel will now change to indicate all the devices included on this widget.
  • To delete an merchandise, click on on its accompanying X icon. 

Utilizing these methods, you probably can craft a header that includes hyperlinks to your whole website’s most important pages. 

Roll Out Your Customized WooCommerce Header

Proud of how your header is setup? Then it’s time to hit Publish:

  • Within the Elementor Panel, click on on Publish.
  • Open the Embrace dropdown and select Whole Web web site.
  • Click on Save & Shut

Your new header is now dwell, and can appear all through your full eCommerce website. 

Click Publish  Entire Site  Save  Close and your header will appear across your ecommerce website

Designing an eCommerce Web web site, Utilizing Elementor’s Theme Builder

On this tutorial, we’ve seen how one can create an aesthetic eCommerce website, using a variety of ready-made templates, along with the handfuls of professionally-designed template kits obtainable from Envato Components. 

However what in case you want to design a Woocommerce website, with out using a template?

Maybe you’ve got a selected design in ideas; maybe that you should assure your eCommerce website stands out from the gang, or maybe you want to mock up quite a few designs, using an intuitive internet web page builder? 

Reworking a clear slate into an Elementor template does require some time and effort, considerably compared with using a ready-made template. Nonetheless, you’ll be working with a lot of the equivalent widgets, so developing an eCommerce template shouldn’t actually really feel too dissimilar to customizing a ready-made eCommerce template.

On this remaining half, I’ll current you strategies to assemble a product internet web page with out using a template. To keep points fascinating, I’ll use some widgets that we haven’t beforehand coated, along with the WooCommerce breadcrumbs widget, which help keep purchasers oriented as they uncover your quite a few product courses. 

The greatest method to Create Your Personal Elementor Template

To create a clear template:  

  • In WordPress’ left-hand menu, select Templates.
  • Give the Add New button a click on on.
  • Open the Template type dropdown and select Single Product.
  • Give your template a descriptive establish.
  • Click on Create template.
  • Elementor’s template library will now open mechanically. Since we’re not using a template, you probably can shut this window. 

You should now have a really clear slate to work with. 

Construct a Product Web web page, With out Utilizing a Template

Let’s start from the best, by creating an space for our product title: 

  • Within the Elementor Panel, seize the Product Title widget and drop it onto the dwell preview canvas. 
  • Now you should use the Elementor Panel to change the title’s look, along with altering the scale of the textual content material and its alignment.  
  • Within the Elementor Panel, select the Fashion tab. Right right here, you probably can change the product title’s shade and font, add a shadow, and make totally different stylistic modifications. Spend some time experimenting, to see what outcomes you probably can create.
  • Subsequent, we’ve got to current potential purchasers what they’re shopping for. Within the Elementor Panel, uncover the Product Photographs widget and drag it onto the dwell preview canvas. 
Make sure customers can see what theyre purchasing using the Product Images widget

Each product needs an overview! I want to present my product description alongside the product image, so I’ll add a second column. So as so as to add a column, click on on the half that includes the Product Picture widget. This half should now be outlined in blue. Then, inside the half’s upper-left nook, Management-click the Column icon.

You can add more columns to any section by Control-clicking the sections Column icon
  • Choose Add New Column. You should now have a bit consisting of two columns.

Weve added a second column to our section
  • Within the Elementor Panel, uncover the Product Knowledge Tabs widget, and drag and drop it onto the column you merely created. 

You can display information about your product using Elementors Product Data Tabs widget
  • Now we’ve got so as to add the worth. Within the Elementor Panel, uncover the Product Worth widget and drag and drop it onto the canvas. 
  • By default, the Product Worth widget is on the smaller aspect, so I’m going to control the scale of its font. Within the Elementor Panel, select the Fashion tab. 
  • Discover Typography and click on on its accompanying Edit icon. 
  • Within the following popup, improve the scale of the font.
  • Subsequent up is the Add to Cart attribute. Within the Elementor Panel, uncover Add to Cart and drag and drop this widget onto the canvas.
Make sure visitors can purchase your products using the Add to Cart widget

Subsequent, I want to add breadcrumbs so that visitors can see the courses and subcategories this product belongs to, akin to Furnishings, Electronics, or Gardening. Within the Elementor Panel, seize the WooCommerce breadcrumbs widget and drop it onto the canvas. 

Help visitors navigate your ecommerce store using the WooCommerce breadcrumbs widget

Lastly, I want to encourage visitors to purchase further devices, by making a Associated Merchandise area. Within the Elementor Panel, seize the Product Associated widget and drop it onto the canvas.

These are all the widgets I’m together with to my product internet web page, nevertheless chances are high you may want to add further widgets, such as a result of the Social Sharing or Upsell widgets we coated earlier. 

You may additionally mannequin your widgets, by deciding on them inside the canvas after which opening the Types tab inside the Elementor Panel. Lastly, you probably can change your template’s construction, by grabbing any widget inside the canvas and dropping it right into a model new location.

Whenever you’re fully glad collectively together with your template, you probably can publish it by deciding on Publish > Embrace > Merchandise > Save and Shut. Each product internet web page all through your website will now attribute this new design. 

You could repeat this course of to create templates for any ecommerce internet web page, and even design a element that’ll appear all through your on-line retailer, similar to the header we created earlier. The chances are infinite! 

Conclusion 

On this assortment, we coated 3 methods you might assemble a WooCommerce retailer using Elementor. If you occur to’ve been following alongside, you then undoubtedly’ll have created numerous eCommerce templates, along with product archives, product pages, and headers. You additionally wants to pay attention to all of Elementor’s most important eCommerce widgets.

Elementor Template Kits are themed collections of templates, along with eCommerce kits which might be designed significantly with on-line outlets in ideas.

Elementor Template Kits

Template kits can take the ache out of designing and developing an web retailer. Merely choose your bundle and apply a template to each of your pages to get a professionally-designed WooCommerce website!

Leave a Reply