Blog

Enhancing Product Visibility: Custom Icons for WooCommerce Products

In today’s fast-paced e-commerce landscape, capturing customer attention is more crucial than ever. As online shoppers quickly scroll through product listings, it’s essential to make your offerings stand out. One effective way to achieve this is through visual cues that instantly communicate key product features or promotions.

At our web development agency, we recently tackled this challenge for a client running a WooCommerce store. They needed a solution to highlight special attributes of their products, such as new launches, best sellers, and items on sale. The result was a custom product icon system that not only met their needs but also enhanced the overall shopping experience for their customers.

In this blog post, we’ll dive into the details of this project, exploring the challenges we faced, the solution we developed, and how you can implement a similar system for your WooCommerce store.

The Challenge:

In the competitive world of e-commerce, standing out is crucial. Many WooCommerce store owners struggle to highlight special features or promotions for their products effectively. Standard product labels often blend into the background, failing to catch the customer’s eye.

Our Solution:

We developed a custom product icon system for WooCommerce that allows store owners to add eye-catching icons to their products. These icons can represent various attributes such as “Sale,” “Best Seller,” “New Launch,” “Award Winning,” and “Improved Formula.”

photo enhancing product visibility custom icons 1400x1073 1 - Enhancing Product Visibility: Custom Icons for WooCommerce Products

Key Features:

  • Customizable icons for different product attributes
  • Easy-to-use admin interface in the product editor
  • Responsive design for both shop pages and single product pages
  • Flexible positioning of icons on product images

How It Works:

The system adds a meta box to the product editor in the WordPress admin panel. Store owners can select which icons to display for each product. These icons are then automatically shown on the product images in both the shop page and individual product pages.

Benefits:

  1. Increased visual appeal of products
  2. Better communication of product features and promotions
  3. Improved customer engagement and potential increase in sales
  4. Flexibility to highlight different aspects of products

Implementation:

We’ve implemented this feature using custom PHP code added to the theme’s functions.php file and custom CSS for styling.

This PHP code does the following:

  1. Adds a custom meta box to the product editor
  2. Saves the selected icons for each product
  3. Displays the selected icons on product images
  4. Provides a helper function to get icon URLs

To use this code:

  1. Add the PHP code to your theme’s functions.php file or a custom plugin 
    // Add custom meta box to product pages
function add_product_icon_meta_box() {
    add_meta_box(
        'product_icon_meta_box',
        'Product Icons',
        'product_icon_meta_box_callback',
        'product',
        'side',
        'default'
    );
}
add_action('add_meta_boxes', 'add_product_icon_meta_box');

// Callback function to display meta box content
function product_icon_meta_box_callback($post) {
    wp_nonce_field('product_icon_meta_box', 'product_icon_meta_box_nonce');

    $icon_options = array(
        'sale' => 'Sale',
        'best_seller' => 'Best seller',
        'new_launch' => 'New launch',
        'award_winning' => 'Award winning',
        'improved_formula' => 'Improved Formula'
    );

    $selected_icons = get_post_meta($post->ID, '_product_icons', true);

    foreach ($icon_options as $value => $label) {
        $checked = is_array($selected_icons) && in_array($value, $selected_icons) ? 'checked' : '';
        echo '<label><input type="checkbox" name="product_icons[]" value="' . esc_attr($value) . '" ' . $checked . '> ' . esc_html($label) . '</label><br>';
    }
}

// Save meta box data
function save_product_icon_meta_box_data($post_id) {
    if (!isset($_POST['product_icon_meta_box_nonce']) || !wp_verify_nonce($_POST['product_icon_meta_box_nonce'], 'product_icon_meta_box')) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['product_icons'])) {
        update_post_meta($post_id, '_product_icons', $_POST['product_icons']);
    } else {
        delete_post_meta($post_id, '_product_icons');
    }
}
add_action('save_post', 'save_product_icon_meta_box_data');

// Helper function to get icon URL
function get_icon_url($icon) {
    $icon_urls = array(
        'sale' => '/wp-content/uploads/2022/03/icon1.png',
        'best_seller' => '/wp-content/uploads/2022/03/icon2.png',
        'new_launch' => '/wp-content/uploads/2022/03/icon3.png',
        'award_winning' => '/wp-content/uploads/2022/03/icon4.png',
        'improved_formula' => '/wp-content/uploads/2022/09/icon5.png'
    );

    return isset($icon_urls[$icon]) ? $icon_urls[$icon] : false;
}

