What is hook(hook)?
Hook is the official foreign term, we are called hook in China, you can simply understand hook as some functional functions of WordPress, through them you can achieve some specific functions very simply and quickly, very convenient.
WordPress website page is combined by different hooks, just like building a block castle. The top part of the page is placed with header hooks to show the header; the bottom part is placed with footer hooks to show the footer; the body is placed with content hooks to show the content and so on.
Why is it called a hook? Because it's like a hook, short and bound to a fixed content/function at the same time. The content/functionality of the page can be easily modified by hook.
What does hook(hook) do?
If we want to modify the content of the page, the conventional practice is to modify the page template. Directly modifying the template is a bit troublesome, and the code will revert to its original form after updating the version. So we need a more convenient and efficient way to modify, so hook (hook) was born.
The role of Hook is to allow us to quickly modify specific content on specific pages, such as adding content (e.g. adding an inquiry button to a product detail page), removing content (e.g. removing the breadcrumb path at the top of the page), modifying content (e.g. changing the name of the Add to Cart button from Add to cart to Inquiry), etc.
Hook insertion position: EnterAppearance>Theme Editor>Click on the rightfunctions.phpThe hook code can be saved at the bottom to take effect. The following is our collection of the more practical hook usage for foreign trade sites.
How do I change the position of the inserted content?
The following code for inserting content only demonstrates the insertion of a location, what if you want to change the insertion location? For example, one of the codes below is inserting SEO copy at the bottom of the product listing page, what if you want to insert SEO copy at the top of the listing page or at a certain location on the product detail page?
Many hooks are only available inSpecificpages, theSpecificposition appears. The position of the inserted content can be changed by changing the positioning hooks._action( The hook after it is the positioning hook, and the inserted content will appear after the positioning hook.
For example, the following code has a woocommerce_after_add_to_cart_form hook, which represents the "add to cart" button that only appears on the product detail page and is fixed after the short description. The following code is meant to insert the content after the "add to cart" button.
//Insert Inquiry Now button in the product detail page
add_action( 'woocommerce_after_add_to_cart_form', 'add_enquiry_button_single_product', 30 );
function add_enquiry_button_single_product() {
echo '<div id="enquiry_buttom">';
echo '<a href="#enquiry" rel="tag">';
echo '<button>Enquiry Now</button>';
echo '</a>';
echo '</div>';
}If you want to change the content to be inserted under the product display area of the product listing page, you need to change woocommerce_after_add_to_cart_form to woocommerce_after_shop_loop.
The following links show which hooks are used on some pages and where they are displayed, use these links to know which positioning hook to use.
Visual hooks for product detail pages, , ,Product listing page visual hooks, , ,Woocommerce All Hooks List.
For more pages with hooks please google them yourself. Note: Some themes (e.g. GeneratePress) use their own hooks and do not use regular hooks. In this case, you need to go to the theme's official website and search for "hook" to find the list of hooks used by the theme.
Practical WordPress Hook usage examples.
Here are some examples of common Hook usage that we use ourselves, such as inserting inquiry buttons, inserting forms, inserting ACF custom fields, etc.
Use hook to insert inquiry button on product detail page
You can easily insert inquiry buttons or inquiry forms if you build a product detail page through a page builder like Elementor, but it's very slow. Many people use the product detail page template that comes with the theme to build the detail page, which is much faster, more functional and more beautiful.
However, the theme detail page template only has an add to cart button, but no inquiry button and inquiry form. You can turn the add to cart button into Inquiry button by installing Inquiry plugin, and then click to add the product to the inquiry system and send the inquiry form uniformly. But this kind of plug-in customer experience is not good enough, point a lot of times, and will be slow, not much customizable content, and set up trouble.
In our experience, the best way to insert the inquiry button on the product detail page is through a hook that links to the form by clicking☞ View examplesAdvantages Advantages: 1- Convenient, customers can start filling out the form directly after one click; 2- Fast, the inquiry button and form only load a very small amount of code; 3- High degree of customization, you can customize the appearance, form fields, email templates and content, etc. 4- Good compatibility, compatible with most Captcha plug-ins andSpam comment blocker plugin.
Insert inquiry button method.
EnterAppearance>Theme Editor>Click on the rightfunctions.php 
Copy and paste the code below to the bottom of the page, and click "Update File". If you can't save it, copy and paste it into Notepad (txt) first to remove the formatting, then copy and paste it into functions.php.
You can putEnquiry NowChange it to the desired text. The code below is to put the button under the short product description (clickView illustration), if you want to put it under Meta (clickView illustration) Put the second line ofwoocommerce_after_add_to_cart_formReplace withwoocommerce_share.
//Insert Inquiry Now button in the product detail page
add_action( 'woocommerce_after_add_to_cart_form', 'add_enquiry_button_single_product', 30 );
function add_enquiry_button_single_product() {
echo '<div id="enquiry_buttom">';
echo '<a href="#enquiry" rel="tag">';
echo '<button>Enquiry Now</button>';
echo '</a>';
echo '</div>';
}
Below is the code pasted into functions.php at the bottom The look after.
If the inquiry button doesn't appear after adding the above code, it's probably because you didn't enter the price for your product, so Woocommerce automatically hides the hook woocommerce_after_add_to_cart_form, which causes it not to take effect.
Solution: Add the following code to the above code below, click "Update File". Clear the cache and refresh the page to see, the inquiry should come out.
// Show shopping button for empty price products to create positioning placement inquiry button
add_filter( 'woocommerce_is_purchasable', '__return_true');
At this point the "Add to card" button is also displayed, add the following CSS to Appearance > Customization > Additional CSS / Custom CSS Click Save at the bottom to hide the "Add to card" button.
.entry-summary form.cart, .add_to_cart_button {display: none!important;}
If you want to adjust the appearance and spacing of the inquiry buttons, add the following CSS code to theAppearance>Theme Editor>Additional CSS Click Save at the bottom. You can modify the numbers inside to adjust the value.
The 4 numbers inside the Padding and margin represent the distance between the inner and outer spacing of the button in the top, right, bottom and left directions respectively. 0 is the default minimum distance, the larger the number the larger the distance, adjust it yourself as needed. margin can be entered as a negative number (e.g. -10px), the button will move towards theReverse directionMove. The sixth line of code in the#edb932Is the inquiry button background color code, replace with the desiredColor CodeChange the color (put behind #)
/* Enquiry Now button*/
#enquiry_buttom button{
font-size: 13.5px;
padding: 14px 15px 13px 16px;
margin: 25px 0px 30px 0px;
background-color: #edb932;
}
How does the inquiry button link to the inquiry form (slide down, pop-up)?
If there is no inquiry form on the page, you can use the hook method mentioned below to insert a custom form on the detail page. Just put the #enquiry in the red box in the code above
Change it to the form ID, and the page will automatically slide to the form position when you click the inquiry button. Click on☞ View examples.
We recommend putting the form under the product details description to show up and click the button to slide down to the form location! This has the highest conversion rate!
If you insist on doing a button click to pop up the form see the following tutorial.
If the button is clicked to bring up theFluent Formsform, just put the following short code into the page and a button will appear 
If you click the button, the corresponding form will pop up.
Change the number 3 to the number of the form ID you want to pop-up; Inquiry Now is the text of the button, change it to the content you want; flientfpb is the name of the form.class, by defining this class you can control the size of the button, background color, spacing, etc.
[fluentform_modal form_id="3" btn_text="Enquiry Now" css_class="flientfpb"]
If you want to insert the button into the theme template, go toAppearance>Theme Editor>Click on the rightfunctions.php Copy and paste the following code at the bottom, and click "Update File".
The third line of the code form_id="3" the number 3 to your form ID numbers, "Inquiry Now" is the button text, "productbt3" is the CSS class, can be appropriately modified.
If the button is clicked to bring up theElementorform, you need to first use elementor to create a form popup, trigger method ID there enter #enquiry_buttom can be. Here is a detailed tutorial.
Click on the picture "Add a new template".
Select Popup, give it a name, and tap "Create Template".
Select a Popup template, if your elementor pro is cracked version can not import online templates, you can try to import our own made templates (Click to download(The template can be imported from "elementor".) Please refer to Baidu "elementor how to import template" for the method of importing template.
1- Select/import the template and click on it in numerical order as shown below, drag the global module form created earlier to the right side and set the form as required.
2- Click the gear on the left side of the picture below to enter another setting screen of Popup.
1 there set as shown, 2 there enter #enquiry_buttom (with # number! Click the inquiry button after entering before the form pops up), and finally click 3 to publish.
If the pop-up window does not take effect, you may have used a plugin such as Perfmatters in the details page to disable Ele's JS pop-up code, disable other plug-ins one by one until the problem is solved. Find the right remedy to solve the problem, if you do not understand the message below.
Click on the inquiry button pop-up window is set up here, the style and function of the pop-up window and so on their own use Elementor settings, do not understand then Baidu, online are Elementor tutorials.
Insert custom forms (forms) on product detail pages using hooks (hooks)
The following tutorial shares how to create Elementor (ele for short) global module forms and insert them into product detail pages with form shortcodes and hooks. This method is also applicable to forms created by CF7, Wpforms, Fluent Forms, etc. (with shortcodes on it). Click on☞ View examples.
Replace the eighth line of the following code with [shorcode] Copy the code after replacing it with the short code of the form and enterAppearance>Theme Editor>Click on the rightfunctions.php Paste the copied code at the bottom and click "Update File".
"Quick Contact" is the title text of the form, which can be changed to the desired text content.
Click the "Inquiry Now" button to move the page to the form position. It is not recommended to do pop-up windows, the user experience and conversion rate is not as good as clicking down. And pop-ups involve JS code, which slows down the page loading speed and may be affected by other plug-ins.
If you still insist on doing the click button popup form, please check the "How does the inquiry button link to the inquiry form?".
It is best to put the form under the product details, customers can directly see the form when they slide down to view the product details, the probability of filling it out is greater and easier to fill out, without moving up to the top of the page to click the inquiry button.
If you want to adjust the display size and spacing of the form, add the following CSS code to theAppearance>Theme Editor>Additional CSS Tap Save at the bottom.
@media (min-width: 768px){
/* This is the size of the inquiry form for PC and tablet, 600px left and right*/
div#enquiry {
max-width: 600px;
}
}
/* This is the distance between the inquiry form and the top and bottom sections, change the top and bottom numbers to adjust the distance */
#enquiry{
margin-top: 0px;
margin-bottom: 70px;
margin-top: -30px;
padding-top: 30px;
}
/* This is the font size, thickness, color, and bottom distance settings for the inquiry form title Quick Contact*/
p#form_title{
font-size: 1.5rem;
font-weight: 500;
color: #323232;
margin-bottom: 30px;
}
If you can't read it or there is something wrong with the display/function, please leave a message in the comments below or contact WeChat customer service for help.
Save Elementor forms as global modules
If your form is made by Elementor Pro, it is recommended to save the form as a global module and then insert it into the product details page (using the hook method above) or the contact us page, etc. via short code calls.
The advantage of saving the Ele form as a full module is that it is easy to modify and set, for example, if you want to modify the title or recipient of the site-wide form email content template, you only need to modify the global module of that form.
UseElementor ProEdit the Contact (Contact Us) page, insert a form widget, right click on it to bring up the options, click on "Save as global module".
Save and go to the backend of the site >"Template" > "Save Template"Inside you can see the global module of the form you just saved. Note that there is a Shortcode on the far right, which is the short code of the form, save it and use it later!
You can also see this saved global widget in the Elementor edit screen (tap the 9 square icons in the upper right corner of the image below to expand it).
Now go back to the Contact Elementor edit screen and delete the form you just randomly inserted.
Then click on Elementor in the picture belowGlobal(First, click the 9 square icons in the upper right corner of the figure below), find the saved global module form, left-click and drag it to the right side of the interface at the appropriate location to add the form to the page.
Why do you want to delete the randomly inserted form at the beginning and use the global form instead, don't the 2 look the same and have the same settings? The main reason is to facilitate future modifications. If you use the global module form for the whole site, you only need to modify one form, and the forms in all other positions will follow, which is very convenient.
Here's how to modify the global module form. Use Elementor to edit any page that has a global module form, such as the Contact page mentioned earlier. Click the blue pencil in the upper right corner of the form, the Global Editing section will pop up on the left side, click the green "EDIT" button in step 2 below to enter the global module form editing interface.
Global module form editing interface ↓ , set it according to your needs.
The inquiry form is now complete and recommended for installationContact Form DBPlugin, after the installation of the visitor submitted inquiry form data will be saved in the background, you can view at any time, and there will be a new form submitted after the site will be prompted at the top of the background, very practical!
Insert ACF field SEO copy on product listing pages using hooks (hook)
Website pages are sorted according to SEO weight and effect, from high to low: home page > product list page > article details page > product details page. Home page SEO weight and effect is the best, in order to do a good SEO optimization need to focus on optimizing the home page, product listing page and article page.
To optimize Google SEO, you have to optimize the product listing page! Not only does it have high weight, but it is also very relevant to the main industry keywords! Basically, the main SEO keywords for every industry are the product category words. For example, if we do handbags, handbag, backpack, totobag and other category words are the main keywords.
Product listing page in addition to the product title is not much text content, too few words, too single content can not get good ranking. Only by adding hundreds of thousands of words to optimize SEO, it is possible to get good rankings.
The product listings page created using the theme cannot use plugins like elementor to insert content, the only reliable and convenient way is to useACF Advanced Custom Fields PluginAdd SEO article field in the edit screen of the product listing page and call it in the foreground. Click☞ View examples.
This method can also add other ACF fields to other front-end pages.
First create the field, and then insert it into the product list page editing interface. The specific method Baidu, not detailed here.Field Name(Remember it, it will be used below) must be in full English, select "Visual Editor" as the field type, and insert the position according to the second picture below.
Insert position according to the following figure to select the product category (product_cat) ↓
After creating the field in theEachAn additional visual editor will appear at the bottom of the product listing page edit screen. Just enter SEO content here and save it. You can enter text, images, videos, short codes, etc.
The next step is how to get the entered SEO content to display on the corresponding product listing page page. Go toAppearance>Theme Editor>Click on the rightfunctions.php Go to the code editing screen . Put the fourth line of code below theseoctReplace the field you created above with theField NameThen copy and paste the entire code to the bottom and click "Update File".
After saving the product list page below ↓ will display seo copy content. Add your own CSS to beautify the display effect, do not understand then leave a comment.
Add click to expand and contract the text effect
The above tutorial adds the output SEO text is directly displayed, some people may like the effect that the default text shrinks up and can be expanded by clicking the button as I do in the picture below. It takes up a small area, is more beautiful, clickView examples.
EnterAppearance>Theme Editor>Click on the rightfunctions.php Go to the code editing screen. Copy and paste the following code into the bottom of functions.php and click "Update File".
Load More" in the ninth line and "Hide Text" in the eleventh line are the text of the button in the above figure, which can be changed to the desired text content.
This click to expand/collapse function is implemented in CSS, not JS, so it's very fast. Add the following CSS code to theAppearance>Theme Editor>Additional CSS At the bottom, just tap Save.
in lines 28 and 73 of the codeffd900is the background color code for the 2 buttons in the regular state, and the 64 lines in theedaa00is the background color code of the 2 buttons when the mouse slides over, which can be replaced with the desiredColor CodeChange the color (put behind #)
Line 21 850 is the left and right width of the SEO copy area, which can be increased or decreased according to your needs (the number should be followed by px). If you don't want to limit the width of the SEO text so that it follows the screen width, just delete the 3 lines 20-22.
Some people may be interested in CSS code to achieve the function of expand, contraction, want to know how to achieve, here is a brief description. Expanded, contracted using the ipunt tag radio type radio function: checked this pseudo-class to achieve.
Load More and Hide Text buttons are created by label tags, and the for value of the label is set to the id value of the corresponding ipunt tag to link the two, and the corresponding input will be automatically selected when the label button is clicked. For the sake of aesthetics, we also add hidden to hide the inputs.
First, set the maximum height of the SEO text box to 200px and automatically hide the content when it exceeds it. When you click Load More, the corresponding input will be added to the :checked pseudo-class, and the following CSS code will enable the height of the SEO text box to be set to fit the content height when the Load More button is clicked, without the 200px fixed height limit, all the content will be displayed.
When the Hide Text button is clicked, the :checked pseudo-class of the Load More button is moved to the top of the Hide Text button (the radio radio feature), the CSS style of the Load More button :checked pseudo-class is invalidated, and the maximum height of 200px set before takes effect again, and the content beyond the height is hidden again.
This CSS method can also be used to do slide switching, tab switching, etc. If you are interested, Google or Baidu it for yourself.
Use ACF to add a PDF document download button to the product detail page
Some customers want to put a button in the product details page, click to view / download PDF documents, and each product can be customized documents. First use the ACF plug-in to create a field, type "File", field name in plain English, the return value selected "File URL".
"Location Rules" where set as shown below, we set it to appear on the product details page.
The product upload interface will add a new section to upload files, click "Add File" to upload PDF documents.
What it looks like after uploading the document ↓.
Next you need to add code to make the file download button appear on the front end of the product detail page. Go to "Appearance" > "Theme Editor" > click "functions.php" on the right side to enter the code editing interface.
Replace the fourth line of the code below withpdflinkChange it to the field you created for theNameand the fifth line ofDate SheetIt's the button text, change it to what you want. Then copy and paste the entire code to the bottom of functions.php and click "update file".
If you have other practical WordPress Hook usage to share, please feel free to leave a comment below to contribute, and it will be updated to the above content after adoption.
