Why is Elementor Not Suited for Woocommerce Shop Designs?

Spoiler alert – The two “nails in the coffin” with respect to Elementor not being compatible with Woocommerce are:

 

Why you can’t use Elementor to create Woocommerce categories

 

From Elementor support

 

What the other support teams were saying is essentially right.

The plugin (Elementor pro) won’t recognize it as an endpoint because it isn’t actually an archive page generated by WooCommerce (or WordPress for blog posts).

The plugin searches for archive and single pages (whether blog or product) and adds them to the breadcrumbs.

Standalone pages aren’t added since that’s not a part of what the plugin looks for.

In order for this to be recognized, you’ll have to create actual categories in WooCommerce (since you’re working with products) and create a template to display these within Elementor and that will ensure that the pages get picked up but look the way you want them to at the same time.

 

It is also not possible to use Elementor for WooCommerce search as it can not produce a site search results page

 

Why you can’t use Elementor to create a header product search widget.

 

Mitch Rezman – [email protected]

To Elementor support

Subject – deficiency in WooCommerce product search

 

Is there a search box for Elementor that will bring up a results page with 24 – 36 woo commerce products?

Currently, Elementor can only search WordPress from what I can see.

Elementor search widget uses the default WordPress search functionality and it will search for everything that is included in the WordPress search.

 

Aleksandar from Elementor <[email protected]>

 

You can control what is included in a few different ways:

  1. Use custom PHP function to add custom post types to the WordPress search:

<?php

add_filter( ‘pre_get_posts’, ‘tgm_io_cpt_search’ );

/**

 * This function modifies the main WordPress query to include an array of 

 * post types instead of the default ‘post’ post type.

 *

 * @param object $query  The original query.

 * @return object $query The amended query.

 */

function tgm_io_cpt_search( $query ) {

    if ( $query->is_search ) {

$query->set( ‘post_type’, array( ‘post’, ‘movies’, ‘products’, ‘portfolio’ ) );

    }

    

    return $query;

    

}

 

You can add this code to your theme functions.php file

 

  1. Use a third-party plugin to customize search results on your site. We don’t have any plugin’s recommendation, but you can find it in the WordPress repository.

 

I hope this helps.

 

Please let us know if either it helps or if you have other questions.

Thanks,

 

 

Mitch Rezman

 

thank you for that Aleksandar, but I do not want to search posts – I want to search woocommerce products – how do I search for WooCommerce products using an Elementor search widget?

 

 

Aleksandar replied from Elementor

 

Hi Mitch.

 

Thank you for the update.

 

I am afraid this advanced search feature is not possible with Elementor at the moment.

 

You may need a third-party plugin to achieve this.

 

Generally, we don’t provide third-party plugins/add-ons recommendations, as they may not work as expected.

I would advise you to join our Facebook community and check with our users there which third party plugins or addons that they use for this purpose.

 

Best Regards,

 

Elementor Technical Support

 

Start blog post

 

In the face of it, Elementor is amazing.

 

“If I had asked people what they wanted, they would have said faster horses.”

Henry Ford

 

Elementor allowed me to do a complicated page design without having the need to hardcode.

 

It writes CSS pages like a symphony, I fell in love.

 

I spent many months getting to the point when I was ready to once again rebuild WindyCityParrot.com and I set up a live site because you can’t get a mirror site these days and I don’t believe in staging sites for reasons too numerous to ponder in this post.

 

There is much talk about “wire-framing” at the core of a good site design best practices mandate that’s where you should start.

I start with taxonomy.

Editors note these remarks are specifically relating to e-commerce and not general blogging Endnote

 

Up until we built the current Https://WindyCityParrot.com which now exists on the Zen cart platform, I had laid digital duct tape across categories for five redesigns.

 

It took me three months to delete more than 1000 categories and still ending up with about 600.

Why so many categories?

I don’t believe in variations.

I think they complicate both the end-user experience and inventory programs.

 

My answer is to build micro categories so instead of one listing with the drop-down five colors of that product, I build a micro category with five listings one for each color of the product.

 

Less chance of errors with end-users

 

In my current Woo-commerce build we are illuminating even more categories but will probably be adding back in the micro categories which I want to deploy post-launch.

 

