Ecommerce Shopify WordPress Discussion

Why is the icon not showing alongside the depot locations

I am trying to make a plugin in which you are able to select on woocommerce product pages which depots an item is typically found at. This is a simple plugin that is populated through user input. It all works fine apart from one issue. The text is meant to have an icon that appears next to it. As shown; <?php // Hook into WooCommerce single product page to display the depot indicators add_action( 'woocommerce_single_product_summary', 'depot_indicator_display', 30 ); function depot_indicator_display() { global $product; // Retrieve the depot information $depots = array('London & SE', 'Midlands & SW', 'North', 'North West'); $depot_data = array(); foreach ($depots as $depot) { $depot_key = 'depot_indicator_' . sanitize_title($depot); $depot_data[$depot] = get_post_meta($product->get_id(), $depot_key, true) === 'yes'; } // Output the container and depot indicators echo '<div class="depot-indicator-container">'; echo '<p>This item is usually available in:</p>'; foreach ($depot_data as $depot => $is_available) { $color = $is_available ? 'green' : 'grey'; // Adjust colors as needed echo '<span class="depot-indicator" style="color: ' . $color . ';">'; // Using Font Awesome icon echo '<i class="fas fa-check" style="margin-right: 5px;"></i>'; // fa-check icon for both states // Display the depot name echo esc_html($depot); echo '</span>'; } echo '<p>Subject to stock availability</p>'; echo '</div>'; } The code shown above is the Frontend.php. originally i was using a svg called check.svg but I've tried to go down the route of a fontawesome to see if that fixed the issue. The check.svg can still be found in /assets/check.svg if others recommend that route. The idea behind the plugin is that the text and the icon change colour when the item is available at that depot. Here are the other parts of the plugin; Admin.php <?php // Add checkboxes to the product general options add_action( 'woocommerce_product_options_general_product_data', 'depot_indicator_add_checkboxes' ); function depot_indicator_add_checkboxes() { global $post; echo '<div class="options_group">'; $depots = array( 'London & SE', 'Midlands & SW', 'North', 'North West', ); foreach ( $depots as $depot ) { woocommerce_wp_checkbox( array( 'id' => 'depot_indicator_' . sanitize_title( $depot ), 'wrapper_class' => '', 'label' => __($depot, 'depot-indicator'), ) ); } echo '</div>'; } // Save the depot data add_action( 'woocommerce_process_product_meta', 'depot_indicator_save_product' ); function depot_indicator_save_product( $post_id ) { $depots = array( 'London & SE', 'Midlands & SW', 'North', 'North West', ); foreach ( $depots as $depot ) { $depot_key = 'depot_indicator_' . sanitize_title( $depot ); $value = isset( $_POST[$depot_key] ) ? 'yes' : 'no'; update_post_meta( $post_id, $depot_key, $value ); } } // Display checkboxes for each variation add_action( 'woocommerce_product_after_variable_attributes', 'depot_indicator_add_variation_checkboxes', 10, 3 ); function depot_indicator_add_variation_checkboxes( $loop, $variation_data, $variation ) { $depots = array( 'London & SE', 'Midlands & SW', 'North', 'North West', ); foreach ( $depots as $depot ) { $depot_key = 'depot_indicator_' . sanitize_title( $depot ); $value = get_post_meta( $variation->ID, $depot_key, true ); ?> <label><input type="checkbox" class="checkbox" name="<?php echo $depot_key . '[' . $loop . ']'; ?>" <?php checked( $value, 'yes' ); ?> /> <?php echo esc_html( $depot ); ?></label> <?php } } // Save the variation depot data add_action( 'woocommerce_save_product_variation', 'depot_indicator_save_variation', 10, 2 ); function depot_indicator_save_variation( $variation_id, $i ) { $depots = array( 'London & SE', 'Midlands & SW', 'North', 'North West' ); foreach ( $depots as $depot ) { $depot_key = 'depot_indicator_' . sanitize_title( $depot ); $checkbox_key = $depot_key . '[' . $i . ']'; $value = isset( $_POST[$checkbox_key] ) ? 'yes' : 'no'; update_post_meta( $variation_id, $depot_key, $value ); } } depot-indicator.php if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } // Define plugin paths and URLs define( 'DEPOT_INDICATOR_PLUGIN_DIR', plugin_dir_path( __FILE__ ) ); define( 'DEPOT_INDICATOR_PLUGIN_URL', plugin_dir_url( __FILE__ ) ); // Include the necessary files require_once DEPOT_INDICATOR_PLUGIN_DIR . 'includes/admin.php'; require_once DEPOT_INDICATOR_PLUGIN_DIR . 'includes/frontend.php'; // Enqueue styles and scripts function depot_indicator_enqueue_scripts() { wp_enqueue_style( 'depot-indicator-style', DEPOT_INDICATOR_PLUGIN_URL . 'assets/css/style.css' ); wp_enqueue_script( 'depot-indicator-script', DEPOT_INDICATOR_PLUGIN_URL . 'assets/js/script.js', array( 'jquery' ), '', true ); } add_action( 'wp_enqueue_scripts', 'depot_indicator_enqueue_scripts' ); // Shortcode function to display depot indicators function depot_indicator_shortcode() { global $product; // Check if global product is available if ( ! is_a( $product, 'WC_Product' ) ) { return ''; } // Get depot data (similar to depot_indicator_display function) $depots = array( 'London & SE', 'Midlands & SW', 'North', 'North West', ); $depot_data = array(); foreach ( $depots as $depot ) { $depot_key = 'depot_indicator_' . sanitize_title( $depot ); $depot_data[$depot] = get_post_meta( $product->get_id(), $depot_key, true ) === 'yes'; } // Start output buffering ob_start(); // HTML output for the depot indicators echo '<div class="depot-indicator-container" style="font-family: inherit;">'; echo '<p>This item is usually available in:</p>'; foreach ( $depot_data as $depot => $is_available ) { $color = $is_available ? '#0F9C58' : '#C4C4C4'; echo '<span class="depot-indicator" style="color: ' . $color . ';">'; // Include icon and text display logic here echo esc_html( $depot ); echo '</span>'; } echo '</div>'; // Return the buffered content return ob_get_clean(); } // Register the shortcode add_shortcode('depot_indicator', 'depot_indicator_shortcode');
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.