New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Edit shop page with elementor #1213

rifleby opened this Issue Jan 25, 2017 · 10 comments


None yet
8 participants

rifleby commented Jan 25, 2017

Hello ! i’m trying to add some stuff at the end of the shop page with elementor but I get the ( no the_content ) Ive try to add that on the archive-product.php at the end before the get-footer. It kinda worked because after that I was able to use elementor in the shop page but something weirds happens, Nothing appear of what I created in the shop page, BUT it appears in my 1rst product page in description.. I’m also redirected to that 1rst product page when I click the ( view page ) in elementor.

Please help me !! 😀


This comment has been minimized.


pingram3541 commented Feb 8, 2017

The shop page is essentially hijacked by WooCommerce and the normal page loop is completely bypassed. This is what makes it difficult to do anything in Elementor on this page.

The reason you see your Elementor content in the Description tab of individual product pages is because the default WC template uses the_content specifically for that tab.

If you have ePro you can use sidebars above and below the shop page (if your theme or template file provides them) to place Elementor widgets which can include any Elementor widget, an entire Elementor section, an entire Elementor page template and/or global Elementor elements.

Additionally ePro provides a WC widget of which you can build out your own shop page grid and link to that in your menu vs the defined shop page that WC uses (the page still exists but is not used). This is a small challenge in that you'll also likely need to add custom hooks in your child theme to address the various links back the shop page, i.e. from checkout, cart, post-checkout, etc. so they link to your custom Elementor built shop page vs the one WC has defined (remember, it is there but unused).

I've done this a few times but you have to search up the hooks to filter those urls and I don't remember specifically what they all are but can be found fairly easily in the WC documentation.

Sometimes it's easier and acceptable to just leave the basic shop page links alone knowing people will only land there in these circumstances but have the custom shop page in all the other linked areas on your site such as the main menu, CTA banners, etc. If they do land there, it still provides the product grid so maybe name that page "shop-catalog" and use "shop" for your custom one.


This comment has been minimized.


arielk commented Feb 19, 2017

Thanks @pingram3541 for amazing comment! I could not explain it better. In any case it's something we're working on for the next versions :)

@arielk arielk closed this Feb 19, 2017


This comment has been minimized.

JoelEadeDesign commented Nov 10, 2017

This isn't an ideal solution but I've found if you're using Elementor Pro you can create a template in My Library, include the WooCommerce Checkout shortcode [woocommerce_checkout], then paste the template's shortcode into the Checkout page. This means you don't have to worry about hooks to change the Return to shop URL. Still hacky but a simpler hack than the alternative.


This comment has been minimized.

mhmdFawzy commented Dec 22, 2017

can you send me a tutorial about the way or the exact steps to do? i am using generatepress theme


This comment has been minimized.

CHEBELEU commented Aug 4, 2018

Hi, Can you tell me/show/send a tutorial about you did that @JoelEadeDesign @mhmdFawzy ?

Thank You.
Or comment here, ore something :D


This comment has been minimized.

JoelEadeDesign commented Aug 4, 2018

Sure thing, @CHEBELEU. Sorry for not replying, @mhmdFawzy! I must have missed the notification.


This comment has been minimized.

CHEBELEU commented Aug 4, 2018

Thax a lot. I will wait for the tutorial/post about how to do that.
If you send it by email you can send it here ...or in the comments.



This comment has been minimized.

JoelEadeDesign commented Aug 11, 2018

Hi @CHEBELEU @mhmdFawzy. Here's a video walk-through on using Elementor Pro with WooCommerce Checkout:

FYI, you can achieve the same with the free version of Elementor by using the [woocommerce_checkout] shortcode rather than the Elementor WooCommerce Pages widget.


This comment has been minimized.

DeanE1 commented Aug 29, 2018

An easier alternative if using the Astra theme (may work for other themes):

  1. Create a template with Elementor to display exactly how you want your shop page to display, use dynamic content option to show updates without always having to edit the theme.

  2. Go to wordpress "theme customization" -> Homepage Settings -> select 'a static page' under "your homepage displays" -> select your template you created with elementor and select a secondary page to display your posts.

I don't believe the posts page is as important if you don't plan to link to it, I'm not sure how woocommerce links to this.

Now you have your elementor designed layout showing as your main shop page and you don't have to mess with hooks/links etc from the checkout page.


This comment has been minimized.

mnc12004 commented Oct 3, 2018

Hey Guys,
I need to modify the Shop page itself. Unfortunately, the customer uses a textured background image and it makes it difficult to see the shop contents.
I can edit checkout and cart pages in eEementor and style the background to a nice dark transparent panel, but I can't do the same with the Shop page.

Any ideas please?


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment