Website Tech

Tag: Block Editor 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.

  • Make Your Own Page Header and Page Footer, for your Entire Site, in Elementor free version

    Normally, you have to pay for Elementor Pro to edit templates for your site.

    Yes, the simplest solution is pay a little money for Elementor Pro. You will likely find that Elementor Pro is worth the money.

    What if you Don’t Want Elementor Pro?

    If you don’t want to purchase Elementor Pro, then the Ultimate Addons for Elementor Lite by Brainstorm Force is a free plugin.

    All of Brainstorm Force’s plugins that I’ve tried focus on minimal overhead for your site, and your PageSpeed scores. Using the Block Editor with Spectra (another free plugin by Brainstorm Force, Spectra – WordPress Gutenberg Blocks ) is faster than Elementor will ever be; using UAE and Elementor will be faster than using Elementor and Elementor Pro, without some of the features of Elementor Pro.

    How Do you Make a New Header or Footer?

    One thing Ultimate Addons for Elementor Lite has is an “Elementor Header & Footer Builder”. In UAE in the WordPress left menu, you pick “Header & Footer Builder”. Click “Add New”, then select the type of template you want, either “Header” or “Footer”.

    It opens up for you to edit in Elementor. Make it look how you want, and Publish.

    Apply This Header and Footer to your Site Templates

    In Site Editor, Templates there is one template named Index, “Used as a fallback template for all pages when a more specific template is not defined.”

    In that fallback template for the Block Editor, edit the Header element to include a Shortcode Block with the Shortcode from UAE. Most likely you will only have that shortcode (do all editing in Elementor). Do the equivalent for the footer.

    If Index is set to “All Pages”, the Home Page Template should Not have anything in its Header or Footer section.

    You probably want that. If you want the Home page to have a different header or footer, exclude it from the Index template.

    Single Posts Template: nothing in header or footer areas, let Index take care of that.
    All Archives: nothing in header or footer areas, let Index take care of that.
    etc.

    Tip: You want the theme to control all layouts for all pages and posts and WooCommerce, etc. You can make exceptions, but set the defaults that way.

    Have Elementor Use the Theme’s Templates

    In Elementor’s Settings, set “Page Layout: Default” to use the theme’s layout.