Adding this here as a possible solution to some questions I saw support was unable to answer. I wanted to add a gallery image to my Woocommerce product image on hover, but there was no built in functionality in Cornerstone, and I didnt want to add a bulky plugin to do it, either. So some light php and css later, it’s easy. Here’s my code - adapt as needed.
PHP:
function cornerstone_first_gallery_image_archive($atts) {
$atts = shortcode_atts(array('id' => null), $atts);
$product_id = $atts['id'] ?: get_the_ID(); // Use passed ID or current post ID
$product = wc_get_product($product_id);
if (!$product) {
return ''; // Return empty if no product is found
}
$gallery_images = $product->get_gallery_image_ids();
if (!empty($gallery_images) && isset($gallery_images[0])) {
return wp_get_attachment_url($gallery_images[0]); // Return URL of the first gallery image
}
return ''; // Return empty if no gallery image exists
}
add_shortcode('product_first_gallery_image', 'cornerstone_first_gallery_image_archive');
I added a class .main_image and .secondary_image to the product image element and an image element respectively. The source for the seconday image uses the shortcode and dynamic content from the php snippet above: [product_first_gallery_image id={{dc:post:id}}].
You can style the images in the cornerstone inspector, but here’s the CSS I added to control the hover effects:
.main_image{
z-index:2;
}
/* Makes sure the .secondary_image is present before applying the hover effect */
.secondary_image:not([src=""]) + .main_image:hover {
opacity:0;
}
.secondary_image {
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity:0;
}
.secondary_image:hover {
opacity:1;
}
/* Hide hover image if no valid source exists */
.secondary_image[src=""] {
display: none;
}
Hope that helps someone!