When creating custom shop or product page layouts, you often remove all default WooCommerce elements to design only the sections you need. While this gives you full control over the page layout, it also removes the standard WooCommerce PHP hooks, which some 3rd-party plugins rely on to display their content.
To maintain plugin compatibility, Omniverse provides a WooCommerce Hook element.
How It Works #
Step 1: Identify Missing Functionality #
If a 3rd-party plugin feature is missing on a custom layout (e.g., extra product fields), you need to identify which WooCommerce hook the plugin uses. You can check this in the plugin’s documentation or contact their support.
Step 2: Add the Hook Element #
- Edit your custom layout in Elementor or WPBakery.
- Insert the WooCommerce Hook element where the plugin content should appear.
- Select the appropriate hook name (e.g.,
woocommerce_before_single_product).
Example: Extra Product Options for WooCommerce #
- The plugin adds custom fields like text boxes, checkboxes, and file uploads.
- On a standard product page, these fields appear automatically.
- On a custom single product layout, the fields disappear because the plugin relies on the
woocommerce_before_single_producthook. - Adding the WooCommerce Hook element with this hook restores the plugin content in your custom layout.
Step 3: Clean Actions (Optional) #
The Clean Actions option removes all default WooCommerce elements hooked to that location.
- Useful for fully custom layouts
- Default WooCommerce elements can be added back using individual widgets if needed
- Hooks should primarily be used to ensure 3rd-party plugin compatibility or to insert custom PHP functionality
Notes #
- The same approach works for cart, checkout, and product archive pages
- Always verify the plugin’s hook to ensure the content appears correctly in your custom layout
- Using hooks ensures your custom design remains compatible with WooCommerce plugins without unnecessary default elements
