How to get external images into shop homepage, category page and tag page?

How To
1

I am working with Bricks and Woocommerce and I am trying to insert external image urls for the individual products on the shops homepage, category page and tag page. I have stored image filename with the method update_post_meta and I have checked that the data exist in the database. I have tried different types of hooks and filters to inject urls to each product displayed on the shop homepage, category page and tag page. If I deactivate Bricks the filters work. I have a working filter with Bricks active for the product page but on the other pages it will not work. I have also tried to insert url via Bricks, through the dynamic data field for the picture element with different methods like shortcode, do action and postmeta. Any suggestion how to solve this problem?

2

The part where you write that, your filter works, when deactivating bricks sounds familiar to me. Did you use wp_body_open hook by chance? It doesn’t exist with bricks and you need to use bricks_body hook instead.

that being said, can you maybe post your dynamic-data code?

3

one version for creating a shortcode was this:

// Shortcode to retrieve the external image URL for a product
function get_external_image_url_shortcode( $atts ) {
    // Extract the product ID from the shortcode attributes
    $atts = shortcode_atts( array(
        'product_id' => get_the_ID(), // Default to the current product if no ID is passed
    ), $atts, 'external_image_url' );
    $base_url = "https://images.pfconcept.com/ProductImages_All/JPG/500x500/";
    // Fetch the external image URL from the product's meta field
    $external_image_url = $base_url . get_post_meta( $atts['product_id'], '_external_main_image', true );

    // Return the URL if it exists, otherwise return an empty string
    return $external_image_url ? esc_url( $external_image_url ) : '';
}
add_shortcode( 'external_image_url', 'get_external_image_url_shortcode' );

Then using shortcode in the dynamic data field within the picture element in Bricks:

[external_image_url product_id=“{id}”]

I have used many different hooks but have realised that Bricks controls the game in archive-content.php with the code:

$post_id       = function_exists( 'is_shop' ) && is_shop() ? wc_get_page_id( 'shop' ) : get_queried_object_id();
$template_type = function_exists( 'is_shop' ) && is_shop() ? 'content' : 'wc_archive';
$bricks_data   = Bricks\Helpers::get_bricks_data( $post_id, $template_type );

if ( $bricks_data ) {
	// Set products query args according to "Products" element settings of this template
	do_action( 'bricks/archive_product/before', $bricks_data, $post_id );

	Bricks\Frontend::render_content( $bricks_data );

	do_action( 'bricks/archive_product/after', $bricks_data, $post_id );
}

One hook i have tried is this with no effect:


add_action( 'bricks/woocommerce_product_loop_item', 'replace_product_image_with_external_url', 10 );

function replace_product_image_with_external_url( $product ) {
    // Get the product ID
    $product_id = $product->get_id();

    // Fetch external image URL from meta
     $base_url = "https://images.pfconcept.com/ProductImages_All/JPG/500x500/";
    $external_image_url = $base_url . get_post_meta( $product_id, '_external_main_image', true );

    // If external image exists, use it; otherwise, use default WooCommerce product image
    if ( $external_image_url ) {
        echo '<img src="' . esc_url( $external_image_url ) . '" alt="' . esc_attr( $product->get_title() ) . '" />';
    } else {
        // Default WooCommerce image
        woocommerce_get_product_thumbnail();
    }
}
4

You can use the built in dynamic data functionality of bricks to do the heavy lifting. I don’t have woocommerce installed or your scenario mapped out on my local mashine but this code could do the trick for your single product page and I think you might be able to go from there.

add_filter('bricks/dynamic_tags_list',  function ($tags) {

  $tags[] = [
    'name'  => '{my_dd_tag}',
    'label' => 'My Dynamic Data',
    'group' => 'My Dynamic Data Group',
  ];

  return $tags;
});

add_filter( 'bricks/dynamic_data/render_content', 'render_my_tag', 20, 3 );
add_filter( 'bricks/frontend/render_data', 'render_my_tag', 20, 2 );
function render_my_tag( $content, $post, $context = 'text' ) {

  if ( strpos( $content, '{my_dd_tag}' ) === false) return $content;

  $product_id = $post->ID;

  $base_url = "https://images.pfconcept.com/ProductImages_All/JPG/500x500/";

  $external_image_url = $base_url . get_post_meta( $product_id, '_external_main_image', true );

  $content = str_replace( '{my_dd_tag}', $external_image_url, $content );

  return $content;
}

Resources:

Let me know if this helped

1 Like
5

Thanx for helping out. Unfortunately this code doesn’t work.
My Dynamic Data is displayed in the dropwown list of the dynamic data field in Bricks. When theme is saved and homepage reloaded the {my_dd_tag} returns false

6

Hi SuatB

Finally figured it out. Your filter works when I enter tag in the custom URL field
(Not in the dynamic data field that refers to wordpress media library)
Thanx!

1 Like