Add a second featured image and field name, later display it before add to cart button

Question

I'm building a property buying and selling site for agents using wordpress and woocommerce.
I'm using the oceanwp theme.

The targets is to show the agent's photo and name before the add to cart button.
(button has been changed to whatsapp and tel contact).

What I've tried to do :

1. Add product attributes which contain photo link addresses from each agent.

2. Adding product attributes containing the name of each agent.

The code snippet I use is as follows :

add_action('woocommerce_before_add_to_cart_button','misha_before_add_to_cart_btn' );

function misha_before_add_to_cart_btn(){
global $product;

$photo_val = $product->get_attribute('pa_photo');

print '<img src='.$photo_val.' style="width: 75px;height: 75px;border-radius: 50%;margin-left: 0px;margin-right: auto;display: block;margin-bottom:10px; box-shadow:0px 0px 3px 0px rgba(9, 8, 8, 0.7);"/>';

$agent_val = $product->get_attribute('pa_agent');

echo "<p style='margin-left:5px;font-size:20px;'>".$agent_val."</p>";

}

The display is exactly what I wanted. (See)

But I noticed this method is less effective because it has to do many steps to achieve it.

So I thought, is there a way to add a custom photo (upload) and name (input) for the agent in the admin panel which is automatically displayed before the add to cart button without using an additional plugin?

Example of the desired view on the admin panel (see)

Example of the desired display on single product page (see)

---

How can I achieve that?

Any help will be greatly appreciated.

Answer 1

You can use this action hook woocommerce_before_add_to_cart_button to add any content just before add to cart button on a single product page.

Sample code that can go in your functions.php if you are editing a theme:

add_action( 'woocommerce_before_add_to_cart_button', 'content_before_addtocart' );

function content_before_addtocart() {
        echo '<img src="https://picsum.photos/150/150?random=1">';
}