I thought this would be a good time to have Elementor really make our taxonomy shine.

 

Like I’ve said often “Murphy was highly optimistic.”

 

The first problem is breadcrumbs which took a long time to figure out.

 

The problem is that the main developers involved in Woo-commerce breadcrumbs never spoke to any of the third-party app developers – no surprise.

 

Yoast for SEO and breadcrumbs, BrainstormForce, the developers for the Astra (pro) theme and of course Elementor.

 

I started building parent category pages with the care and dexterity of Michelangelo when he painted the Sistine Chapel.

 

Not knowing which breadcrumb widget to use within Elementor I added all three that were offered knowing I could delete the other two.

 

If you don’t know what breadcrumbs are in e-commerce, you are about to learn because this was a rude awakening.

 

Then in your search result template for your Product archive, you will use the “Product Search” widget which returns the search results for WooCommerce products only.

But note that this widget is not an Elementor Widget but WooCommerce’s default product search widget which you can also find in your WordPress Dashboard by going to “Appearance” > “Widgets”.

 

This is how breadcrumbs are supposed to work

 

 

My first thought was to say “sure I can make this work by creating all of the subcategory pages and all of the product pages in Elementor”.

 

The two most glaring drawbacks to that would be creating a parallel universe of category and product pages then relying on the Google spider (Elementor) canonical’s and ignore the Woo commerce store breadcrumbs.

I would somehow have to create an SEO strategy in place, something no one I’ve spoken to could offer advice on.

 

One step forward and two steps back.

 

I started building all the categories within Woo-commerce and hand weaving on-page SEO while I go.

The deal breaker was the lack of product site search for Elementor

 

When you enter a term on Windy City parrot.com for a product it will return a list of products on a site search results page.

 

FYI we use open source solr for site search which we paid a one-time installation fee for.

 

https://mywordpresstest.center/ “where we blow sh*t up” is a clone of https://www.birdandparrot.info/, Windy City parrot.com dev site

 

When you enter a term on mywordpresstest.center/ for a product it will return a list of products on a site search results page.

 

When you enter a term on https://www.birdandparrot.info/ for a product it will return a list of products but treat them like blog posts.

This is because Elementor does not have a search widget that can access the Woo commerce product database, making Elementor but useless to rely on for a sort of user experience on an e-commerce site.

 

 

In conclusion

 

Elementor has its place in e-commerce for landing pages informational pages.

 

I’ll probably be using it on the new blog to help drive e-commerce traffic from the block which receives 80% of our traffic, to begin with.

 

As for Woo-commerce, Elementor will slow you down without bringing a lot to the table.

 

I’ve included a long list of mind-numbing threads I’ve had with the affirmation developers all having their hands in the production of my website.

 

It’s not a fun read but you will see that I have paid my due diligence and I’ll be building my new header directly in Woo-commerce, hopefully without too much coding. 

 

Have you tried to “deactivate all other plugins” and “switched to a default WP theme”?

Yes, I have

 

Summary

woocommerce breadcrumbs vs elementor breadcrumbs

 

Message

Here’s a parent category page made with elementor

 

https://www.birdandparrot.info/bird-cages/ (Note “Elementor” breadcrumb)

 

Click on any child category

 

Now you are on a “Woocommerce” category page (Note “Woocommerce” breadcrumb)

 

How do I navigate back to any “elementor” category page(s) using woocommerce breadcrumbs?

 

Woocommerce breadcrumbs take you back to woocommerce category pages

 

How do I connect woocommerce to elementor – this can’t be good for SEO

 

thank you

 

(sorry about the white space on cat pages it keeps coming back)

The most visually brilliant website in the world has no value if it can’t be found by people searching on the web or if it is found unless it provides some sort of conversion – what’s the point?

In that Woocommerce cannot associate more than one child category with a parent category is highly restrictive and unusual as e-commerce platforms go.

Thus you must use plug-ins like UE https://uaelementor.com/docs-category/widgets/woo-categories/ to create a robust UX (multi-child categories)

The problem is that clicking on a category takes you back to the Woocommerce product eco system including using WooCommerce breadcrumbs

So now you must add https://uaelementor.com/docs-category/widgets/woo-products/ creating  new page for each child category

 

