The Full Information to Utilizing Elementor with ShopWP Professional

Utilizing Elementor and ShopWP Professional collectively is a superb alternative to realize management over the structure and design of your merchandise. It actually does provide you with superpowers! Within the under information I’ll clarify all the pieces from easy methods to get began, to creating customized product templates and all the pieces in-between.

Desk of contents

• Necessities
• Constructing customized product web page templates

Necessities

With a purpose to use Elementor with ShopWP Professional you will need to meet sure necessities.

We’ve created a devoted ShopWP Elementor extension which is a separate WordPress plugin. This requires ShopWP Professional to make use of.

So earlier than you get began, you will need to have the under plugins put in and activated in your WordPress web site:

Required Plugins:

• Elementor
• ShopWP Professional
• ShopWP Elementor

Non-compulsory Plugins:

• Elementor Professional (That is non-obligatory and solely wanted if you wish to customise product web page templates)

Constructing customized product web page templates

Utilizing Elementor Professional, you’ll be able to customise the plugin’s product element web page templates utilizing Elementor’s Theme Builder function.

1. Create your template

Start by creating your customized template by going to Templates - Theme Builder

From there, click on “Add new” to create the brand new template:

Select Single Submit because the template sort, and provides it a reputation like “ShopWP Single Product”.

2. Design your structure

As soon as the Elementor Library hundreds, you’ll be able to select your personal pre-made structure or begin from scratch. Each choices will work. At this level, you’ll be able to start creating your customized product structure.

The ShopWP Elementor extension supplies devoted widgets that can be utilized in any Elementor structure. You’ll use these widgets to tug within the needed product data. Because you’re making a Single Submit template, the product data can be dynamic relying on which product single web page you’re viewing.

To search out the ShopWP Widgets, scroll to the underside of the Elementor editor panel:

For the aim of this information and ease, we’ll create a two column structure with the product picture and title aspect by aspect.

First, we’ll add the native Elementor “Interior Part” widget to create the row. This may enable us so as to add our widgets.

Then we’ll add the ShopWP Product Photographs widget to the left column:

And the Product Title widget to the best column:

3. Preview your adjustments

With a purpose to preview your structure throughout totally different merchandise, you’ll be able to click on the “Settings” icon towards the underside of the editor panel. You’ll be able to find this by discovering the “gear” icon.

As soon as loaded, open the Preview Settings part and set the “Preview Dynamic Content material as” to Product. From there, it’s best to see a listing of your merchandise.

You’ll be able to choose any product from this record and watch the info dynamically change inside your Elementor structure. This may assist you numerous throughout your design course of.

4. Finalizing the template

Earlier than you should utilize your template you’ll must configure the “show situations”. This mainly tells Elementor when to make use of the template. To configure this, click on the arrow subsequent to the inexperienced Publish button contained in the editor panel:

From there, click on the “Add situation” button:

Then ensure to decide on Merchandise All . Your show situation ought to appear to be the under screenshot:

4. Including the Elementor shortcode

The ultimate piece wanted to make the Elementor template work, is so as to add the Elementor shortcode to the ShopWP Merchandise template file.

To perform this you’ll must do two issues:

• Discover the Elementor shortcode
• Override the ShopWP Merchandise Single template

You will discover the shortcode by going again to Templates - Theme Builder .

On this web page, the shortcode itself might be discovered on the best hand aspect beneath the “Shortcode” column.

To override the ShopWP Merchandise Single template, you’ll must create a folder inside your WordPress theme known as wps-templates. Inside that folder, create a file known as: products-single.php . For a full information on easy methods to override the plugin templates, see our Template Overiding information.

After getting your products-single.php file created, open the file and duplicate / paste the under code inside:

<?php

outlined('ABSPATH') ?: die();

get_header('wpshopify');

?>

<part class="wpshopify-container">
   <?php echo do_shortcode('[shortcode goes here]'); ?>
</part>

<?php get_footer('wpshopify');

Now take the Elementor shortcode and duplicate / paste it into the products-single.php template file changing the “[shortcode goes here]” textual content. Whenever you’re completed, it ought to look one thing like this:

<?php

outlined('ABSPATH') ?: die();

get_header('wpshopify');

?>

<part class="wpshopify-container">
   <?php echo do_shortcode('[elementor-template id="1022181"]'); ?>
</part>

<?php get_footer('wpshopify');

That’s it! Your customized Elementor template ought to now work for all ShopWP Merchandise.

,