// Display product icons on product image
function display_product_icons() {
    global $product;

    if (!$product) {
        return;
    }

    $selected_icons = get_post_meta($product->get_id(), '_product_icons', true);

    if (!empty($selected_icons) && is_array($selected_icons)) {
        $class = is_product() ? 'single-product-icons' : 'shop-product-icons';
        echo '<div class="product-icons ' . esc_attr($class) . '">';
        foreach ($selected_icons as $icon) {
            $icon_url = get_icon_url($icon);
            if ($icon_url) {
                echo '<img src="' . esc_url($icon_url) . '" alt="' . esc_attr(ucwords(str_replace('_', ' ', $icon))) . '" class="product-icon ' . esc_attr($icon) . '">';
            }
        }
        echo '</div>';
    }
}

// Remove existing action hooks
remove_action('woocommerce_before_shop_loop_item_title', 'display_product_icons', 5);
remove_action('woocommerce_before_single_product_summary', 'display_product_icons', 25);

// Add new action hooks
add_action('woocommerce_before_shop_loop_item', 'display_product_icons', 5);
add_action('woocommerce_before_single_product_summary', 'display_product_icons', 5);
  2. Add the CSS code to your theme’s stylesheet or custom CSS section 
    /* Styles for shop page product icons */
.col-inner {
    position: relative;
}

.col-inner .product-icons.shop-product-icons {
    position: absolute;
    top: -25px;
    left: -15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3px;
    padding: 0;
    max-width: 100%;
    z-index: 10;
}