Yoast allows for meta descriptions on pages and page titles will be meta titles.

For migration purposes, I would have to map category 301’s from the source site to the artificial categories are created with Elementor.

This now creates two parallel universes.

A taxonomy based on Woocommerce

A taxonomy based on Elementor

How good or bad is this for eCommerce SEO?

Elementor breadcrumbs tie the products in the categories together (hopefully)
Should I turn off woo bread crumbs?

Or just hire a good WordPress developer and let him make a hook for multi-child categories.

No SEO impact

Mitch Rezman

 

Now I’m thinking if I just change the woocommerce breadcrumb links to the elementor category page URLs – that would fix this?

 

Остојић Мирослав

The point of SEO is to have your content lined up so google can see it better. So if you are doing the change of the URLs then check if you sitemap also has the same structure, as well as 301 redirects

Mitch Rezman

 

Остојић Мирослав thank you –

I Actually use 6 sitemaps and have 23,000 301’s in htaccess on the old that I’ll cull through pre-migration – all categories have spell checked meta titles and descriptions – have also done the same for my 1150 WP blog posts that I add to weekly ManageLike

Остојић Мирослав

 

Mitch Rezman

Why 6, you only need 1? If you have 6, you will get something that is a silos system.

23K that’s a lot of 301, you should reduce that somehow.

 

Mitch Rezman Now I’m thinking if I just change the woocommerce breadcrumb links to the elementor category page URLs – that would fix this?

Остојић Мирослав

 

The point of SEO is to have your content lined up so google can see it better.

So if you are doing the change of the URLs then check if you sitemap also has the same structure, as well as 301 redirects

 

Mitch Rezman

 

I deal in absolute tested truths, not anecdotal internet gibberish. 

 

If I have a 17-year-old site with 17,000 canonicals – 23,000 301’s are not a lot.

 

In that I teach SEO here in Chicago I will share with you all the sitemaps Yoast advocates and provides – for good reasons

 

sitemap.xml/blog/attachment

sitemap.xml/blog/author

sitemap.xml/blog/post

sitemap.xml/blog/video

sitemap.xml /blog/page-sitemap.xml

 

btw Google doesn’t spider videos without a video sitemap – even youtube videos – I use the video sitemap to leverage SEO all day long

header/footer – https://youtu.be/Tq4AfgD9NM8?t=303

Nested    https://www.youtube.com/watch?v=GFebkLuIh7g

https://wptemplator.com/checkout/?discount=+EARLY100 – cloud e templates

 

Mitch Rezman

CEO/CMO, SuperEZSystems

 

From here down is a collection of mindless threads that led me to my conclusions about Elementor

 

Ian replied (from Elementor)

 

Hi Mitch,

 

Thank you for your response.

I found that your category pages are currently using the theme’s layout and styles.

Category pages are archives and in order to customize these archives, you would need to create and use the Product Archive template and apply the template to the category pages by using Conditions.

Creating a WooCommerce Archive Template with Elementor Pro

Also, the breadcrumbs simply follow the structure of the permalinks so to customize the breadcrumbs, you would need to customize the structure of the permalinks in your WP Dashboard > Settings > Permalinks as shown below.

 

If you have further questions, please do not hesitate to reply.

 

Mitch Rezman sent a message

Bread crumb problem

 

I’m using Yoast (pro) breadcrumbs.

 

A bread crumb is missing in the taxonomy.

 

this is what it looks like

 

https://www.loom.com/share/5b16e20ae96d47f09bcd30586efb5d6b

 

Yoast said it’s a theme issue

 

Astra (pro) said that because https://www.birdandparrot.info/parrot-and-bird-food/ is not a woo category the breadcrumb can’t be produced

 

From Astra support

 

“As you have designed the Nutrition page with Elementor and added an image module to provide a hyperlink to another page, you have added the URL to it.

As it does not have any category in such a case, the Breadcrumb will not work.

See here- https://cl.ly/f398566ad563.”

 

That doesn’t make sense

 

thank you

 

MitchR replies to another elementor support ticket

 

To be clear first, you say “. The plugin searches for archive and single pages (whether blog or product) and adds them to the breadcrumbs.

 

 

Kolahn (from Elementor) replied

 

