Your Cart is Empty
To kick things off, in case you didn’t know, here’s a quick rundown of what Elementor and WooCommerce are.
Elementor Pro
Elementor Pro is an easy-to-use webpage builder, provided for free with every Accept Pay card payments plan.
It lets you create an amazingly beautiful website in the quickest way possible. You can reach a high level of design by designing live, and on the frontend of your WordPress site.
WooCommerce
WooCommerce is a free WordPress plugin that incorporates eCommerce capabilities for your site so you can have an online store. It integrates easily with your existing WordPress site, allowing you to create customizable stores in minutes, receive secure payments using Accept Pay, configurable shipping options, and much more.
The Elementor Pro plugin allows you to design your WordPress content using a visual, drag-and-drop interface.
You can use widgets to add content to your site and control nearly every aspect of your designs’ layouts and styles.
You also get access to Elementor WooCommerce Builder, which lets you design dynamic templates for your product archive and single product pages using the same visual editor.
With WooCommerce Builder, you can easily build an entirely custom WooCommerce store without ever needing to work directly with PHP template files or WooCommerce hooks.
You can use Elementor WooCommerce Builder to design your product archive and single templates, which comprise most of your store’s content. You can also design the rest of your WordPress content, even including templates for your header and footer.
However, there are two WooCommerce pages that it doesn’t help you with at this time:
You can use Elementor to add content around the WooCommerce cart and checkout content, but you cannot customize the actual content itself. To do this you will need to know your way around CSS, and you can add your own styles to control the cart and checkout pages.
Now, roll up those sleeves to get hands-on and design your store using Elementor Pro and WooCommerce Builder.
Let’s go step-by-step and create a store.
If you haven’t already, you’ll want to start by setting up and configuring the basics of your WooCommerce store. These basic setup steps aren’t the main focus of this tutorial, so we won’t go too in-depth.
But in general, you’ll want to:
If you need help getting started, more information on how to do this can be found here.
Now, you’re ready to start building your store, starting with the template for your product archives.
The product archive page is the page that lists all of your WooCommerce products (or the products with a specific category, tag, etc.).
To get started, go to Templates > Theme Builder > Product Archive. Then, click the Add New Product Archive button.
Give it a name and click Create Template to continue.
This will launch you into the design interface. You can import one of the pre-made product archive templates or close the template library to build your design from scratch.
From there, you’ll be able to design your archive template using the visual, drag-and-drop interface.
You can use the dedicated Product Archive widgets to add core content like a list of all your products or the title of the archive page (e.g. the name of the category).
Editing one of the widgets lets you control its appearance and functionality. You can customize everything from star ratings to sale badges.
When you’re finished with your design, click the Publishbutton to control when to use your template.
You get five display conditions that you can mix-and-match as needed:
For example, to display the template on your main shop page only, choose Shop Page.
For some conditions, you’ll get additional options. An example of this is if you select Product categories, you can target your template to all product category archive pages or just a specific category (or set of categories).
These display conditions are useful because they let you create as many unique templates as you need to best showcase all the different products that you sell.
Sometimes a one-size-fits-all approach isn’t the best solution. WooCommerce Builder makes it easy to spin up new templates without needing to work directly with PHP template files.
Once you’ve created your product archive pages, you can use the same basic approach to customize a WooCommerce product page template for single products.
To get started, go to Templates > Theme Builder > Single Product. Then, click the Add New Single Product button and give it a name.
Just as with your product archive design, you’ll have the option to import one of the pre-made templates or build your own product page template from scratch.
Now, you’ll get another set of dedicated widgets for all the information on the product single page, including everything from the product title to related products and upsells.
Entering the settings for one of the widgets lets you configure its style and placement.
By default, Elementor will pull in one of your real products for the live preview of your design. But if you’d prefer to see how your design would look with a different product, click on the gear icon in the bottom-left corner and edit the Preview Settings to use any product at your store.
Once you’re finished, click the Publish button to choose where to apply this product single template.
Here, you’ll get another five options:
For the latter options, you’ll be able to choose specific items that apply to that condition (e.g. a specific category).
As with your product archive templates, you can repeat the process as many times as needed to ensure that each type of product has an optimized single product design.
Beyond letting you design your product archive and single templates, Elementor Pro also gives you dedicated WooCommerce widgets that you can use in other designs.
For example, you could use them to feature products in a blog post that you’re writing. You can access these widgets at any time from the WooCommerce section in the Elementor interface.
If you want to display products, you can create your own custom queries to control which products to display.
You can even use the included Elementor Popup Builder feature to include or promote products in a popup. For example, you can advertise a special deal and include an add to cart button right in the popup.
It’s a great feature to promote special deals and promotions.
With Elementor Pro, you can build a custom WooCommerce store faster and with more flexibility.
As you can see, it’s a simple process. Rather than working with hooks or template files, you can use a visual, drag-and-drop interface.
You get dedicated widgets to display important WooCommerce product information, and you can also use conditional display rules to create as many single product and product archive templates as your store needs.
So, get started today and build your own custom WooCommerce store. Then, turn that sign over to “OPEN” and start selling your amazing products.
