[Resolved] Woocommerce Product Images Not Displaying Correctly

Home Forums Support Woocommerce Product Images Not Displaying Correctly

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1358217
    Will

    I have a Woocommerce site that uses external images which aren’t imported into the Media Library.

    When using the free GeneratePress theme, the images display fine on both the single product and category pages.

    But when activating GP Premium, I can’t get the images to display properly.

    When using the Niche design from the Site Library, the main image on the single product page doesn’t display at all, neither do the Related Product images on this page.

    On the Category pages, if I set the Image Alignment option to Left, the images display but look oversized, and the product names aren’t visible. De-activating the WooCommerce module fixes this issue, but then I don’t have control of the options this provides.

    Is there a way to get further control on this with code snippets?

    I can control the single product image via the Customizer when using some of the other Woo sites from the Site Library, but still have the issue on the category and shop pages when using GP Premium.

    #1358435
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Strange, GP Premium simply adds styling/layout options to the free theme – it doesn’t do anything to the core functionality of WooCommerce (like displaying images).

    The overlapping issue on the home page is due to the images being left-aligned – you should set that option to center.

    The images not displaying seems to be from this CSS on the site:

    ul.products .dfr-external-image img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        max-width: 300px;
    }

    Not sure if that’s custom CSS you’ve added or something from a plugin you’re using. If you can remove it, the issues should go away.

    #1358460
    Will

    Hi,

    Many thanks for the response.

    I’ve centered the images on the home/category pages, but this now removes any sign of the image from these pages.

    The thumbnails are also still not showing on the related products on the single product page.

    Yes, the CSS you refer is probably being generated from the code I have activated on the site (via a snippet) provided by the plugin author (Datafeedr.com). This stops the default action of WP importing the images when the products are added/updated, but may also have some CSS in there which is conflicting with GP Premium.

    I’ve had a play with this code snippet which is generating the CSS, but I either break the site, or nothing happens with the images.

    I’ve copied the code snippet below – would you mind taking a look and advising which bits I need to remove/change?

    Many thanks

    —–

    function mycode_dont_import_images( $url, $image_importer ) {
    return ”;
    }

    add_filter( ‘datafeedr_image_importer/url’, ‘mycode_dont_import_images’, 10, 2 );

    /**
    * Class Mycode_Replace_Missing_Images_With_External_Images
    *
    * Replaces any placeholder images with hotlinked image from merchant’s server.
    *
    * @since 1.0.0
    */
    class Mycode_Replace_Missing_Images_With_External_Images {

    private $css_class = ‘dfr-external-image’;
    private $max_width = ‘300px’;
    private $max_height = ‘300px’;
    private $image_fields = [ ‘image’, ‘thumbnail’ ];

    public function init() {
    add_action( ‘wp_head’, [ $this, ‘add_css’ ] );
    add_filter( ‘woocommerce_product_get_image’, [ $this, ‘get_image_tag_for_loop’ ], 100, 2 );
    add_filter( ‘woocommerce_placeholder_img_src’, [ $this, ‘replace_placeholder_img_src’ ], 20, 1 );
    }

    /**
    * Add CSS to <head> element to handle clipping and sizing of external images.
    *
    * @link https://stackoverflow.com/a/51447865/2489248
    */
    function add_css() {
    echo ‘<style type=”text/css”>’;
    echo ‘ul.products .’ . $this->css_class . ‘ {position:relative;width:100%;margin-bottom:22.652px;} ‘;
    echo ‘ul.products .’ . $this->css_class . ‘:after {content:””;display:block;padding-bottom:100%;} ‘;
    echo ‘ul.products .’ . $this->css_class . ‘ img {position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;object-fit:cover;object-position:center;max-width:’ . $this->max_width . ‘;}’;
    echo ‘</style>’;
    }

    /**
    * Replace placeholder tags inside WC Loop with tag with src attribute
    * of product’s external image URL.
    *
    * @param string $image HTML string containing the full tag markup.
    * @param WC_Product $product
    *
    * @return string
    */
    function get_image_tag_for_loop( $image, $product ) {

    if ( ! preg_match( “/woocommerce-placeholder/i”, $image ) ) {
    return $image;
    }

    if ( empty( $dfr_product = dfrps_product( $product->get_id() ) ) ) {
    return $image;
    }

    if ( ! $src = $this->get_external_image_src( $dfr_product ) ) {
    return $image;
    }

    $attributes = [];
    $attributes[‘width’] = absint( $this->max_width );
    $attributes[‘height’] = absint( $this->max_height );
    $attributes[‘src’] = esc_url( $src );
    $attributes[‘class’] = ‘attachment-woocommerce_thumbnail size-woocommerce_thumbnail’;
    $attributes[‘alt’] = esc_attr( $product->get_name() );

    $format = ‘

    ‘;

    return sprintf( $format, esc_attr( $this->css_class ), implode( ‘ ‘, array_map( function ( $k, $v ) {
    return $k . ‘=”‘ . $v . ‘”‘;
    }, array_keys( $attributes ), $attributes ) ) );
    }

    /**
    * Replace URL of placeholder image with the URL from the “image” field to
    * hotlink the product image direct from merchant’s server.
    *
    * @param string $src URL of default WooCommerce placeholder image.
    *
    * @return string URL The URL of the product image from the merchant’s server.
    */
    function replace_placeholder_img_src( $src ) {

    /** @var WC_Product $product */
    global $product;

    if ( ! is_product() ) {
    return $src;
    }

    if ( ! is_subclass_of( $product, ‘WC_Product’ ) ) {
    return $src;
    }

    if ( empty( $dfr_product = dfrps_product( $product->get_id() ) ) ) {
    return $src;
    }

    if ( $external_src = $this->get_external_image_src( $dfr_product ) ) {
    $src = $external_src;
    }

    return $src;
    }

    /**
    * Returns the first occurrence of an image field for the Datafeedr product
    * or false if no image fields are found.
    *
    * @param array $product A full Datafeedr product array.
    *
    * @return bool|string
    */
    private function get_external_image_src( $product ) {
    foreach ( $this->image_fields as $field ) {
    if ( isset( $product[ $field ] ) && $this->starts_with( $product[ $field ], [ ‘http’, ‘//’ ] ) ) {
    return $product[ $field ];
    }
    }

    return false;
    }

    /**
    * Determine if a given string starts with a given substring.
    *
    * @param string $haystack
    * @param string|array $needles
    *
    * @return bool
    */
    private function starts_with( $haystack, $needles ) {
    foreach ( (array) $needles as $needle ) {
    if ( $needle !== ” && substr( $haystack, 0, strlen( $needle ) ) === (string) $needle ) {
    return true;
    }
    }

    return false;
    }
    }

    ( new Mycode_Replace_Missing_Images_With_External_Images() )->init();

    // EOF

    #1358466
    Will

    Update: Think I’ve fixed it by removing the entire second section of that code snippet (Add CSS to <head> element)

    All seems to be good now.

    Thanks for your help 🙂

    #1359351
    Tom
    Lead Developer
    Lead Developer
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.