I will refer this information to my superiors to make them aware of this and hopefully, in the future, a more suitable implementation.

 

Tajay replied fromElementor <[email protected]>

 

Hi Mitch,

 

Thanks for getting back to us here

 

What the other support teams were saying is essentially right.

The plugin won’t recognize it as an endpoint because it isn’t actually an archive page generated by WooCommerce (or WordPress for blog posts).

The plugin searches for archive and single pages (whether blog or product) and adds them to the breadcrumbs. Standalone pages aren’t added since that’s not a part of what the plugin looks for.

In order for this to be recognized, you’ll have to create actual categories in WooCommerce (since you’re working with products) and create a template to display these within Elementor and that will ensure that the pages get picked up but look the way you want them to at the same time.

 

Please feel free to reach out to us if there are any other issues — we’re always happy to help.

 

Best Regards,

 

Elementor Technical Support

 

 

Need a woo commerce search results page

 

Message

I have an elementor header with the search widget but all results show as blog search results – I need an e-commerce search results page

 

Aleksandar from Elementor Technical Support replied

 

Thank you for contacting us.

 

Using the Elementor Search Form Widget which by default uses the WordPress search result function which will automatically display all your content (posts and)

In this case, what you can do is recreate your Archive Template, but this will be for the Product Archive(use the product archive widget).

Guide on creating search result template: https://docs.elementor.com/article/357-customize-the-search-results-archive

Then in your search result template for your Product archive, you will use the “Product Search” widget which returns the search results for WooCommerce products only.

But note that this widget is not an Elementor Widget but WooCommerce’s default product search widget which you can also find in your WordPress Dashboard by going to “Appearance” > “Widgets”.

 

https://docs.woocommerce.com/document/woocommerce-product-search/widgets/

 

So using this within the Search Result Template for the Products would display just your products only.

 

Hope this helped you out, if not please do elaborate more on the issue and send us your admin credentials so we can investigate this issue further.

 

Kind Regards,

 

Mitch Rezman replied

 

To be clear there is no way to display woocommerce product search from an Elementor (widget/element) header?

Current test page using woocommerce search products

 

Tajay replied from Elementor <[email protected]>

 

Tajay replied

Hi Mitch – Thanks for getting back to us here

 

This should be possible once you use the WooCommerce Archive Products (Pro) widget on the Search Results Archive template.

You can also use the WooCommerce Products (Pro) widget (for more customization) and set the Query to Current Query so that the result of the search query is displayed.

Customize the Search Results Archive

Please feel free to reach out to us if there are any other issues — we’re always happy to help.

 

Best Regards,

 

Mitch Rezman – [email protected]

 

Subject – deficiency in woocommerce product search

 

Is there a search box for elementor that will bring up a results page with 24 – 36 woocommerce products?

Currently, elementor can only search WordPress from what I can see.

Elementor search widget uses the default WordPress search functionality and it will search for everything that is included in the WordPress search.

 

 

Aleksandar from Elementor <[email protected]>

 

You can control what is included in a few different ways:

  1. Use custom PHP function to add custom post types to the WordPress search:

<?php

add_filter( ‘pre_get_posts’, ‘tgm_io_cpt_search’ );

/**

 * This function modifies the main WordPress query to include an array of 

 * post types instead of the default ‘post’ post type.

 *

 * @param object $query  The original query.

 * @return object $query The amended query.

 */

function tgm_io_cpt_search( $query ) {

    if ( $query->is_search ) {

$query->set( ‘post_type’, array( ‘post’, ‘movies’, ‘products’, ‘portfolio’ ) );

    }

    

    return $query;

    

}

 

You can add this code to your theme functions.php file

 

  1. Use a third-party plugin to customize search results on your site. We don’t have any plugin’s recommendation, but you can find it in the WordPress repository.

 

I hope this helps.

 

Please let us know if either it helps or if you have other questions.

Thanks,

 

Mitch Rezman

 

thank you for that Aleksandar but I do not want to search posts – I want to search woocommerce products – how do I search for woo commerce products using elementor

 

 

Kai replied from Elementor

 

Hi Mitch.

 

Thank you for the update.

 

I am afraid this advanced search feature is not possible with Elementor at the moment.

You may need a third-party plugin to achieve this.

