What is a hook?
Hook is a foreign official statement, we called hooks, you can simply hook understood as WordPress function function, through them can be very simple, fast to achieve some specific features, very convenient.
WordPress website page is through a combination of different hooks, as if building a building block castle. The top of the page is placed in the header hook to retrieve the display header; the bottom is placed in the footer hook to display the footer; the body is placed in the content hook to display the content and so on.
Why is it called a hook? Because it's like a hook, it's short, and it's bound to fixed content/functionality. The content/functionality of the page can be easily modified through hooks.
What does hook do?
If we want to modify the content of a page, the conventional practice is to modify the page template. Directly modifying the template is a bit of a hassle, and the code will be restored to its original state after updating the version. So we need a more convenient and efficient way to modify , so hook (hook) came into being .
The purpose of a Hook is to allow us to quickly modify specific content on a specific page, such as adding content (e.g., adding an inquiry button to a product detail page), deleting content (e.g., deleting the breadcrumb path at the top of the page), and modifying content (e.g., changing the name of the Add to Cart button from Add to cart to Inquiry), and so on.
Hook insertion location: enterexterior condition>Theme Editor>Click on the right side of thefunctions.php, put the hook code at the bottom point to save to take effect. You can also use theCode Snippets Pro PluginInserted, the effect is better and more stable. The following is our collection, the more practical use of hook for foreign trade station.
How do I change the position of the inserted content?
The following insert content code only demonstrates the insertion of a position, if you want to replace the insertion of the position of how to deal with? For example, one of the following code is to insert SEO copy at the bottom of the product listings page, maybe you want to change the SEO copy to the top of the listings page or the product details page somewhere.
Many hooks are only available inspecialPage,specialThe position appears. The position of the inserted content can be changed by changing the positioning hook._action( The hook that follows is the positioning hook, and the insertion will appear after the positioning hook.
For example, the positioning hook of the following code is woocommerce_after_add_to_cart_form, and this hook represents the "Add to Cart" button, which only appears on the product details page and is fixed to appear after the short description. The following code means to insert the content after the "Add to Cart" button.
//Insert Enquiry Now button in product detail pageadd_action( 'woocommerce_after_add_to_cart_form', 'add_enquiry_button_single_product', 30 );function add_enquiry_button_single_product() {echo '';}Full Selection Codemake a copy of
To change the content to be inserted below the product display area on 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, by which you know which positioning hook to use.
Product detail page visual hooks(math.) genusProduct Listing Page Visual Hooks(math.) genusWoocommerce All Hooks ListThe
For more pages of hooks please do your own Google search. Note: Some themes (e.g.GeneratePress) Use your own hooks, not regular hooks. In this case, you need to go to the official website of the theme documentation, search for "hook" to find the theme hooks.
Practical WordPress Hook Usage Examples:
Here are some examples of common Hook usage that we have used ourselves, such as inserting inquiry buttons, inserting forms, inserting ACF custom fields, etc.
Use hooks to insert inquiry buttons on product detail pages.
If you build a product detail page through a page builder like Elementor, you can easily insert an inquiry button or inquiry form, but the speed is very slow. Many people use the theme comes with a product detail page template to build detail pages, much faster, more functional, more beautiful.
But the theme detail page template only has add to cart button, no inquiry button and inquiry form. You can install the inquiry plugin to turn the add to cart button into an inquiry button, click to add the product to the inquiry system, and then send the inquiry form uniformly. However, this kind of plug-in customer experience is not good enough, need to click a lot of times, and the speed will be slower, customizable content is not much, and the setting is also troublesome.
In our experience, inserting an inquiry button on the product detail page through a hook that links to the form is the best way to click on the☞ View ExampleAdvantages. Advantages: 1- Convenient, customers can start filling out the form directly after one click; 2- Fast, inquiry buttons and forms load very little code; 3- High degree of customization, you can customize the appearance, form fields, email templates and content, etc. 4- Compatibility, compatible with most Captcha plugins andSpam Blocker PluginThe
Insert the inquiry button method:
go intoexterior condition>Theme Editor>Click on the right side of thefunctions.php 
Then copy and paste the following code to the bottom of the page and click "Update File". If you can't save it successfully, copy and paste it into Notepad (txt) first to eliminate 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 below the short description of the product (click on theView Diagram), and if you want to put it under Meta (click theView Diagram) Put the second line of thewoocommerce_after_add_to_cart_formreplace withwoocommerce_shareThe
//Insert Enquiry Now button in product detail pageadd_action( 'woocommerce_after_add_to_cart_form', 'add_enquiry_button_single_product', 30 );function add_enquiry_button_single_product() {echo '';}Full Selection Codemake a copy of
Below is the code pasted into functions.php What it looks like after the bottom.
If the inquiry button doesn't appear after adding the above code, it may be because you didn't enter a 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 and click "Update File". Clear the cache and refresh the page, the inquiry should come out.
//Display shopping buttons for empty priced products to create positioning for placement of inquiry buttons.add_filter( 'woocommerce_is_purchasable', '__return_true');Full Selection Codemake a copy of
At this point the "Add to card" button is also displayed, add the following CSS to the exterior condition > customizable > Extra CSS / Custom CSS Tap Save at the bottom to hide the "Add to card" button.
.entry-summary form.cart, .add_to_cart_button {display: none!important;}Full Selection Codemake a copy of
If you want to adjust the appearance and spacing of the inquiry buttons, add the following CSS code to theexterior condition>Theme Editor>Additional CSS Tap Save at the bottom. You can modify the number inside to adjust the value.
The four numbers in Padding and margin represent the distance between the inside and outside of the button in four directions: up, right, down and left. 0 is the default minimum distance, the larger the number the larger the distance, so you can adjust the distance according to your needs.opposite directionMove. The sixth line of code in the#edb932is the background color code of the inquiry button, replace it with the preferred onecolor 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;}Full Selection Codemake a copy of
How does the inquiry button link to the inquiry form (slide down, popup)?
If the page doesn't have an inquiry form, you can use the hook method mentioned below to insert a custom form on the detail page. Just put #enquiry in the red box in the above code
Change it to the ID of the form, and the page will automatically slide to the form location when you click the inquiry button. Click the☞ View ExampleThe
We recommend putting the form on display below the product detail description and clicking the button to slide down to the form location! This has the highest conversion rate!
If you insist on doing the click button popup form see the tutorial below:
If clicking the button brings up theFluent Formsform, just put the following short code into the page and a button will appear 
, clicking on the button will bring up the corresponding form.
Change the number 3 to the ID number of the form you want to pop-up; Enquiry Now is the text of the button, change it to what you want; flientfpb is the .class name of the form, by defining this class you can control the button size, background color, spacing and so on.
If you want to insert the button into the theme template, go to theexterior condition>Theme Editor>Click on the right side of thefunctions.php Copy and paste the following code to the bottom of the page and click "Update File".
The third line of code form_ the number 3 to your form ID number, "Enquiry Now" is the button text, "productbt3" is the CSS class, you can modify the appropriate.
This content is viewed at a price of29Yuan (free for VIP), please firstlog inView/download the appropriate paid content after purchase
If clicking the button brings up theElementorForms, you need to first use elementor to create a form popup, trigger method ID there enter #enquiry_buttom can be. Here is the detailed tutorial.
Click on "Add new template".
Select Popup, make a name for it, tap "Creating Templates".
Select a Popup template, if your elementor pro is cracked version can not import online templates, you can try to import our own template (Click to download). For the method of importing templates, please refer to "How to Import Templates in Elementor" in Baidu.
1- After selecting/importing the template and clicking on it in numerical order as shown below, drag and drop the global module form created earlier to the right side and set up the form as required.
2- Click on the gear on the left side of the picture below to enter another setting interface of Popup.
1 there set up according to the picture, 2 there enter #enquiry_buttom (with # number! After inputting it, click the inquiry button before the form pops up), and finally click 3 to publish.
If the pop-up window does not take effect, you may have used Perfmatters and other plug-ins in the details page to disable Ele's JS pop-up code, one by one to disable other plug-ins until the problem is solved. Find the problem after the right medicine to solve the problem, do not understand if you leave a message below.
Click on the inquiry button pop-up window to this setup is complete, pop-up window style and functionality and so on their own use of Elementor settings, do not know if Baidu, the Internet are Elementor tutorials.
Using hooks (hook) in the product details page to insert custom forms (form)
The following tutorial shares how to create Elementor (ele for short) global module form and insert it into the product detail page via form shortcode and hook. This method also applies to forms created in CF7, Wpforms, Fluent Forms, etc. (with shortcode). Click☞ View ExampleThe
Put the following code in the eighth line of the [shorcode] Replace the short code with the form's short code and then copy the code and go to theexterior condition>Theme Editor>Click on the right side of thefunctions.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.
This content is viewed at a price of29Yuan (free for VIP), please firstlog inView/download the appropriate paid content after purchase
This is the end of the inquiry button and form, click the "Enquiry Now" button page will move to the form position. It is not recommended to do pop-up window, user experience and conversion rate is not as good as clicking down. Moreover, the pop-up window involves JS code, which slows down the page loading speed, and may be affected by other plug-ins.
If it still insists on being a click button popup form, check out the above "How does the inquiry button link to the inquiry form?".
Put the form below the product details is the best, the customer slides down to view the product details can directly see the form, fill in the probability of a larger point is also convenient to fill in, do not need to move 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 theexterior condition>Theme Editor>Additional CSS Tap Save at the bottom.
@media (min-width: 768px){/* This is the size of the computer and tablet inquiry form display, left and right 600px */div#enquiry {max-width: 600px;}}/* This is the distance between the inquiry form and the upper and lower 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 distance from the bottom of the inquiry form title Quick Contact */.p#form_title{font-size: 1.5rem;font-weight: 500;color: #323232;margin-bottom: 30px;}Full Selection Codemake a copy of
Lose If you can't read it or there's a display/functionality error, please leave a message in the comments below or contact WeChat customer service to help with the process.
Saving Elementor Forms as Global Modules
If your form was created 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 a short code call.
Ele form is saved as all the benefits of the module is easy to modify and set up, for example, you want to modify the site-wide form email content template title or recipient, just need to modify the global module that form on it.
utilizationElementor ProEdit the Contact page, insert a form widget, right click on it to bring up the options, click "Save as global module".
Save it and go to the backend of the site > "templates" > "Save Template"Inside you can see the form just saved global module. Note that there is a Shortcode on the far right, it is the short code of the form, save it and use it later!
This saved global widget can also be seen in the Elementor editing interface (tap the 9 squares icon 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'ssecurity situation(first point the upper right corner of the figure below the 9 square icon), find the saved global module form, left mouse click and drag to the right side of the interface to the appropriate location, add the form to the page.
Why remove the random form that was inserted in the first place and use a global form instead?Don't the 2 look the same and have the same settings? The main reason is to facilitate future modifications. If all the forms in the whole site use the global module form, you only need to modify one form, and all the other forms in all 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 on the blue pencil in the upper right corner of the form, the Global Editing section will pop up on the left side, click on the green "EDIT" button in step 2 of the following figure to enter the Global Module Form editing interface.
Global module form editing interface ↓ , set by your own needs.
The inquiry form is completed and recommended to be installed.Contact Form DBPlugin, after installation, visitors submit inquiries form data will be saved in the background, you can view at any time, and there is a new form submitted to the site after the top of the background will be prompted, very practical!
Inserting ACF Field SEO Copywriting on Product Listing Pages Using Hooks
Website pages in accordance with the SEO weight and effect, from high to low order: home page > product list page > article details page > product details page. Home page SEO weight and effect is the best, to do a good job of SEO optimization need to focus on optimizing the home page, product list page and article page.
To optimize for Google SEO, you must optimize the product listing page! Not only is it highly weighted, but it is also very relevant to the main industry keywords! Basically every industry's main SEO keywords are product category words. For example, we do handbags, handbag, backpack, totobag and other category words is the main keywords.
Product listing page in addition to the product title in addition to not much text content, the number of words is too small, the content is too single can not get good rankings. Only increase hundreds of thousands of words to optimize SEO, it is possible to get good rankings.
The product listing page created using the theme can not use elementor and other plug-ins to insert content, now the only way to be more reliable and convenient is to use theACF Advanced Custom Fields PluginAdd SEO article field in the edit screen of the product listing page and call it in the frontend. Click☞ View ExampleThe
This method can also add other ACF fields to other front-end pages.
First create the field, and then inserted into the product list page editing interface. Specific methods of Baidu, not detailed here.field name(Remember it. You'll need it below.) must be in English, the field type should be "Visual Editor", and the insertion position should be according to the second picture below.
Insert the location of the product category (product_cat) as shown below↓.
After creating the field in theeveryoneAn additional visual editor will appear at the bottom of the product listing page editing screen. Just enter SEO content here to save it. You can enter text, images, videos, shortcodes and more.
The next step is how to get the entered SEO content to show up on the appropriate product listing page page. Enter theexterior condition>Theme Editor>Click on the right side of thefunctions.php Go to the code editing interface . Put the fourth line of code below theseoctReplace the field you created above with thefield nameThen copy and paste the entire code at the bottom and click "Update File".
This content is viewed at a price of29Yuan (free for VIP), please firstlog inView/download the appropriate paid content after purchase
After saving the product listings page below ↓ will display seo copy content. Add your own CSS to beautify the display effect, if you do not understand leave a comment.
Add click-to-expand, contraction copy effects
Above tutorial add output SEO copy is directly displayed, some people may be like me like the picture below this default contraction of the copy, click the button can be expanded effect. Occupies a small area, more beautiful, clickView ExampleThe
go intoexterior condition>Theme Editor>Click on the right side of thefunctions.php Enter the code editing interface. Copy and paste the following code to the bottom of functions.php and click "Update File".
The "Load More" in the ninth line and the "Hide Text" in the eleventh line are the text of the buttons in the picture above, which can be changed to the desired text.
This content is viewed at a price of29Yuan (free for VIP), please firstlog inView/download the appropriate paid content after purchase
This click to expand/collapse function is implemented in CSS, non-JS, so it's very fast. Add the following CSS code to theexterior condition>Theme Editor>Additional CSS At the bottom, tap Save.
Lines 28 and 73 of the code in theffd900is the background color code for the 2 buttons in the regular state, 64 lines in theedaa00It is the background color code of the 2 buttons when the mouse is slid over, which can be replaced with the preferred one.color 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 to suit your needs (the number should be followed by px). If you don't want to limit the width of the SEO copy to follow the width of the screen, just delete the 3 lines 20-22.
This content is viewed at a price of29Yuan (free for VIP), please firstlog inView/download the appropriate paid content after purchase
Some people may be interested in CSS code to achieve the expansion, contraction of this feature, would like to know how to achieve, here is a brief description. Expand, contraction of the use of the ipunt tag radio type radio function of the :checked this pseudo-class to achieve.
Load More and Hide Text 2 buttons through the label label production, through the label's for value is set to the corresponding ipunt label id value to link the 2, when pointing the label button when the corresponding input will also be automatically selected. For the sake of aesthetics, we also add hidden to hide the input.
First set the SEO text box to a maximum height of 200px, and then automatically hide the content. When you click Load More, the corresponding input will be added to the :checked pseudo-class, through the following CSS code can be realized when you click the Load More button when the height of the SEO text box is set to adapt to the height of the content, there is no restriction on the fixed height of 200px, the full content will be displayed.
This content is viewed at a price of29Yuan (free for VIP), please firstlog inView/download the appropriate paid content after purchase
When you click Hide Text button, the :checked pseudo-class of the Load More button moves to the top of the Hide Text button (radio radio box feature), and the CSS style of the :checked pseudo-class of the following Load More button is invalidated, and the maximum height of 200px that was set before takes effect, and the content beyond the height is hidden again.
This CSS method can also be used to do slide switching, tab switching and so on. Interested in their own Google, Baidu to understand.
Use ACF to add a PDF document download button to the product details 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 of all, use the ACF plug-in to create a field, type selection "file", the field name in plain English, the return value of the selected "file URL".
"Location Rules" where we set it to appear on the product detail page as shown below.
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 of the product detail page. Go to "Appearance" > "Theme Editor" > click "functions.php" on the right side to enter the code editing interface.
Put the fourth line of the following code in thepdflinkChange the field you created to thename (of a thing)The fifth line of theDate SheetIt's the button text, change it to what you want. Then copy and paste the whole code to the bottom of functions.php and click "Update File".
This content is viewed at a price of29Yuan (free for VIP), please firstlog inView/download the appropriate paid content after purchase
If you have other practical WordPress Hook usage to share, welcome to leave a comment below to contribute, adopted will be updated to the above content.
