Variation image as Featured Image

  • Hi, really appreciate your help this one…

    Is there a way to display an alternate featured image on the woocommerce single product page?

    Here’s why I need that:

    I’m using OceanWP’s default product archive listing style with a gallery slider so users can cycle through the product’s gallery images. It’s like a preview and is exactly the user experience I want as the product that I’m selling comes in a variety of colors.

    When a user selects a product in the shop archive and clicks-through to the single product page though, I need to display the featured image as a mockup of the product. It’s a better user experience because it shows the user the design they already selected on the shop archive page as a product mockup. This helps to visualize and clarify what they’re getting.

    So I’ve set the woo product variation images for each colour option to an image of the mockup in the right colour. When the user selects a ‘colour’ option, the woo gallery slider changes accordingly and that’s the right user experience I need. I’ve also disabled the product thumbnail gallery using CSS.

    My problem is simply when the user arrives at the single product page, instead of showing the product’s default featured image or any gallery images, show one of the product variation images, which are the mockup images I want to show.

    Any ideas on how I can do this?

    Thanks a mil for any help ??

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello,

    Sorry but not clear with the issue, a but confusing.

    I would request you to please share the related snapshots or a short video of the issue.
    If you have any reference URL, please attach that also.

    Thread Starter yousuft

    (@yousuft)

    Sorry Abishek, here’s a detailed response:

    The problem is:
    How do I set an image that was uploaded via Advanced Custom Fields as the featured image of that woocommerce product only on the single product page?

    This is how I set it up:

    Step 1: I created an ACF image field with return format of ‘Image Array’. Here’s a screenshot of the settings.

    https://i.stack.imgur.com/wKM4W.png

    Step 2: I created conditional rules to only display the ACF input field on products for a specific category. That works. In the screen shot below you can see the field on the product page with an image uploaded to it from the media library.

    View post on imgur.com

    Step 3: Now this is the part I’m struggling with. I need to replace the woocommerce featured image with the uploaded ACF image when a user views the product page. The screenshot below shows the product page with the woocommerce featured image but I want to replace that with the ACF image I uploaded in Step 2.

    https://i.stack.imgur.com/k0Q2p.png

    Product page on Front-end shows Woo featured image but I want to replace it with ACF image uploaded in Step 2

    So I have the snippets plugin enabled where I can add code to swap the product images on the front-end (product page) but I need help with code please.

    Any help will be appreciated, thanks!

    • This reply was modified 2 years, 7 months ago by yousuft.
    • This reply was modified 2 years, 7 months ago by yousuft.

    Hello,

    Thank you for the explanation.

    I’ve consulted with our developers. Since that code would require functions related to both ACF and WooCommerce, it would be best to consult a professional developer for this.

    The easiest part for them would be to apply the codes and override the OceanWP single product template for the featured image (if necessary). But I’m afraid we are really not in the position to write this code as it involves third-party plugins and being familiar with their codes.

    If you do want to try and write the code yourself, I would recommend contacting ACF support first on the function how to retrieve the desired image.

    Thank you.

    Thread Starter yousuft

    (@yousuft)

    Thanks for looking into it Abishek. I’ve solved the issue using WooCommerce hooks in product page and some code to display the ACF image.

    Happy to share the code if it’s useful to you or other users.

    Thanks again for your support.

    Glad to hear that issue has been resolved.

    If possible, please share that code, that would be helpful for others.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Variation image as Featured Image’ is closed to new replies.