Generally, we don’t provide third-party plugins/add-ons recommendations, as they may not work as expected.

 

I would advise you to join our Facebook community and check with our users there which third party plugins or addons that they use for this purpose.

 

Best Regards,

 

Elementor Technical Support

 

Breadcrumbs

Brainstorm Force <[email protected]>

Hello Mitch,
This is to let you know that I am working with our team to see where this issue is coming from. 
I would also like to mention that resolving this issue is important to us and we will get back to you with a quick solution.
We’ve spent a few hours investing what could be the reason for this to occur and appreciate your patience and co-operation during this time.
Best Regards, Avinash & Customer Care team Brainstorm Force

 

FYI – I was unable to produce this page format in Woo – so it is being done in Elementor
https://www.birdandparrot.info/parrot-and-bird-food/  because if you click the “By Food Brand” thumbnail you navigate to a category I built with elementor https://www.birdandparrot.info/parrot-and-bird-food-by-brand/ 
but if you click the HARI logo (which I have not remapped yet) you navigate to a woo store category page with a separate set of breadcrumbs  https://www.birdandparrot.info/product-category/food/hari/  
and can not use those woo bread crumbs for returning to the prior Elementor page
thus I am building a “parallel” taxonomy providing much greater design control than “off the shelf” woo offers
Elementor support doesn’t see this as an issue – 

 

It’s an issue

I’ll be writing a chapter on my approach to SEO with this new Frankenstein site after the site goes live under the domain https://WindyCityParrot.com

Hello Mitch,
After debugging your site, I would like to inform you that –

  • As you have set Astra Breadcrumb as None from Astra Customizer. So it is nowhere accessible on your site. See here – https://cl.ly/789e19dc000a
  • Breadcrumb automatically navigates with the category of the post and displays the breadcrumb.
  • Coming to your breadcrumb issue,

 

As you have designed the Nutrition page with Elementor and added an image module to provide a hyperlink to another page, you have added the URL to it.

As it does not have any category in such a case, the Breadcrumb will not work.

See here- https://cl.ly/f398566ad563.

As you will navigate to another page, i.e., Cage page breadcrumb works fine at it has a category for it.

I hope you understand.

If you need anything else we can help you with, write to us.to be clear – “As it does not have any category in such a case, the Breadcrumb will not work.

See here- https://cl.ly/f398566ad563.”

What you are saying is Astra will only work with woocommerce categories – not elementor – not products – not pages – not posts?

 

Astra Breadcrumb works with every aspect, but in the above case, it is not Astra Breadcrumb.

It is Yoast Breadcrumb, which is not detecting your breadcrumb.

(Yoast said it is an Astra (theme) problem).

For more detail about breadcrumb kindly refer to our doc link – https://wpastra.com/docs/add-breadcrumbs-with-astra/.

 

In the above link, you would find how to integrate Astra breadcrumb with a third party plugin.

 

I would suggest you integrate it and try once.

 

I hope, the above information will work for you. Let me know how it goes.

 

Re: breadcrumb question

Hello,

Thank you for getting in touch!
I understood your query.

As of now, we do not handle the breadcrumbs through UAE WooCommerce widgets. 

But, this can be accomplished if we are successful to change the link associated with the particular breadcrumb.

 

Here are some articles that will help you in doing this – 

1) https://docs.woocommerce.com/document/customise-the-woocommerce-breadcrumb/ 2) https://wordpress.stackexchange.com/questions/221369/how-to-change-woocommerce-breadcrumbs-content I hope this helps. Do let us know if you need any other assistance regarding UAE.
Kind regards,Prajakta Suryawanshi + the Brainstorm Force team Ticket ID: 147808P.S: Have feedback for our support team? Please let us know! 

 

<[email protected]> wrote:

 

when i click from an elementor (UE category widget) page to a woocommerce page with products there is a different set of breadcrumbs.

How do I return from a woocommerce page to an elementor page

Screenshot-> https://www.useloom.com/share/8a9f02f96dd14dfaaa7fbdfcf2814376

Purchase key status – This ticket was submitted from – https://uaelementor.com/support/submit-a-ticket/Brainstorm Force powered by Freshdesk 147808:140241

Re: Problems changing spacing

 

