Website Tech

Tag: WooCommerce templates

  • 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.