.col-inner .product-icons.shop-product-icons img.product-icon {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure the product box doesn't hide the icons */
.col-inner .product-small.box {
    overflow: visible;
}

/* Adjust the badge container to not interfere with icons */
.col-inner .badge-container.absolute.left.top.z-1 {
    z-index: 9;
}

/* Styles for single product page */
.single-product .product-main .product-gallery {
    position: relative;
}

.single-product .product-icons.single-product-icons {
    position: absolute;
    top: 7px;
    left: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3px;
    max-width: calc(100% - 40px);
    z-index: 10;
}

.single-product .product-icons.single-product-icons img.product-icon {
    width: 75px !important;
    height: 75px !important;
    max-width: 75px !important;
    max-height: 75px !important;
    min-width: 75px !important;
    min-height: 75px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
}
  3. Upload your icon images and update the URLs in the get_icon_url function

Preparing Your Custom Icons

To use this custom product icon system, you’ll need to create and upload your own icon images. Here’s what you need to do:

  1. Design Your Icons: Create five distinct icons for the following attributes:
    • Sale
    • Best Seller
    • New Launch
    • Award Winning
    • Improved Formula
  2. Image Specifications:
    • Format: PNG with transparent background
    • Size: We recommend 50×50 pixels, but you can adjust based on your theme’s design
    • Style: Ensure the icons are visually consistent with each other and your store’s branding
  3. Upload Your Icons: Use the WordPress Media Library to upload your icon images.
  4. Note the File URLs: After uploading, note down the full URL path for each icon. You’ll need these for the next step.
  5. Update the Code: In the get_icon_url function, replace the example URLs with your own icon URLs. Here’s how the code should look (replace with your actual URLs): 
    function get_icon_url($icon_type) {
  $icon_urls = array(
      'sale' => '/wp-content/uploads/2023/09/your-sale-icon.png',
      'best_seller' => '/wp-content/uploads/2023/09/your-bestseller-icon.png',
      'new_launch' => '/wp-content/uploads/2023/09/your-newlaunch-icon.png',
      'award_winning' => '/wp-content/uploads/2023/09/your-award-icon.png',
      'improved_formula' => '/wp-content/uploads/2023/09/your-improved-icon.png'
  );
  
  return isset($icon_urls[$icon_type]) ? $icon_urls[$icon_type] : '';
}

Remember to replace the example URLs with the actual paths to your uploaded icon images. The URLs should start with /wp-content/uploads/ followed by the year and month of upload, and then the filename.

By following these steps, you’ll have your custom icons ready to use with the product icon system. This allows you to maintain full control over the look and feel of your product icons, ensuring they match your store’s unique branding and style.

Some additional notes:

  1. The code uses WordPress and WooCommerce hooks for seamless integration
  2. Icon selection is stored as post meta for each product
  3. The display function checks if it’s a single product or shop page to apply appropriate styling

Displaying Product Icons in the WordPress Admin

We’ve implemented a feature to display product icons in the WordPress admin panel, specifically in the “All Products” list. This enhancement allows you to quickly identify products with special attributes such as “Sale”, “Best Seller”, “New Launch”, “Award Winning”, and “Improved Formula”. Here’s what you need to know:

  1. Location: The icons are displayed in a new column labeled “Icons” in the product list.
  2. Position: The “Icons” column is located just before the “Stock” column for easy visibility.
  3. Width: The column has a fixed width of 100px to ensure consistent layout.

Displaying Backend Icons Representation

Instead of using images, we’ve opted for a text-based representation of icons for faster loading and clearer display:

  • S: Sale
  • BS: Best Seller
  • NL: New Launch
  • AW: Award Winning
  • IF: Improved Formula

Displaying Backend Icons – How It Works

  • Each product can have multiple icons associated with it.
  • The icons are displayed as bold, uppercase letters within a light gray background.
  • If a product has no icons associated, a dash (“—”) is displayed.
  • Hovering over an icon abbreviation will show a tooltip with the full name of the attribute.

Displaying Backend Icons Benefits

  1. Quick Overview: Easily scan the product list to identify products with special attributes.
  2. Efficient Management: Quickly locate products that are on sale, best sellers, or new launches without opening individual product pages.
  3. Improved Workflow: Streamline your product management process by having key information readily available in the product list view.

Displaying Backend Icons Implementation Details

This feature has been implemented using WordPress hooks and filters, specifically:

  • manage_edit-product_columns filter to add the new column
  • manage_product_posts_custom_column action to populate the column content
  • admin_head action to add custom styling

The icons are stored as post meta for each product, allowing for flexible assignment and easy updates.

Next Steps

With this new feature in place, you can more efficiently manage your product catalog. Consider using these icons in your marketing strategies, such as highlighting best sellers or promoting new launches.

Remember to keep your product icons up-to-date to ensure accurate representation in both the admin panel and potentially on the frontend of your store.


// Add custom column to products list
function add_product_icon_column($columns) {
    $new_columns = array();

    foreach ($columns as $key => $column) {
        if ($key == 'is_in_stock') {
            $new_columns['icons'] = 'Icons';
        }
        $new_columns[$key] = $column;
    }

    return $new_columns;
}
add_filter('manage_edit-product_columns', 'add_product_icon_column');

// Populate custom column with product icon information
function populate_product_icon_column($column, $post_id) {
    if ($column === 'icons') {
        $selected_icons = get_post_meta($post_id, '_product_icons', true);
        if (!empty($selected_icons) && is_array($selected_icons)) {
            $icon_labels = array(
                'sale' => 'S',
                'best_seller' => 'BS',
                'new_launch' => 'NL',
                'award_winning' => 'AW',
                'improved_formula' => 'IF'
            );
            $displayed_icons = array();
            foreach ($selected_icons as $icon) {
                if (isset($icon_labels[$icon])) {
                    $displayed_icons[] = '<span title="' . esc_attr(ucwords(str_replace('_', ' ', $icon))) . '">' . $icon_labels[$icon] . '</span>';
                }
            }
            echo implode(' ', $displayed_icons);
        } else {
            echo '—';
        }
    }
}
add_action('manage_product_posts_custom_column', 'populate_product_icon_column', 10, 2);

// Set custom column width and style
function set_product_icon_column_width() {
    echo '<style>
        .column-icons { 
            width: 100px !important; 
            overflow: hidden; 
        }
        .column-icons span { 
            display: inline-block; 
            margin-right: 5px; 
            font-weight: bold; 
            font-size: 12px; 
            background-color: #f0f0f0; 
            padding: 2px 4px; 
            border-radius: 3px; 
        }
    </style>';
}
add_action('admin_head', 'set_product_icon_column_width');

If you need any further modifications or have any questions about implementing this code, please don’t hesitate to contact us.

Conclusion

Implementing custom product icons is a powerful way to enhance your WooCommerce store’s visual appeal and effectively communicate product features. This solution provides a user-friendly interface for store owners and an attractive display for customers, potentially leading to increased engagement and sales.