WooCommerce Hooks & Filters

WooCommerce hooks and filters are powerful tools that allow you to insert or modify content on your store without editing core files. In the Woomen theme, we use hooks to give you complete flexibility in placing elements like countdown timers, size guides, and “frequently bought together” sections.

What Are Hooks in WooCommerce?

• Hooks are specific points in your store layout where you can add custom content or functionality.

• Actions let you insert something new (for example, a size guide button under the “Add to Cart” button).

• Filters let you modify existing content (for example, changing the text of the “Add to Cart” button).

The Woomen theme makes this process simple by giving you pre-configured options directly in the WordPress dashboard.

Step 1: Enable Elements from the Dashboard

1. Go to your WordPress Dashboard.

2. Navigate to WooMerchant > Settings.

3. Here you will find toggles to enable different features such as:

   • Enable Sale End Countdown: Displays a countdown timer for sale products.

   • Enable Size Guide Button: Shows a button that links to your product size guide.

   • Enable Frequently Bought Together: Displays recommended products on the product detail page.

When you enable these features, the system activates a WooCommerce hook in the background.

Step 2: Display Hooks in Elementor Using “Do Action”

On the frontend, the Woomen theme includes an Elementor widget called Do Action. This widget allows you to place hook-based elements exactly where you want them.

1. Edit your product detail page with Elementor.

2. Drag and drop the Do Action widget into your desired section.

3. In the widget settings, choose the same hook name you enabled in the backend.

   • For example, if you enabled Sale End Countdown in WooMerchant, select that hook in the Do Action widget.

4. Elementor will now fetch and display the correct element at that location.

Example

• From the Dashboard, enable Size Guide Button.

• Edit the product page with Elementor.

• Drag in the Do Action widget below the Add to Cart button.

• Choose the Size Guide Button hook in Elementor to match the setting you selected in WordPress Dashboard > WooMerchant > Size Guide, for example, “Before Single Product.”

• The size guide button now appears on the frontend exactly where you placed the widget.

Why This is Useful

• Flexibility: You decide where each element appears, instead of being restricted to a fixed location.

• No coding required: The Woomen theme handles the technical side of hooks, you just toggle settings and place widgets.

• Full control: You can enable or disable features individually from the dashboard without editing templates.