How to Add Social Media Icons on WooCommerce Product Pages?

Store owners are always looking for ways to boost brand visibility and attract new audiences. That’s why we’ve made it incredibly easy to add social media icons to your product pages in WooCommerce. By adding these icons, your customers can easily share their favorite items on social media platforms. This helps your store connect with more people interested in your products, expanding your reach to a wider audience.

Solution: Add Social Media Icons on WooCommerce Product Pages

This code adds social media buttons with appropriate links and icons on the WooCommerce product page. When users click on these buttons, they are directed to the respective social media platforms or actions.

// Hook to display social media buttons after the "Add to Cart" button
add_action('woocommerce_before_add_to_cart_button', 'my_social_btn');

function my_social_btn() {
    global $wp;
    $current_url = home_url(add_query_arg(array(), $wp->request));
    echo '<div class="my-custom-social" style="display: flex; justify-content: flex-start;">';
    echo '<a href="https://www.facebook.com/sharer/sharer.php?u=' . $current_url . '" class="social fb" target="_blank">
            <img src="http://localhost/wpsite/wordpress/wp-content/uploads/2024/06/facebook.png" alt="Facebook" class="social-icon" style="margin-right: 10px;">
        </a>';
    echo '<a href="https://twitter.com/intent/tweet?url=' . $current_url . '" class="social tw" target="_blank">
            <img src="http://localhost/wpsite/wordpress/wp-content/uploads/2024/06/twitter.png" alt="Twitter" class="social-icon" style="margin-right: 10px;">
        </a>';
    echo '<a href="https://www.instagram.com" target="_blank" class="social ig">
            <img src="http://localhost/wpsite/wordpress/wp-content/uploads/2024/06/insta.jpg" alt="Instagram" class="social-icon" style="margin-right: 10px;">
        </a>';
    echo '<a href="https://wa.me/1234567890" target="_blank" class="social wa">
            <img src="http://localhost/wpsite/wordpress/wp-content/uploads/2024/06/whatsapp.jpg" alt="WhatsApp" class="social-icon">
        </a>';
    echo '</div>';
}

Output

When customers visit a product page, like for a MAC laptop, they’ll see social share icons above the “add to cart” button. Clicking on these icons takes them to their chosen social media platform’s sharing page. From there, they can easily share the product page link with their friends, potentially bringing more visitors to the store.

Just like adding these interactive elements, you can also customize your WooCommerce product page with a datepicker field that allows customers to select their preferred delivery date. Such product input fields helps you to gather customer details or preferences during the purchasing process.