Title: Insert Image using CSS
Last modified: March 5, 2022

---

# Insert Image using CSS

 *  Resolved [jaket89](https://wordpress.org/support/users/jaket89/)
 * (@jaket89)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/insert-image-using-css/)
 * Hello,
    Using CSS, how would I insert an image after the woocommerce single product
   summary? I believe I would need to make use of the following hook:
 * “woocommerce_after_single_product_summary”

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Peter Lawrenson](https://wordpress.org/support/users/lorro/)
 * (@lorro)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/insert-image-using-css/#post-15428738)
 * CSS would allow you to put a background image to an html element, but there isn’t
   one in a suitable position, so you would need to use the hook you mentioned to
   insert an html element. But if you’re going to use the hook, you might as well
   use it to insert the image, so:
 *     ```
       add_action( 'woocommerce_after_single_product_summary', 'insert_image' );
       function insert_image() {
         print '<img src="https://my-domain.co.uk/dev/wp-content/uploads/my-image.jpg">'.PHP_EOL;
       }
       ```
   
 * The code goes in functions.php for your child theme or you can try a PHP snippets
   plugin.
 * But if you insist, use:
 *     ```
       add_action( 'woocommerce_after_single_product_summary', 'insert_image' );
       function insert_image() {
         print '<div id="my_image_div"></div>'.PHP_EOL;
       }
       ```
   
 * then the css would be:
 *     ```
       #my_image_div {
         width: 100px;
         height: 100px;
         background-image: url("https://my-domain.co.uk/dev/wp-content/uploads/my-image.jpg");
       }
       ```
   
 * For more styles to manage your image, see:
    [https://www.w3schools.com/cssref/css3_pr_background.asp](https://www.w3schools.com/cssref/css3_pr_background.asp)
 *  Thread Starter [jaket89](https://wordpress.org/support/users/jaket89/)
 * (@jaket89)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/insert-image-using-css/#post-15430024)
 * Hey Lorro. Thanks for your reply!
 * I went with your second option and have successfully added the image using the
   CSS however, I have a slight issue.
 * The image is inserted right down the bottom of all the other content. How can
   I change its priority so that it appears right at the top?
 * Cheers.
    -  This reply was modified 4 years, 2 months ago by [jaket89](https://wordpress.org/support/users/jaket89/).
 *  Plugin Support [Paulo P – a11n](https://wordpress.org/support/users/paulostp/)
 * (@paulostp)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/insert-image-using-css/#post-15430345)
 * Hello,
 * > The image is inserted right down the bottom of all the other content. How can
   > I change its priority so that it appears right at the top?
 * I suggest you look into the CSS z-index property: [https://www.w3schools.com/cssref/pr_pos_z-index.asp](https://www.w3schools.com/cssref/pr_pos_z-index.asp)
 * You can see this link for an example on using the `z-index` and `background` 
   properties together: [https://stackoverflow.com/questions/63811418/could-background-color-have-different-z-index-than-img](https://stackoverflow.com/questions/63811418/could-background-color-have-different-z-index-than-img)
 * And also find here another example for inserting and positioning images in a `
   div` with CSS: [https://stackoverflow.com/questions/10829675/how-to-put-an-image-in-div-with-css](https://stackoverflow.com/questions/10829675/how-to-put-an-image-in-div-with-css)
 * Hope this helps!
 *  [Peter Lawrenson](https://wordpress.org/support/users/lorro/)
 * (@lorro)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/insert-image-using-css/#post-15430401)
 * When you say “right down the bottom” do you mean its covered over by other content,
   in which case the z-index property needs changing as described in the previous
   post, or do you mean you can see it but its lower down the page than you would
   like? In this case, the hook may not be exactly the right one for your case.
 * ‘woocommerce_after_single_product_summary’ will come after the tabs (which include
   description and additional information) and above any upsells and related products.
 * There are many possible positions where your image could go, please explain exactly
   where you want it. A link to your sample page would be helpful.
 * Sometimes themes can change the name and position of hooks, so please say which
   theme you are using.
 *  [Margaret S. woo-hc](https://wordpress.org/support/users/margaretwporg/)
 * (@margaretwporg)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/insert-image-using-css/#post-15456546)
 * This thread has been inactive for a bit, so I’m going to mark it as closed. Hopefully,
   the above information was helpful!
 * Feel free to open a new thread if you have any other questions.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Insert Image using CSS’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

 * 5 replies
 * 4 participants
 * Last reply from: [Margaret S. woo-hc](https://wordpress.org/support/users/margaretwporg/)
 * Last activity: [4 years, 2 months ago](https://wordpress.org/support/topic/insert-image-using-css/#post-15456546)
 * Status: resolved