Using the Advanced Custom Fields plugin, I am trying to render an image on a single product page in WooCommerce.
I found this snippet of code from someone who is doing the same thing, but is rendering a text field instead. How would I change this to render an image?
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_top_category_desc', 1 );
function woocommerce_template_top_category_desc (){
$terms = get_the_terms( $post->ID, 'wc-attibute-class' );
if ( !empty($terms)) {
$term = array_pop($terms);
$text= get_field('txt-field', $term);
if (!empty($text)) {
echo $text;
}
}
}
So far I have this, but it's not working. The add action is correct because I was using it for something else, but starting at $terms is where I get lost and is obviously not right.
add_action( 'woocommerce_product_thumbnails' , 'add_below_featured_image', 9 );
function add_below_featured_image() {
$terms = get_the_terms( $post->ID, '496' );
if ( !empty($terms)) {
$term = array_pop($terms);
$image = get_field('banner_feedback', $term);
if (!empty($image)) {
echo $image;
}
}
}
Figured it out.
add_action( 'woocommerce_product_thumbnails' , 'add_below_featured_image', 9 );
function add_below_featured_image() {
if( is_single( pageidhere ) ) {
echo '<br><img src="urlhere">';
}
}
Steps to add custom gallery below featured image in woocommerce single product page(you can modify suitably to add just a single image):
Create an ACF for Image Gallery.
Copy the template for product-image.php from /plugins/woocommerce/templates/single-product to themes/your-child-theme/woocommerce/single-product/
Add the following code to product-image.php just before the closing div of
"images"
Add the images you want in the gallery to your single product admin page in the ACF custom field.
`
<?php $images = get_field('product_image_gallery'); ?>
<div class="mycustom_image_gallery">
<?php if($images): ?>
<div class="popup-gallery">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>"
class="lightbox-link"
title="<?php echo $image['caption']; ?>"
data-description="<?php echo $image['description']; ?>">
<div class="image-wrap">
<img src="<?php echo $image['sizes']['thumbnail']; ?>">
</div>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
`
Related
Well, I'm trying to create a module with the related products I have in my shop. My template has a file in the route /theme-name/woocommerce/single-product/related.php. In this we can see some code of how it call to the related product. It use the template as the listing product page (same template), but when I tried to shpw the thumbnail or the price it doesn't work. It only show me the title of the product, nothing else.
This is the code I have in my template for the file /related.php
<?php
if ( $related_products ) : ?>
<section id="nm-related" class="related products">
<div class="nm-row">
<div class="col-xs-12">
<h2><?php esc_html_e( 'Related products', 'woocommerce' ); ?></h2>
<?php woocommerce_product_loop_start(); ?>
<?php foreach ( $related_products as $related_product ) : ?>
<?php
$post_object = get_post( $related_product->get_id() );
setup_postdata( $GLOBALS['post'] =& $post_object );
wc_get_template_part( 'content', 'product' ); ?>
<?php endforeach; ?>
<?php woocommerce_product_loop_end(); ?>
</div>
</div>
</section>
<?php endif;
After that I use the "content-product" template like the listing page, where I don't have any problem.
For example, to show the product thumbnail I tried this:
<div class="nm-shop-loop-thumbnail nm-loader">
<a href="<?php echo esc_url( get_permalink() ); ?>" class="nm-shop-loop-thumbnail-link woocommerce-LoopProduct-link">
<?php
$id_pro = get_the_ID();
$pro_2 = get_post_thumbnail_id($id_pro);
$featured_image_url = wp_get_attachment_url( $pro_2 );
if(! empty( $featured_image_url )) { ?>
<?php
/**
* Hook: woocommerce_before_shop_loop_item_title.
*
* #hooked woocommerce_show_product_loop_sale_flash - 10
* #hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
} else { ?>
<img src="https://cdn.mtods.ch/wp-content/uploads/sites/2/20190409092145/nopic.jpg" data-src="https://cdn.mtods.ch/wp-content/uploads/sites/2/20190409092145/nopic.jpg" data-srcset="https://cdn.mtods.ch/wp-content/uploads/sites/2/20190409092145/nopic.jpg 350w, https://cdn.mtods.ch/wp-content/uploads/sites/2/20190409092145/nopic.jpg 250w, https://cdn.mtods.ch/wp-content/uploads/sites/2/20190409092145/nopic.jpg 400w" alt="" sizes="(max-width: 350px) 100vw, 350px" width="350" height="420" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image lazyloaded" srcset="https://cdn.mtods.ch/wp-content/uploads/sites/2/20190409092145/nopic.jpg 350w, https://cdn.mtods.ch/wp-content/uploads/sites/2/20190409092145/nopic.jpg 250w, https://cdn.mtods.ch/wp-content/uploads/sites/2/20190409092145/nopic.jpg 400w">
<?php
}
?>
</a>
</div>
And as I said, it works for the listing page but not inside single page product in related products section.
The $id_pro variable work in both pages, it shows the id of the product, but when I try to get the thumbnail URL with this id it return me "".
In the first image you can see the example for the listing page, on the other hand, in the second image you can see the example for the related products for the single product page:
I change the functionality and I created a new related product module, but still not working I don't know why...
I tried this:
In my related.php:
// Same category products query
$mproduct = new WP_Query(array(
'post_type' => 'product',
'product_cat' => $cat_slug,
'posts_per_page' => -1,
));
// Get query data
$posts = $mproduct->get_posts();
$num = $mproduct->post_count;
// Create new array with the actual product in it
$array_pro = [];
$array_pro[] = $product_id;
// Function for check if product is in array
function test_function($rand_pro, $array_pro, $posts, $num) {
if (in_array($rand_pro, $array_pro)) {
$new_pro_id = $posts[rand(0,$num-1)]->ID;
return true;
} else {
return false;
}
}
// If array is not full insert next elements
while (count($array_pro) < 5) {
$rand_pro = $posts[rand(0,$num-1)]->ID;
$pro_in_array = test_function($rand_pro, $array_pro, $posts, $num);
if ($pro_in_array == false) {
$array_pro[] = $rand_pro;
}
}
// Remove first element of array
array_shift($array_pro);
?>
<div class="related-products-row">
<?php
foreach( $array_pro as $post ) {
$rel_product_id = $post;
$rel_product_title = get_the_title($rel_product_id);
$rel_product_link = get_the_permalink($rel_product_id);
$rel_product_img_url = get_the_post_thumbnail($rel_product_id);
$_product = wc_get_product( $rel_product_id );
$rel_product_ref = $_product->get_attribute( 'reference' );
?>
<div class="col-md-3">
<p><?php echo $rel_product_img_url; ?></p>
</div>
<?php
}
?>
</div>
If you can see, when I try to getthe name I don't have problems but when I try to get the post_thumbnail_url or ref_number it doesn't show anything I don't know why.
In Advanced Custom Fields (ACF) I created an image field and added that to the categories of a custom post type so every category can have his own image. Then I created a loop that displays the categories of that custom post type. This works but I can't get the image that I uploaded in the ACF field to display.
The code for displaying the categories of the custom post type:
<?php $taxonomy = 'customposttype'; $terms = get_terms($taxonomy); if ( $terms && !is_wp_error( $terms ) ) : ?>
<?php foreach ( $terms as $term ) { ?>
<?php echo $term->name; ?>
// display acf image
<?php } ?>
<?php endif;?>
I tried to work with 'array_combine' but I couldn't get that to work.
Try this code in the loop
$term_image = get_term_meta( $term->term_id , 'category_afbeelding', true);
$image_attributes = wp_get_attachment_image_src( $term_image,’full’);
if ( $image_attributes ) :
<img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>" />
endif;
How use corect function for show thumbnail in post?
And how insert 'order' => 'asc'?
My actual code:
function show_thumb() {
$thumb_id = get_post_thumbnail_id($post_id);
$thumb_url = wp_get_attachment_url( $thumb_id );
}
and
<?php echo show_thumb(); ?>
WordPress has built in functions for this
inside the loop you can use
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
Codex Reference
and outside of the loop
<?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?>
Codex Reference
you can use this in a loop showing posts...
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
Have got this working on general wordpress categories using this plugin:
https://wordpress.org/plugins/categories-images/
Then adding the following to the category.php template as advised on another thread.
<?php if (function_exists('z_taxonomy_image_url')) { ?>
<img src="<?php echo z_taxonomy_image_url(); ?>" alt="<?php the_title(); ?>" />
<?php } ?>
I'd like to do exactly the same with the product categories. Actually ideally I'd like to be able to add background images to each category so that the description text can go over the top, like the way this shop works:
http://www.natures-own.co.uk/Antioxidants/
Is this possible with some minor code tweaking, or better still is there a woocommerce equivalent to the wordpress plugin I've used?
I cannot find any resources for this anywhere, everything I find on searching is referring to just thumbnail of a category list as far as I can see!
Thanks in advance
Pat
You can add the category image and description by adding the following to the archive-product.php file after <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?> that if statement:
if (is_product_category())
{
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
// get the image URL
$image = wp_get_attachment_url( $thumbnail_id );
//if you only want the image, uncomment the two lines below
//list($width, $height) = getimagesize($image);
//echo '<img src="'.$image.'" alt="" width="'.$width.'" height="'.$height.'"/>';
$cat_id=$cat->term_id;
$prod_term=get_term($cat_id,'product_cat');
$description=$prod_term->description;
echo '<div class="category-description" style="background-image:url('.$image.');">'.$description.'</div>';
}
To display Woocommerce Category image
use this code -
add_action('woocommerce_archive_description', 'woocommerce_add_category_image', 20);
function woocommerce_add_category_image()
{
global $product;
if (is_product_category())
{
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta($cat->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($thumbnail_id);
if ($image)
{
echo '<img src="' . esc_url($image) . '" alt="" />';
}
}
}
I have created a plugin, for some reason when I try to upload and activate it via a zip. I get the message 'no valid headers'. If I just drop the folder via ftp it seems ok. Any suggestions?
here is the plugin main files:
<?php
/*
* Plugin Name: Album Gallery
* Plugin URI: http://vinteractive.co.uk
* Description: An Album based Slider Gallery.
* Version: 1.0
* Author: Vincent Stephens
* Author URI: http://vinteractive.co.uk
* License: Do Not Redistribute
*/
define('ALBUM_GALLERY_URL', plugins_url() . '/album-gallery/');
define('ALBUM_GALLERY_ABSPATH', ABSPATH . 'wp-content/plugins/album-gallery/');
define( 'ACF_LITE' , true );
include(ALBUM_GALLERY_ABSPATH . 'custom-fields/acf.php');
include(ALBUM_GALLERY_ABSPATH . 'custom-fields/album-fields.php');
include(ALBUM_GALLERY_ABSPATH . 'custom-post-types/albums-gallery-post-type.php');
include(ALBUM_GALLERY_ABSPATH . 'shortcodes/shortcodes.php');
// Enque Scripts and styles
function album_gallery_scripts() {
wp_register_script('jquery-for-nivo', plugins_url('/js/jquery-1.9.0.min.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('jquery-for-nivo');
wp_register_script('nivo-slider', plugins_url('/nivo/scripts/jquery.nivo.slider.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('nivo-slider');
wp_register_script('album-gallery-script', plugins_url('/js/album-gallery.jquery.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('album-gallery-script');
wp_register_style('album-gallery', plugins_url('/css/album-gallery.css', __FILE__));
wp_enqueue_style('album-gallery');
wp_register_style('nivo-slider', plugins_url('/nivo/nivo-slider.css', __FILE__));
wp_enqueue_style('nivo-slider');
wp_register_style('style', plugins_url('/nivo/style.css', __FILE__));
wp_enqueue_style('style');
// Nivo Theme
wp_register_style('theme-default', plugins_url('/nivo/themes/default/default.css', __FILE__));
wp_enqueue_style('theme-default');
}
add_action( 'wp_enqueue_scripts', 'album_gallery_scripts' );
?>
Short Codes file:
<?php
function album_gallery_shortcode() {
?>
<span class="info_btn"></span>
<?php
// Loop for Album Gallery Post Type
$args = array(
'post_type' => 'albums_gallery',
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$album_name = get_the_ID();
$album_description = get_field('album_description');
?>
<div class="album album_<?php echo $album_name ?>">
<?php for ($i = 0; $i <= 0; $i++) { ?>
<div class="description album_<?php echo $album_name ?>">
<?php echo $album_description; ?>
</div>
<?php } ?>
<div class="slider-wrapper theme-default">
<div class="slider" class="nivoSlider">
<?php
$images = Array();
for($i = 1; $i <= 6; $i++) {
$image = get_field("image_{$i}");
if(!$image || !$image['url']) {
break;
}
$caption = get_field("image_{$i}_caption");
?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" title="<?php echo $caption; ?>" />
<?php } ?>
</div>
</div>
</div>
<!-- End Album -->
<?php endwhile; wp_reset_query(); ?>
<!-- // Loop for Album Gallery Post Type -->
<div class="thumbnails">
<?php
$args = array(
'taxonomy_albums' => '',
'post_type' => 'albums_gallery',
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
// album name becomes post id
$album_name = get_the_id();
$album_thumb = get_field('thumbnail');
$album_caption = get_field('album_caption');
if( !empty($album_thumb) ): ?>
<div class="thumbs" style="width: 130px; float: left; margin: 5px;">
<img class="thumb thumb_album_<?php echo $album_name; ?>" src="<?php echo $album_thumb['url']; ?>" alt="<?php echo $album_thumb['alt']; ?>" width="130" />
<p class="title"><?php the_title(); ?></p>
<p class="caption"><?php echo $album_caption ?></p>
</div>
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>
</div>
<!-- end thumbnails -->
<?php
}
add_shortcode( 'album-gallery', 'album_gallery_shortcode' );
?>
I suspect that it has something to do with the Advanced Custom Posts plugin that you include with your plugin. I had a similar issue and I solved it by moving the acf folder one level down. Meaning, instead of myplugin/advanced-custom-fields I put it in myplugin/inc/advanced-custom-fields
and it worked.
Of course, don't forget to change the path on your plugin's main file to
include(ALBUM_GALLERY_ABSPATH . 'inc/custom-fields/acf.php');
BTW, I prefer to call the plugin like that:
if( !class_exists('Acf') )
{
define( 'ACF_LITE' , true ); // Hide it from admin
include_once('inc/advanced-custom-fields/acf.php' );
}
Because you don't want your users to load it again if they already have it installed.
I had a similar problem when including ACF in a plugin and it took me forever to figure it out, especially since I drop a plugin header template in the same way each time I create a new plugin.
The problem stemmed from the included acf.php plugin header. Remove the wordpress comment header from that file, and it seems to install fine, no matter what directory level you include it from.