Troubleshooting WooCommerce Elementor Templates

This is using a “Classic Theme”, Astra. The details for a “Block Theme”, such as TwentyTwentyFive, will be different.

When you are piecing together the template puzzle, with pieces from your Theme, from Elementor, and from WooCommerce, it’s common to have a mix of Theme and Elementor template configurations. Let’s focus on troubleshooting the WooCommerce main store page (/shop).

Understanding Template Hierarchy and WooCommerce:

WordPress (and WooCommerce) uses a template hierarchy to determine which template file to use for displaying a page. Here’s a simplified overview:

1. Specific Templates:
   • WooCommerce has specific templates like archive-product.php (for the shop and product category pages) and single-product.php.
   • Elementor Pro Theme Builder templates, if conditions match, override theme templates.
2. Generic Archive Templates:
   • If a specific WooCommerce template isn’t found, WordPress falls back to generic archive templates like archive.php or index.php.
3. Page Templates:
   • For standard pages, page-{slug}.php (e.g., page-shop.php) or page.php are used.

Troubleshooting Steps:

1. Elementor Pro Theme Builder:
   • Check Archive Templates: Go to Templates > Theme Builder in your WordPress dashboard.
   • Display Conditions: Carefully examine your archive templates. Ensure that the “Display Conditions” include the “Shop Page” (or “Product Archive”).
   • Template Conflicts: If you have multiple archive templates, try temporarily disabling them one by one to see if one is causing a conflict.
2. WooCommerce Status:
   • Go to WooCommerce > Status.
   • Template Overrides: Look for the “Template Overrides” section. This will show you if any WooCommerce templates are being overridden by your theme.
   • System Status: Check for any warnings or errors that might indicate a problem.
3. Astra Customizer (WooCommerce):
   • Go to Appearance > Customize > WooCommerce > Product Catalog.
   • Shop Layout: Review the settings here. Ensure that the layout is configured correctly.
   • Archive Settings: Review the general Archive settings in the customizer.
4. Template File Check:
   • archive-product.php: Check your Astra theme (or child theme) folder for the archive-product.php file. If it exists, it’s likely controlling the shop page.
   • If you are using a child theme, make sure that the archive-product.php file is not in your child theme, unless you intend to override the parent theme’s file.
   • page-shop.php: If you created a page with the slug “shop,” check for a page-shop.php file.
5. Elementor Debugger:
   • Use the Elementor Debugger to see which template files are being loaded.
   • This will show you the exact template that is being used, and the order in which the templates were looked for.
6. “Shop” Page Settings:
   • Go to Pages > Shop.
   • Page Attributes: Check the “Page Attributes” section. Make sure that the correct template is selected (if applicable).
   • Content: Temporarily add some basic text to the page content. This will help you determine if the page content is being displayed at all.
7. Permalink Structure:
   • Go to Settings > Permalinks.
   • Ensure that your permalink structure is correct. Incorrect permalinks can sometimes cause template issues.
8. WooCommerce Settings (Shop Page):
   • Go to WooCommerce > Settings > Products > Display.
   • Shop Page: Verify that the correct page is selected as your “Shop Page.”

Order of Template Loading:

• Elementor Pro Theme Builder (If Conditions Match):
• WooCommerce Specific Templates (archive-product.php):
• Theme Archive Templates (archive.php, index.php):
• Page Templates (page-shop.php, page.php):

Your Idea About “/shop”:

• Specifying “/shop” in Astra might help, but it’s more likely a template issue.
• The WooCommerce shop page is typically controlled by archive-product.php or Elementor’s archive templates.
• The WooCommerce shop page is not a typical page, it is a product archive page.

Key Takeaways:

• Focus on Elementor Pro’s archive templates and WooCommerce’s template hierarchy.
• Use the Elementor Debugger and WooCommerce Status to get detailed information.
• Check for conflicting templates and ensure that the correct shop page is selected in WooCommerce settings.