How to add custom content within the Quick View?

The Quick View allows customers to view product details without leaving the shop page. By default, the modal displays the product image, title, description and price, but you can customize the content and layout of the Quick View window using a custom WordPress action hook called xt_wooqv_custom_product_info_1, xt_wooqv_custom_product_info_2, or xt_wooqv_custom_product_info_3.

This documentation will guide you through the steps to add custom content to the Quick View window in WooCommerce.

1. Create a function to add custom content
   
   First, create a PHP function that will add your custom content to the Quick View window. This function will be hooked into the xt_wooqv_custom_product_info_1, xt_wooqv_custom_product_info_2, or xt_wooqv_custom_product_info_3 action using the add_action function.
   
   Here's an example of a function that adds the product SKU to the Quick View window using the xt_wooqv_custom_product_info_1 hook:
   
   

   function my_custom_wooqv_content( $product ) {
      $product_sku = $product->get_sku();
    
      echo '<div class="my-custom-content">';
      echo '<p>' . $product_sku . '</p>';
      echo '</div>';
   }
    
   add_action( 'xt_wooqv_custom_product_info_1', 'my_custom_wooqv_content' );
   	

   Note that you can replace the xt_wooqv_custom_product_info_1 hook with xt_wooqv_custom_product_info_2 or xt_wooqv_custom_product_info_3 if you want to add custom content to Custom Info 2 or Custom Info 3, respectively. The code for adding custom content to Custom Info 2 or Custom Info 3 would be the same as the example above, but with the corresponding hook name.

2. Enable Custom Info 1, 2, or 3 in the Quick View settings
   
   Before the custom content that we added in Step 1 can be displayed within the Quick View modal, we need to make sure that the corresponding Custom Info option is enabled in the Quick View settings.
   
   To do this, go to your WordPress dashboard and navigate to WooCommerce > Quick View. Under the "Modal Product Info" section, make sure that the "Custom Info 1", "Custom Info 2", or "Custom Info 3" option is enabled under the "Product Info Template" setting, depending on which custom info you want to use. You can also reorder them to display the content in the desired order. Simply drag and drop them to change their order.
   
   
3. Test the Quick View with custom content
   
   With our custom content function and settings in place, we can now test the Quick View window to see if our custom content is being displayed.
   
   To test the Quick View, go to your WooCommerce shop page and hover over a product thumbnail. Click the "Quick View" button to open the Quick View window.
   
   If everything is working correctly, you should see the custom content that you added to the Quick View window, along with the default product image, name, and price.

Adding custom content to XT Quick View modal is a great way to add more information about your products, or to highlight specific features or benefits. With the xt_wooqv_custom_product_info_1, xt_wooqv_custom_product_info_2, or xt_wooqv_custom_product_info_3 hook, you can easily customize the content and layout of the Quick View window to suit your needs.