ACF Image as Product Feature Image - woocommerce

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.
ACF Image field settings
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.
ACF Image field on product page with uploaded image from media library
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.
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!
I'm using OceanWP with WooCommerce.

In your ACF field set image to return ID or modify the function bellow if you need array or url value.
Add the following function to your active theme functions.php file.
function test($html, $post_thumbnail_id ) {
global $product;
$categories = $product->get_category_ids();
//Change 19 to the category id you need
if (in_array('19', $categories)):
//Change get_field to your field
$post_thumbnail_id = get_field('custom_thumb');
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
endif;
return $html;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'test',10,2);

The answer from Martin worked great. Here's the final code if anyone needs it. It's modified to fallback onto the default woocommerce featured image if the ACF image field is empty.
function acf_wall_art_feature_image($html, $post_thumbnail_id ) {
global $product;
$categories = $product->get_category_ids();
//Get the category id from admin/products/categories/(category_name) URL
if (in_array('30', $categories)):
//Get_field for ACF field name
$post_thumbnail_id = get_field('wall_art_featured_product_image');
//Fallback to woo featured image if no ACF image is set
if (!$post_thumbnail_id):
return $html;
else:
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
endif;
endif;
return $html;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html',
'acf_wall_art_feature_image',10,2);

Related

how to get data from any specific page like blog page etc

I have a wordpress website and there are some page like aboutpage, blogpage, contactpage etc,
so my concern is that i want data like title, paragraph from that specific page (blogpage)
so how do i get this for better understanding i add some reference image
enter image description here
enter image description here
how do i get title and content
Can you refer this https://developer.wordpress.org/reference/functions/get_post/
'42' is post id you can get all like title, content, ...
$post = get_post( 42 );
$output = apply_filters( 'the_content', $post->post_content );
print_r($post);

Wordpress how to link Custom Post Type directly to a Custom Field instead of the parent post page

I have a Custom Post type with two custom fields - Description and Attachment (to upload file/PDF).
When I complete this Custom Post I want the link to go directly to the attachment rather than the post page. I am using CPT UI and Custom Fields plugins to manage all this.
Does anyone know how I can create a custom post that will go directly to an attachment rather than the post page? I want to be able to display the title of each post on a page and have the title go to the attachment within the post.
I hope this makes sense and any help greatly appreciated!
This example assumes that you are using ACF to create the fields. And the field with the file gives its ID when requested (when creating a field in ACF there is an option to give ID or link)
add_filter( 'post_type_link', 'custom_post_permalink1', 10, 4 );
function custom_post_permalink1( $permalink, $post, $leavename, $sample ) {
// Change here to your post type name
if ( $post->post_type == 'your_post_type' ) {
$post_current_id = $post->ID;
// Change here 'file' to your custom field slug
if(get_post_meta($post_current_id, "file", true) ):
$PDF_ID = get_post_meta($post_current_id, "file", true);
$PDF_URL = wp_get_attachment_url( $PDF_ID );
$permalink = $PDF_URL;
endif;
}
return $permalink;
}

How to remove meta value in all WordPress posts?

Am working on a blog and I want to add a banner which is a featured post.
But am not sure how can I make only one post to be marked as the "Featured" so if another post is marked as "Featured" it removes the old post from showing as featured.
I've tried using ACF (Advance Custom Field) checkbox to mark featured posts but my approach is incorrect.
Here is my code.
<?php
global $post;
$myposts = get_posts( array(
'posts_per_page' => 1,
'order' => 'DESC',
'numberposts' => 1,
) );
if ( $myposts ) {
foreach ( $myposts as $post ) :
setup_postdata( $post );
if(get_field('featured_post')):
?>
Once I marked the other posts featured nothing shows up.
Planning to follow this approach but I have no idea on how to remove the old featured posts.
An ACF checkbox / True/False field is a good starting point. A solution from there on would be to...
hook onto the acf/save_post action
check whether the currently saved post has featured_post enabled
if enabled, unset the 'featured' flag on the previously featured post
if enabled, store the post's ID as a global option for the featured post ('mysites_featured_post')
upon rendering the banner, get the featured post's ID from this option
For the option, you can do two things: use WP's own update_option, or create an ACF options page with a Post field that contains just one (featured) post. The ACF options page has the advantage that you can manually edit the featured post in wp-admin by navigating to the options page.
However, I'll demonstrate it using WP's update_option:
function hookACFSavePost($post_id) {
$marked_featured = get_field('featured_post', $post_id);
if ($marked_featured) {
// get previously featured post
$prev_featured_post = get_option('mysites_featured_post', false);
if (is_numeric($prev_featured_post)) {
// disable featured flag on the previously featured post, for consistency:
update_field('featured_post', false, $prev_featured_post);
}
// store this as the current featured post
update_option('mysites_featured_post', $post_id, true);
}
}
add_action('acf/save_post', 'hookACFSavePost', 20);
By this, we have achieved to disable the 'featured' checkbox on the previously selected post (if it existed), and stored the new featured post's ID in the 'mysites_featured_post' option.
To then get the featured post for rendering the banner, you can retrieve the $post_id from the option:
$featured_post_id = get_option('mysites_featured_post', false);
if ($featured_post_id) {
$post = get_post( $featured_post_id );
// render the post('s ID)
// ...
}
This solution is simple and efficient in the sense that it does not have to iterate over / query all posts' meta entries to find the currently featured post.

Modify Woocommerce Shortcode [product id=""]

I'm trying to modify the existing wordpress woocommerce single product shortcode, (ie: [product id="2020"]
This shortcode will display the product by id and description.
My goal is to use a modified shortcode on a normal "page" & display the product with gallery (and it's thumbnails) as it would display per single product page.
function show_my_product_callback($atts)
{
$a = shortcode_atts(array(
'product_id' => ''),$atts );
echo get_the_title($a['product_id']);
echo get_the_content($a['product_id']);
}
add_shortcode( 'show_my_product', 'show_my_product_callback' );
on using it: [show_my_product product_id='3']
more reading resources.
get_post_meta - for the custom fields.
get_post_content - for the product description.
get_the_title - for the name of the product.

how to create slider in the wordpress which show posts?

I search many slider for post to show.I want to create slider exact as
http://kent.co.in/ features slider which show the post.I am using carousel slider plugin but the expected output is not showing.Thanks
You can pass your dynamic post to your slider image.
make an slider category for post
Set featured image with each slider post.
and get post filter by slider category
and pass it to the your slider imagees
// The Query
$the_query = new WP_Query( 'cat=4' ); // lets suppose slider category id is 4
// The Loop
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
echo 'your post thumbnail go here';
}
echo '</ul>';
}
Install and activate Soliloquy Slider plugin.
Create an image slider with Soliloquy.
Copy the template tag from Soliloquy Slider Code widget.
Edit the theme's template file and paste the template tag.
Click on the save button.
for more info: https://www.cosmicenergy.in/

Resources