Hello,

Thanks for writing in!

I have visited your site and it seems like woocommerce-advanced-categories plugin is applying some padding.

Kindly check this screenshot-https://cl.ly/b6f70ab8d706

Could you please add the following CSS to your customizer under additional CSS tab to resolve your issue.
.woocommerce-advanced-categories-category-background {padding: 0 !important;}
Regarding your second query: change the woocommerce bread crumb fonts  –> Regretfully we have not given any option to change the breadcrumb font.

I hope that helps.

Regards, Samrudddhi

 

<[email protected]> wrote: I would like to reduce white space under the header and change the woocommerce bread crumb fonts but the site is not respecting settings from this kb-> https://wpastra.com/docs/container-spacing-controls/

screenshot of the issue -> https://www.screencast.com/t/M7MnbFjaNd
thank you

Purchase key status – This ticket was submitted from – https://wpastra.com/support/submit-a-ticket/Brainstorm Force powered by Freshdesk 126960:140241

I asked this question of Yoast

this page was built with the UEA (Elementor) category widget
https://www.birdandparrot.info/parrot-and-bird-food/

note Elementor breadcrumb

If you click on the 1st category in the second row you end up on this page
https://www.birdandparrot.info/product-category/food/hari/

Note Woo breadcrumb – leaving no (good) way for returning to the prior category

My solution is to build all the child category pages with UEA elementor product widget seen here
https://www.birdandparrot.info/dishes/
The problem is the second set of breadcrumbs and no sitemap for all the elementor pages

Reading in Facebook elementor groups, these beautiful Elementor websites are tanking in search days after deployment.

I know why (see above)
but not how to create an SEO plan for this second set of Elementor pages

Has anyone worked this out yet?

thank you

Here’s the answer from Yoast indicating I’m right

Hi Mitch,
Thanks for the email!

We do not have any kind of specific guidelines for how to best Optimize Elementor pages.

We can only confirm that Yoast outputs sitemaps here: https://www.birdandparrot.info/sitemap_index.xml.

We can also say that Yoast offers its own set of breadcrumbs. These are more customizable.

To get the Yoast SEO Breadcrumbs we ask the following

  • 1. Reach out to your theme developer and ask if WordPress breadcrumbs have been included. WordPress breadcrumbs are not native to WordPress themes and need to be added in by a theme developer.
  • 2. If they have been, you will then need to implement Yoast SEO Breadcrumbs. You will need to place a special code in a PHP file.
  • Most often this is your `single.php` or `page.php`: This guide explains more: http://kb.yoast.com/article/245-implement-wordpress-seo-breadcrumbs
  • 3. Then activate the breadcrumbs by going to SEO->Search Appearance->Breadcrumbs->Enable

 

Unfortunately, we are unable to add them for you. There’s a difference between the support we can offer and the level of programming needed to change (core) features of our plugin. Since we don’t want to take the risk that we break your website by suggesting incorrect or incomplete code, we cannot advise you on how to make such changes.

 

However, we do suggest the following:

 

 

Finally, Yoast should be showing a meta box on the backend of each page.

 

This meta box outputs colored warnings for the readability and focus keywords.

 

We suggest resolving the warnings that Yoast is outputting.

 

This guide explains more: https://yoast.com/use-content-analysis-yoast-seo/. Note, that Yoast has some difficulty parsing page builder modules such as the kind Elementor uses.

 

You may need to manually check the warnings if you suspect something is off.

Please let us know if you have any more questions. 

Hello,

 

from an elementor (UE category widget) page to a woocommerce page with products there is a different set of breadcrumbs.

 

How do I return from a woocommerce page to an elementor page
Screenshot-> https://www.useloom.com/share/8a9f02f96dd14dfaaa7fbdfcf2814376

Purchase key status – This ticket was submitted from – https://uaelementor.com/support/submit-a-ticket/Brainstorm Force powered by Freshdesk 147808:140241

https://davidnash.com.au/woocommerce-breadcrumbs/ 

https://wordpress.stackexchange.com/questions/221369/how-to-change-woocommerce-breadcrumbs-content 

https://stackoverflow.com/questions/48886118/customizing-product-categories-breadcrumb-links-in-woocommerce-via-the-theme 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.